From 2983d677b28268038d6c709fa701df7eb5fcb256 Mon Sep 17 00:00:00 2001
From: joaquinvanschoren <joaquin.vanschoren@gmail.com>
Date: Sat, 2 Dec 2023 23:46:33 +0100
Subject: [PATCH] Added a version history button for datasets

---
 .../client/app/src/pages/search/Dataset.js    | 45 +++++++++++++------
 .../client/app/src/pages/search/MetaItems.js  |  3 ++
 .../app/src/pages/search/SearchPanel.js       | 35 ++++++++-------
 3 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/server/src/client/app/src/pages/search/Dataset.js b/server/src/client/app/src/pages/search/Dataset.js
index 6805411d..81f9c8ef 100644
--- a/server/src/client/app/src/pages/search/Dataset.js
+++ b/server/src/client/app/src/pages/search/Dataset.js
@@ -148,15 +148,31 @@ export class DatasetItem extends React.Component {
                 </Typography>
               </Grid>
               <Grid item md={12}>
-                <MetaTag type={"id"} value={"ID: " + this.props.object.data_id} />
-                <MetaTag type={"status"} value={this.props.object.status === 'active' ? 'verified' : this.props.object.status}
-                  color={this.props.object.status === 'active' ? 'green' : (this.props.object.status === 'deactivated' ? 'red' : 'orange')} />
-                <MetaTag type={"format"} value={this.props.object.format} />
-                <MetaTag type={"licence"} value={this.props.object.licence} />
-                <FontAwesomeIcon icon="clock" />{" "}
-                {this.props.object.date.split(" ")[0]}
-                <br />
+                <Grid container display="flex" spacing={2}>
+                <Grid item><MetaTag type={"id"} value={"ID: " + this.props.object.data_id} /></Grid>
+                <Grid item><MetaTag type={"status"} value={this.props.object.status === 'active' ? 'verified' : this.props.object.status}
+                  color={this.props.object.status === 'active' ? 'green' : (this.props.object.status === 'deactivated' ? 'red' : 'orange')}/></Grid>
+                <Grid item><MetaTag type={"format"} value={this.props.object.format} /></Grid>
+                <Grid item><MetaTag type={"licence"} value={this.props.object.licence} /></Grid>
+                <Grid item><FontAwesomeIcon icon="clock" />{" "}
+                {this.props.object.date.split(" ")[0]}</Grid>
+                <Grid item><MetaTag type={"version"} value={'v.' + this.props.object.version} /></Grid>
+                <Grid item style={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end' }}>
                 <UserChip
+                  size="small"
+                  color="primary"
+                  label="Version history"
+                  avatar={
+                    <Avatar><FontAwesomeIcon icon="clock" /></Avatar>
+                  }
+                  href={"search?type=data&sort=version&order=asc&exact_name=" + this.props.object.name}
+                  component="a"
+                  clickable
+                /></Grid>
+                </Grid>
+
+                <Grid container display="flex" spacing={2}>
+                <Grid item><UserChip
                   size="small"
                   variant="outlined"
                   color="primary"
@@ -167,16 +183,17 @@ export class DatasetItem extends React.Component {
                   href={"search?type=user&id=" + this.props.object.uploader_id}
                   component="a"
                   clickable
-                />{" "}
-                <MetaTag type={"likes"} value={this.props.object.nr_of_likes + " likes"} />
-                <MetaTag
+                /></Grid>
+                <Grid item><MetaTag type={"likes"} value={this.props.object.nr_of_likes + " likes"} /></Grid>
+                <Grid item><MetaTag
                   type={"issues"}
                   value={this.props.object.nr_of_issues + " issues"}
-                />
-                <MetaTag
+                /></Grid>
+                <Grid item><MetaTag
                   type={"downloads"}
                   value={this.props.object.nr_of_downloads}
-                />
+                /></Grid>
+                </Grid>
               </Grid>
             </Grid>
 
diff --git a/server/src/client/app/src/pages/search/MetaItems.js b/server/src/client/app/src/pages/search/MetaItems.js
index 8fe3abb9..1ad73286 100644
--- a/server/src/client/app/src/pages/search/MetaItems.js
+++ b/server/src/client/app/src/pages/search/MetaItems.js
@@ -15,6 +15,9 @@ export class MetaTag extends React.Component {
       case "format":
         icon = "table";
         break;
+      case "version":
+        icon = "code-branch";
+        break;
       case "licence":
         icon = "closed-captioning";
         break;
diff --git a/server/src/client/app/src/pages/search/SearchPanel.js b/server/src/client/app/src/pages/search/SearchPanel.js
index b5ed3591..f160a153 100644
--- a/server/src/client/app/src/pages/search/SearchPanel.js
+++ b/server/src/client/app/src/pages/search/SearchPanel.js
@@ -72,25 +72,26 @@ export default class SearchPanel extends React.Component {
   getQueryParams = () => {
     let qstring = queryString.parse(this.props.location.search);
 
-      // Sensible defaults
-      if (qstring.type === "data" && qstring.status === undefined) {
-        qstring.status = "active";
-        this.updateQuery("status", "active");
-      } else if (qstring.type === "measure" && qstring.measure_type === undefined) {
-        qstring.measure_type = "data_quality";
-        this.updateQuery("measure_type", "data_quality");
-      } else if ((qstring.type === "study" || qstring.type === "benchmark") && qstring.study_type === undefined) {
-        qstring.study_type = "task";
-        this.updateQuery("study_type", "task");
-      } else if ((qstring.type === "study" || qstring.type === "benchmark") && 
-          this.context.filters.study_type !== undefined && qstring.study_type !== this.context.filters.study_type.value) {
-        //study type changed, reset active tab
-        this.context.activeTab = 0
-      }
-    
+    // Sensible defaults
+    if (qstring.type === "data" && qstring.status === undefined) {
+      qstring.status = "active";
+      this.updateQuery("status", "active");
+    } else if (qstring.type === "measure" && qstring.measure_type === undefined) {
+      qstring.measure_type = "data_quality";
+      this.updateQuery("measure_type", "data_quality");
+    } else if ((qstring.type === "study" || qstring.type === "benchmark") && qstring.study_type === undefined) {
+      qstring.study_type = "task";
+      this.updateQuery("study_type", "task");
+    } else if ((qstring.type === "study" || qstring.type === "benchmark") && 
+        this.context.filters.study_type !== undefined && qstring.study_type !== this.context.filters.study_type.value) {
+      //study type changed, reset active tab
+      this.context.activeTab = 0
+    }
+    console.log(qstring.sort);
     // If no sort is defined, set a sensible default
-    if (this.context.sort === null || this.context.sort === undefined || this.context.type !== qstring.type) {
+    if (qstring.sort === undefined && (this.context.sort === null || this.context.sort === undefined || this.context.type !== qstring.type)) {
       if (["data", "flow", "task"].includes(qstring.type)) {
+        console.log("I'm overwriting sort");
         qstring.sort = "runs";
       } else if ((qstring.type === "study" || qstring.type === "benchmark") && qstring.study_type === "task") {
         qstring.sort = "tasks_included";