Merge pull request #9 from Tehsurfer/dataset-info

Added a dataset header component to link to datasets
ABI-Software · May 18, 2020 · 020d807 · 020d807
2 parents e2e2973 + 37c36c7
commit 020d807
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 13 deletions.
diff --git a/src/components/DatasetHeader.vue b/src/components/DatasetHeader.vue
@@ -1,7 +1,20 @@
 <template>
-  <div class="dataset-title-container" ref="container">
-     <div class="dataset-link">
-        <el-link href="url">{{title}}<i class="el-icon-connection el-icon--right"></i> </el-link>
+  <div class="dataset-title-container" ref="container" @mouseleave="cardDisplayed=false">
+    <div @click="openCard($event)" class="dataset-link">
+      <el-link class="dataset-title">
+        {{entry.datasetTitle}}
+        <i v-show="!cardDisplayed" class="el-icon-arrow-down el-icon--right"></i>
+        <i v-show="cardDisplayed" class="el-icon-arrow-up el-icon--right"></i>
+      </el-link>
+      <el-card v-show="cardDisplayed" :body-style="{ padding: '0px' }" class="dataset-card" ref="card">
+        <img :src="entry.datasetImage" class="image"/>
+        <div style="padding: 14px;">
+          <span class="dataset-description">{{entry.datasetDescription}}</span>
+          <div >
+            <el-button class="button" @click="openDatasetUrl()">Get Dataset</el-button>
+          </div>
+        </div>
+      </el-card>
     </div>
   </div>
 </template>
@@ -10,23 +23,70 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Link, Icon } from "element-ui";
+import { Link, Icon, Card, Button, Select } from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
 locale.use(lang);
 Vue.use(Link);
 Vue.use(Icon);
+Vue.use(Card);
+Vue.use(Button);
+Vue.use(Select);
 
 export default {
   name: "DatasetHeader",
   components: {},
-  props: ["title", "url"],
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: Object,
+  },
+  data: function() {
+    return {
+      cardDisplayed: false
+    }
+  },
+  methods: {
+    switchCardDisplay: function(){
+      this.cardDisplayed = !this.cardDisplayed;
+    },
+    openCard: function(event){
+      this.cardDisplayed = true;  
+      this.$refs.card.$el.style.left = event.layerX + 'px'; 
+      this.$refs.card.$el.style.top = event.layerY + 'px';
+    },
+    openDatasetUrl: function(){
+      window.open(this.entry.datasetUrl, '_blank');
+      this.cardDisplayed = false;
+    }
+  }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
+.dataset-title-container{
+  margin: 3px;
+}
+.dataset-title{
+  font: HelveticaNeue-Medium;
+  font-size: 16px;
+  color: #606266;
+}
+.dataset-card{
+  width: 230px;
+  position: absolute;
+  z-index: 10;
+}
+.image{
+  width: 100%;
+  display: block;
+}
+.dataset-description{
+  font-size: 10px;
+}
 </style>
diff --git a/src/components/FloatingDialog.vue b/src/components/FloatingDialog.vue
@@ -9,14 +9,15 @@
           @close="onClose"/>         
       </el-header>
       <el-main class="dialog-main" :style="mainStyle">
+        <DatasetHeader v-if="entry.datasetTitle" class="dataset-header" :entry="entry"></DatasetHeader>
         <MultiFlatmapVuer v-if="entry.type === 'Flatmap'" :availableSpecies="entry.availableSpecies" 
           @flatmapChanged="flatmapChanged"
           @resource-selected="resourceSelected(entry.type, $event)"  :name="entry.resource" 
           style="height:100%;width:100%;" :initial="entry.resource" 
           ref="flatmap"/>
         <ScaffoldVuer v-else-if="entry.type === 'Scaffold'" :url="entry.resource" 
           @scaffold-selected="resourceSelected(entry.type, $event)" ref="scaffold" />
-        <PlotVuer v-else-if="entry.type === 'Plot'" :url="entry.resource" :plotType="entry.plotType"></PlotVuer>
+        <PlotVuer v-else-if="entry.type === 'Plot'" :url="entry.resource" :plotType="entry.plotType" style="height: 200px"></PlotVuer>
         <MapPopover v-if="(entry.type === ('Flatmap')) || (entry.type === ('Scaffold'))"
           :selectedResource="selectedResource" :placement="tPlacement"
           :tooltipCoords="tooltipCoords" :visible="tVisible"
@@ -43,6 +44,7 @@
 import Vue from "vue";
 import DialogToolbarContent from './DialogToolbarContent';
 import MapPopover from './MapPopover';
+import DatasetHeader from './DatasetHeader'
 import VueDraggableResizable from 'vue-draggable-resizable';
 import '@abi-software/flatmapvuer';
 import '@abi-software/flatmapvuer/dist/flatmapvuer.css';
@@ -86,7 +88,8 @@ export default {
   },
   components: {
     DialogToolbarContent,
-    MapPopover
+    MapPopover,
+    DatasetHeader
   },
   methods: {
     /**
@@ -210,7 +213,7 @@ export default {
         default:
           this.className = "parent-dialog";
       }
-    }
+    },
   }
 };
 </script>
@@ -223,6 +226,10 @@ export default {
   border-bottom: solid 0.7px #dcdfe6;
   background-color: #f5f7fa;
 }
+.incorperateHeader{
+  height: calc(100%-205px);
+  padding:0px;
+}
 .dialog-main {
   padding:0px;
 }

diff --git a/src/components/FloatingFlow.vue b/src/components/FloatingFlow.vue
@@ -93,11 +93,8 @@ export default {
      */
     createNewEntry: function(data) {
       let newEntry = {};
-      newEntry.resource = data.resource;
-      newEntry.type = data.type;
+      Object.assign(newEntry, data)
       newEntry.mode = "normal";
-      if (data.plotType)
-        newEntry.plotType = data.plotType;
       newEntry.id = ++this.currentCount;
       newEntry.zIndex = ++this.zIndex;
       this.entries.push(newEntry);

diff --git a/src/components/MapPopover.vue b/src/components/MapPopover.vue
@@ -110,6 +110,10 @@ export default {
                 resource: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-4/RNA_Seq.csv",
                 type: "Plot",
                 plotType: "heatmap",
+                datasetTitle: "Molecular Phenotype Distribution of Single Rat Intracardiac Neurons",
+                datasetDescription: "Images collected from serial cryostat sectioning of a cryopreserved heart was used to reconstruct the 3D context. Transcriptional profiles taken from isolated single neurons and mapped back into the previously generated 3D context.",
+                datasetUrl: "https://discover.blackfynn.com/datasets/29",
+                datasetImage: "https://assets.discover.blackfynn.com/dataset-assets/29/6/revisions/1/banner.jpg"
               },
               {
                 title: "View dataset",