@abi-software/map-side-bar 1.1.17 → 1.2.0-beta.0

package/src/algolia/utils.js

@@ -1,52 +1,52 @@
-/* eslint-disable no-alert, no-console */
-
-// Mapping between display categories and their Algolia index property path
-// Used for populating the Dataset Search Results facet menu dynamically
-export const facetPropPathMapping = {
-  'anatomy.organ.name' : 'Anatomical Structure',
-  'organisms.primary.species.name' : 'Species',
-  'item.modalities.keyword' : 'Experimental Approach',
-  'attributes.subject.sex.value' : 'Sex',
-  'attributes.subject.ageCategory.value' : 'Age Categories',
-}
-
-/* Returns filter for searching algolia. All facets of the same category are joined with OR,
-  * and each of those results is then joined with an AND.
-  * i.e. (color:blue OR color:red) AND (shape:circle OR shape:red) */
-export function getFilters(selectedFacetArray=undefined) {
-  
-  // return all datasets if no filter
-  if (selectedFacetArray === undefined) {
-    return 'NOT item.published.status:embargo'
-  }
-
-  // Switch the 'term' attribute to 'label' if 'label' does not exist 
-  selectedFacetArray.forEach(f=>f.label=f.facet)
-  
-
-  let facets = removeShowAllFacets(selectedFacetArray)
-
-  let filters = "NOT item.published.status:embargo";
-  filters = `(${filters}) AND `;
-
-  const facetPropPaths = Object.keys(facetPropPathMapping);
-  facetPropPaths.map((facetPropPath) => {
-    const facetsToOr = facets.filter(
-      (facet) => facet.facetPropPath == facetPropPath
-    );
-    var filter = "";
-    facetsToOr.map((facet) => {
-      filter += `"${facetPropPath}":"${facet.label}" OR `;
-    });
-    if (filter == "") {
-      return;
-    }
-    filter = `(${filter.substring(0, filter.lastIndexOf(" OR "))})`;
-    filters += `${filter} AND `;
-  });
-  return filters.substring(0, filters.lastIndexOf(" AND "));
-}
-
-function removeShowAllFacets(facetArray){
-  return facetArray.filter( f => f.label !== 'Show all')
+/* eslint-disable no-alert, no-console */
+
+// Mapping between display categories and their Algolia index property path
+// Used for populating the Dataset Search Results facet menu dynamically
+export const facetPropPathMapping = {
+  'anatomy.organ.name' : 'Anatomical Structure',
+  'organisms.primary.species.name' : 'Species',
+  'item.modalities.keyword' : 'Experimental Approach',
+  'attributes.subject.sex.value' : 'Sex',
+  'attributes.subject.ageCategory.value' : 'Age Categories',
+}
+
+/* Returns filter for searching algolia. All facets of the same category are joined with OR,
+  * and each of those results is then joined with an AND.
+  * i.e. (color:blue OR color:red) AND (shape:circle OR shape:red) */
+export function getFilters(selectedFacetArray=undefined) {
+  
+  // return all datasets if no filter
+  if (selectedFacetArray === undefined) {
+    return 'NOT item.published.status:embargo'
+  }
+
+  // Switch the 'term' attribute to 'label' if 'label' does not exist 
+  selectedFacetArray.forEach(f=>f.label=f.facet)
+  
+
+  let facets = removeShowAllFacets(selectedFacetArray)
+
+  let filters = "NOT item.published.status:embargo";
+  filters = `(${filters}) AND `;
+
+  const facetPropPaths = Object.keys(facetPropPathMapping);
+  facetPropPaths.map((facetPropPath) => {
+    const facetsToOr = facets.filter(
+      (facet) => facet.facetPropPath == facetPropPath
+    );
+    var filter = "";
+    facetsToOr.map((facet) => {
+      filter += `"${facetPropPath}":"${facet.label}" OR `;
+    });
+    if (filter == "") {
+      return;
+    }
+    filter = `(${filter.substring(0, filter.lastIndexOf(" OR "))})`;
+    filters += `${filter} AND `;
+  });
+  return filters.substring(0, filters.lastIndexOf(" AND "));
+}
+
+function removeShowAllFacets(facetArray){
+  return facetArray.filter( f => f.label !== 'Show all')
 }

package/src/components/Cascader.vue

@@ -1,49 +1,49 @@
-<script>
-/* eslint-disable no-alert, no-console */
-import { Cascader } from "element-ui";
-
-export default {
-  name: 'CustomCascader',
-  extends: Cascader,
-  methods:{
-    //Modify this internal function to disable Show all tags
-    computePresentTags() {
-      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
-      const checkedNodes = this.getCheckedNodes(leafOnly);
-      const tags = [];
-      const genTag = node => ({
-        node,
-        key: node.uid,
-        text: node.getText(showAllLevels, separator),
-        hitState: false,
-        closable: !isDisabled && !node.isDisabled
-      });
-      let customNodes = checkedNodes.filter(node =>
-        {
-          return !(node.getText(showAllLevels, separator).includes("Show all"));
-        }
-      );
-      if (customNodes.length) {
-        const [first, ...rest] = customNodes;
-        const restCount = rest.length;
-        tags.push(genTag(first));
-        if (restCount) {
-          if (collapseTags) {
-            tags.push({
-              key: -1,
-              text: `+ ${restCount}`,
-              closable: false
-            });
-          } else {
-            rest.forEach(node => tags.push(genTag(node)));
-          }
-        }
-      }
-      this.checkedNodes = checkedNodes;
-      this.presentTags = tags;
-      this.$emit("tags-changed", this.presentTags);
-    }
-  }
-}
-
-</script>
+<script>
+/* eslint-disable no-alert, no-console */
+import { Cascader } from "element-ui";
+
+export default {
+  name: 'CustomCascader',
+  extends: Cascader,
+  methods:{
+    //Modify this internal function to disable Show all tags
+    computePresentTags() {
+      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
+      const checkedNodes = this.getCheckedNodes(leafOnly);
+      const tags = [];
+      const genTag = node => ({
+        node,
+        key: node.uid,
+        text: node.getText(showAllLevels, separator),
+        hitState: false,
+        closable: !isDisabled && !node.isDisabled
+      });
+      let customNodes = checkedNodes.filter(node =>
+        {
+          return !(node.getText(showAllLevels, separator).includes("Show all"));
+        }
+      );
+      if (customNodes.length) {
+        const [first, ...rest] = customNodes;
+        const restCount = rest.length;
+        tags.push(genTag(first));
+        if (restCount) {
+          if (collapseTags) {
+            tags.push({
+              key: -1,
+              text: `+ ${restCount}`,
+              closable: false
+            });
+          } else {
+            rest.forEach(node => tags.push(genTag(node)));
+          }
+        }
+      }
+      this.checkedNodes = checkedNodes;
+      this.presentTags = tags;
+      this.$emit("tags-changed", this.presentTags);
+    }
+  }
+}
+
+</script>

package/src/components/ContextCard.vue

@@ -1,157 +1,157 @@
-<template>
-  <div class="context-card-container"  ref="container">
-    <div v-show="showContextCard">
-      <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-if="showDetails && Object.keys(contextData).length !== 0" class="context-card card" >
-        <img :src="entry.banner" class="context-image card-left">
-        <div class="card-right">
-          <div class="title">{{contextData.heading}}</div>
-          <div>{{contextData.description}}</div>
-          <template v-for="(view, i) in contextData.views">
-            <br v-bind:key="i"/>
-            <span v-bind:key="i+'_1'" @click="openViewFile(view)" class="scaffold-view"><img :src="getFileFromPath(view.thumbnail)"> {{view.description}}</span>
-          </template>
-        </div>
-      </el-card>
-    </div>
-  </div>
-</template>
-
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Link, Icon, Card, Button, Select, Input } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-import EventBus from "./EventBus"
-
-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 {
-      contextData: {},
-      showDetails: true,
-      showContextCard: true
-    };
-  },
-  watch: {
-    'entry.contextCardUrl': {
-      handler(val){
-        if (val) {
-          this.getContextFile(val)
-          this.showContextCard = true
-        } else {
-          this.showContextCard = false
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    getContextFile: function (contextFileUrl) {
-      fetch(contextFileUrl)
-        .then((response) =>{
-          if (!response.ok){
-            throw Error(response.statusText)
-          } else {
-             return response.json()
-          }
-        })
-        .then((data) => {
-          this.contextData = data
-        })
-        .catch(() => {
-          //set defaults if we hit an error
-          this.thumbnail = require('@/../assets/missing-image.svg')
-          this.discoverId = undefined
-        });
-    },
-    removeDoubleFilesPath: function(path){
-      if (path.includes('files/files/')){
-        return path.replace('files/files/', 'files/')
-      } else {
-        return path
-      }
-    },
-    getFileFromPath: function(path){
-      path = this.removeDoubleFilesPath(path)
-      return  `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
-    },
-    openViewFile: function(view){
-
-      // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
-      this.entry.viewUrl = view.path.split('/')[view.path.split('/').length-1]
-      this.entry.type = 'Scaffold View'
-      EventBus.$emit("PopoverActionClick", this.entry)
-    }
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-.hide{
-  color: #e4e7ed;
-  cursor: pointer;
-}
-
-.context-card{
-  background-color: white;
-}
-
-.context-card >>> .el-card__body {
-  padding: 0px;
-  display: flex;
-  width: 516px;   
-}
-
-.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;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-  height: 25px;
-}
-
-.title{
-  font-weight: bold;
-}
-</style>
+<template>
+  <div class="context-card-container"  ref="container">
+    <div v-show="showContextCard">
+      <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-if="showDetails && Object.keys(contextData).length !== 0" class="context-card card" >
+        <img :src="entry.banner" class="context-image card-left">
+        <div class="card-right">
+          <div class="title">{{contextData.heading}}</div>
+          <div>{{contextData.description}}</div>
+          <template v-for="(view, i) in contextData.views">
+            <br v-bind:key="i"/>
+            <span v-bind:key="i+'_1'" @click="openViewFile(view)" class="scaffold-view"><img :src="getFileFromPath(view.thumbnail)"> {{view.description}}</span>
+          </template>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Link, Icon, Card, Button, Select, Input } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+import EventBus from "./EventBus"
+
+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 {
+      contextData: {},
+      showDetails: true,
+      showContextCard: true
+    };
+  },
+  watch: {
+    'entry.contextCardUrl': {
+      handler(val){
+        if (val) {
+          this.getContextFile(val)
+          this.showContextCard = true
+        } else {
+          this.showContextCard = false
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getContextFile: function (contextFileUrl) {
+      fetch(contextFileUrl)
+        .then((response) =>{
+          if (!response.ok){
+            throw Error(response.statusText)
+          } else {
+             return response.json()
+          }
+        })
+        .then((data) => {
+          this.contextData = data
+        })
+        .catch(() => {
+          //set defaults if we hit an error
+          this.thumbnail = require('@/../assets/missing-image.svg')
+          this.discoverId = undefined
+        });
+    },
+    removeDoubleFilesPath: function(path){
+      if (path.includes('files/files/')){
+        return path.replace('files/files/', 'files/')
+      } else {
+        return path
+      }
+    },
+    getFileFromPath: function(path){
+      path = this.removeDoubleFilesPath(path)
+      return  `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
+    },
+    openViewFile: function(view){
+
+      // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
+      this.entry.viewUrl = view.path.split('/')[view.path.split('/').length-1]
+      this.entry.type = 'Scaffold View'
+      EventBus.$emit("PopoverActionClick", this.entry)
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.hide{
+  color: #e4e7ed;
+  cursor: pointer;
+}
+
+.context-card{
+  background-color: white;
+}
+
+.context-card >>> .el-card__body {
+  padding: 0px;
+  display: flex;
+  width: 516px;   
+}
+
+.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;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+  height: 25px;
+}
+
+.title{
+  font-weight: bold;
+}
+</style>