Merge pull request #1 from ABI-Software/main

Merge in upstream changes.

.env

@@ -0,0 +1 @@
+VUE_APP_API_LOCATION=http://localhost:5000/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",

src/App.vue

@@ -3,7 +3,8 @@
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
     Click arrow to open sidebar
-    <SideBar class="side-bar" ref="sideBar" :apiLocation=apiLocation :visible="sideBarVisibility"></SideBar>
+    <el-button @click="openSearch">search 'heart' from refs</el-button>
+    <SideBar class="side-bar" ref="sideBar" :apiLocation=apiLocation :visible="sideBarVisibility" :tabs="tabArray" :activeId="activeId" @tabClicked="tabClicked" ></SideBar>
   </div>
 </template>
 
@@ -17,12 +18,58 @@ export default {
   components: {
     SideBar
   },
+  computed: {
+    tabs: function(){
+      let temp = [...this.tabArray]
+      for(let i in this.tabArray){
+        temp[i].contextCard = this.contextArray[i]
+      }
+      return temp
+    }
+  },
   data: function(){
     return {
+      tabArray: [{title: 'Flatmap', id:1},{title: 'Heart Scaffold', id:2},{title: 'Stomach Scaffold', id:3}],
+      contextArray: [null,{
+        title: "Neural paths mapped to a heart scaffold",
+        description: "Points are mapped to their positions on a 3d heart that is mapped to the data.",
+        bannerImage: 'https://image.prntscr.com/image/aNIksBFARaKwlKhpnDCKbA.png',
+        keys: [{
+          image: "https://image.prntscr.com/image/VqNcZ8fSQJu5TJEf9ahwvA.png",
+          text: "Neural path"
+        }],
+      },{
+        title: "ICN fitted Scaffold",
+        description: "Points are mapped to their positions on a 3d heart that is mapped to the data.",
+        bannerImage: 'https://image.prntscr.com/image/BKgqmjSaQjK-B9hy_W7haQ.png',
+        keys: [{
+          image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png",
+          text: "Data type 1"
+        },{
+          image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png",
+          text: "Data type 2"
+        },{
+          image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png",
+          text: "Data type 3"
+        },{
+          image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png",
+          text: "Data type 4"
+        }
+        ]
+      }],
       sideBarVisibility: true,
-      apiLocation: process.env.VUE_APP_API_LOCATION
+      apiLocation: process.env.VUE_APP_API_LOCATION,
+      activeId: 1,
     }
   },
+  methods:{
+    tabClicked: function(id){
+      this.activeId = id
+    },
+    openSearch: function(){
+      this.$refs.sideBar.openSearch('heart', [{facet: 'All Species', term:'species'}] )
+    }
+  }
 }
 </script>
 

src/components/ContextCard.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="context-card-container"  ref="container">
+    <div v-show="showDetails" class="hide" @click="showDetails = !showDetails">Hide information<i class="el-icon-arrow-up"></i></div>
+    <div v-show="!showDetails" class="hide" @click="showDetails = !showDetails">Show information<i class="el-icon-arrow-down"></i></div>
+    <el-card v-show="showDetails" class="context-card card" :body-style="{ padding: '0px', 'background-color': 'white', display: 'flex', width: '516px'}">
+      <img :src="entry.bannerImage" class="context-image card-left">
+      <div class="card-right">
+        <div class="title">{{entry.title}}</div>
+        <div>{{entry.description}}</div>
+        <template v-for="key in entry.keys">
+          <br v-bind:key="key.text"/>
+          <span v-bind:key="key.text + 1"><img :src="key.image" style="height: 20px;"> {{key.text}}</span>
+        </template>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Link, Icon, Card, Button, Select, Input } 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);
+Vue.use(Input);
+
+
+
+export default {
+  name: "contextCard",
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: Object,
+  },
+  data: function () {
+    return {
+      showDetails: true
+    };
+  },
+  computed: {
+
+  },
+  methods: {
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.hide{
+  color: #e4e7ed;
+  cursor: pointer;
+}
+
+.context-card{
+  background-color: white;
+}
+
+.context-image{
+  width: 250px
+}
+
+.card {
+  padding-top: 18px;
+  margin-bottom: 18px;
+  position: relative;
+  border: solid 1px #e4e7ed;
+  display: flex;
+}
+
+.card-left{
+  flex: 1
+}
+
+.card-right {
+  flex: 1.3;
+  padding-left: 6px;
+}
+
+.title{
+  font-weight: bold;
+}
+</style>

src/components/DatasetCard.vue

@@ -87,6 +87,7 @@ export default {
           title: "View 3D scaffold",
           type: "Scaffold",
           discoverId: this.discoverId,
+          contextCard: scaffoldMetaMap[this.discoverId].contextCard 
         }
         EventBus.$emit("PopoverActionClick", action)
     },