@abi-software/map-side-bar 2.7.2-beta.1 → 2.7.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.7.2-beta.1",
+  "version": "2.7.2-beta.3",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -25,13 +25,14 @@
       :visible="sideBarVisibility"
       :annotationEntry="annotationEntry"
       :createData="createData"
-      :connectivityInfo="connectivityInput"
+      :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-clicked="openConnectivitySearch"
       @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
+      @connectivity-explorer-clicked="onConnectivityExplorerClicked"
     />
   </div>
 </template>
@@ -39,12 +40,9 @@
 <script>
 /* eslint-disable no-alert, no-console */
 // optionally import default styles
-import { markRaw } from "vue";
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
-// import { FlatmapQueries } from "@abi-software/map-utilities/src/services/flatmapQueries.js";
-// import { getKnowledgeSource, loadAndStoreKnowledge } from "@abi-software/map-utilities/src/services/flatmapKnowledge.js";
 
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -138,7 +136,7 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
-      connectivityInput: exampleConnectivityInput,
+      connectivityEntry: {},
       createData: {
         toBeConfirmed: false,
         points: [],
@@ -156,11 +154,7 @@ export default {
     }
   },
   methods: {
-    loadConnectivityKnowledge: async function (flatmap) {
-      // const sckanVersion = getKnowledgeSource(flatmap);
-      // const flatmapQueries = markRaw(new FlatmapQueries());
-      // flatmapQueries.initialise(this.envVars.FLATMAPAPI_LOCATION);
-      // const knowledge = await loadAndStoreKnowledge(flatmap, flatmapQueries);
+    loadConnectivityKnowledge: async function () {
       const sql = `select knowledge from knowledge
         where source="${this.sckanVersion}"
         order by source desc`;
@@ -173,7 +167,7 @@ export default {
       });
       this.connectivityKnowledge = this.flatmapKnowledge;
     },
-    connectivityQueryFilter: async function (flatmap, payload) {
+    connectivityQueryFilter: async function (payload) {
       let results = this.flatmapKnowledge;
       if (payload.type === "query-update") {
         if (this.query !== payload.value) this.target = [];
@@ -187,18 +181,11 @@ export default {
         this.target = payload.data;
       }
       if (this.query) {
-        let flag = "", order = [], suggestions = [], paths = [];
-        // this.searchSuggestions(this.query, suggestions);
-        // const labels = [...new Set(suggestions)];
+        let flag = "", order = [], paths = [];
         const labels = ['neuron type aacar 11'];
         flag = 'label';
         order = labels;
         if (labels.length === 1) {
-          // const options = {
-          //   type: this.filter.map(f => f.facet.toLowerCase()),
-          //   target: this.target.map(d => d.id),
-          // };
-          // paths = await flatmap.retrieveConnectedPaths(this.query, options);
           paths =['ilxtr:neuron-type-aacar-11', 'ilxtr:neuron-type-bolew-unbranched-11'];
           flag = 'id';
           order = [this.query, ...paths.filter(item => item !== this.query)];
@@ -212,9 +199,11 @@ export default {
       console.log('hoverChanged', data)
     },
     searchChanged: function (data) {
-      console.log(data)
-      if (data.id === 4) {
-        this.connectivityQueryFilter({}, data)
+      if (!this.flatmapKnowledge.length) {
+        this.loadConnectivityKnowledge();
+      }
+      if (data.id === 2) {
+        this.connectivityQueryFilter(data)
       }
     },
     // For connectivity input actions
@@ -354,6 +343,9 @@ export default {
       const query = entry ? entry.query : 'ilxtr:neuron-type-aacar-5'
       const filter = entry ? entry.filter : []
       this.$refs.sideBar.openConnectivitySearch(filter, query)
+    },
+    onConnectivityExplorerClicked: function () {
+      this.connectivityEntry = {...exampleConnectivityInput}
     }
   },
   mounted: async function () {
@@ -364,9 +356,6 @@ export default {
     EventBus.on('datalink-clicked', (payLoad) => {
       console.log('datalink-clicked', payLoad)
     });
-    setTimeout(()=>{
-      this.loadConnectivityKnowledge({ 'provenance': { 'connectivity': { 'knowledge-source': this.sckanVersion } } });
-    }, 2000)
   },
 }
 </script>

package/src/components/ConnectivityCard.vue

@@ -2,32 +2,26 @@
   <div class="connectivity-card-container" ref="container">
     <div class="connectivity-card" ref="card">
       <div class="seperator-path"></div>
-      <div class="card">
-        <div class="title" @click="cardClicked(entry)">{{ entry.label }}</div>
+      <div class="card" @click="cardClicked(entry)">
+        <div class="title">{{ entry.label }}</div>
         <template v-for="field in displayFields" :key="field">
           <div class="details" v-if="entry[field]">
             <strong>{{ field }}:</strong> {{ entry[field] }}
           </div>
         </template>
-        <el-button @click="cardClicked(entry)" size="small" class="button">
-          View connectivity
-        </el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import EventBus from "./EventBus.js";
-
 export default {
+  name: "ConnectivityCard",
   data() {
     return {
-      displayFields: ["label", "id"],
+      displayFields: ["id"],
     };
   },
-  name: "ConnectivityCard",
   props: {
     /**
      * Object containing information for
@@ -40,7 +34,7 @@ export default {
   },
   methods: {
     cardClicked: function (data) {
-      EventBus.emit("connectivity-explorer-clicked", data);
+      this.$emit("connectivity-explorer-clicked", data);
     },
   },
 };
@@ -50,12 +44,13 @@ export default {
 .connectivity-card {
   padding-left: 5px;
   position: relative;
-  min-height: 8.5rem;
+  min-height: 5rem;
 }
 
 .card {
   padding-top: 18px;
   padding-left: 6px;
+  cursor: pointer;
 }
 
 .title {
@@ -63,7 +58,6 @@ export default {
   font-weight: bold;
   line-height: 1.5;
   letter-spacing: 1.05px;
-  cursor: pointer;
 }
 
 .details {
@@ -72,6 +66,7 @@ export default {
 }
 
 .button {
+  margin-right: 3.5rem;
   font-family: Asap;
   font-size: 14px;
   font-weight: normal;

package/src/components/ConnectivityExplorer.vue

@@ -31,6 +31,11 @@
       @loading="filtersLoading"
       @cascaderReady="cascaderReady"
     ></SearchFilters>
+    <SearchHistory
+      ref="searchHistory"
+      localStorageKey="sparc.science-connectivity-search-history"
+      @search="searchHistorySearch"
+    ></SearchHistory>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
         No results found - Please change your search / filter criteria.
@@ -43,9 +48,26 @@
         <ConnectivityCard
           class="dataset-card"
           :entry="result"
+          @connectivity-explorer-clicked="onConnectivityExplorerClicked"
           @mouseenter="hoverChanged(result)"
           @mouseleave="hoverChanged(undefined)"
         />
+        <ConnectivityInfo
+          v-show="
+            Object.keys(connectivityEntry).length > 0 &&
+            result.id === connectivityEntry.featureId[0] &&
+            displayConnectivity
+          "
+          :entry="connectivityEntry"
+          :availableAnatomyFacets="availableAnatomyFacets"
+          :envVars="envVars"
+          @show-connectivity="$emit('show-connectivity', $event)"
+          @show-reference-connectivities="
+            $emit('show-reference-connectivities', $event)
+          "
+          @connectivity-clicked="onConnectivityClicked"
+          @connectivity-hovered="$emit('connectivity-hovered', $event)"
+        />
       </div>
       <el-pagination
         class="pagination"
@@ -71,7 +93,9 @@ import {
   ElPagination as Pagination,
 } from "element-plus";
 import SearchFilters from "./SearchFilters.vue";
+import SearchHistory from "./SearchHistory.vue";
 import ConnectivityCard from "./ConnectivityCard.vue";
+import ConnectivityInfo from "./ConnectivityInfo.vue";
 
 var initial_state = {
   filters: [],
@@ -89,7 +113,9 @@ var initial_state = {
 export default {
   components: {
     SearchFilters,
+    SearchHistory,
     ConnectivityCard,
+    ConnectivityInfo,
     Button,
     Card,
     Icon,
@@ -110,6 +136,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    connectivityEntry: {
+      type: Object,
+      default: {},
+    },
+    availableAnatomyFacets: {
+      type: Object,
+      default: [],
+    },
   },
   data: function () {
     return {
@@ -144,6 +178,7 @@ export default {
         },
       ],
       cascaderIsReady: false,
+      displayConnectivity: false,
     };
   },
   computed: {
@@ -156,10 +191,7 @@ export default {
       };
     },
     paginatedResults: function () {
-      return this.results.slice(
-        this.start,
-        this.start + this.numberPerPage
-      );
+      return this.results.slice(this.start, this.start + this.numberPerPage);
     },
   },
   watch: {
@@ -171,8 +203,48 @@ export default {
     paginatedResults: function () {
       this.loadingCards = false;
     },
+    connectivityEntry: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal.featureId) {
+          if (
+            oldVal &&
+            oldVal.featureId &&
+            newVal.featureId[0] === oldVal.featureId[0]
+          ) {
+            // switch between show and hide when click on the same card
+            this.displayConnectivity = !this.displayConnectivity;
+          } else {
+            // always show when click on different cards
+            this.displayConnectivity = true;
+          }
+        }
+      },
+      deep: true,
+    },
   },
   methods: {
+    onConnectivityClicked: function (data) {
+      this.$refs.searchHistory.selectValue = "Search history";
+      if (data.query.trim()) {
+        this.$refs.searchHistory.addSearchToHistory(
+          data.filter,
+          data.query,
+          data.data
+        );
+      }
+      this.$emit("connectivity-clicked", data);
+    },
+    onConnectivityExplorerClicked: function (data) {
+      if (
+        Object.keys(this.connectivityEntry).length > 0 &&
+        data.id === this.connectivityEntry.featureId[0]
+      ) {
+        this.displayConnectivity = !this.displayConnectivity;
+      } else {
+        // retrieve new entry when different connectivity clicked
+        this.$emit("connectivity-explorer-clicked", data);
+      }
+    },
     hoverChanged: function (data) {
       const payload = data ? { ...data, type: "connectivity" } : data;
       this.$emit("hover-changed", payload);
@@ -251,8 +323,6 @@ export default {
         value: filters,
         type: "filter-update",
       });
-      // The filter currently should work together with query
-      if (this.searchInput === "") this.loadingCards = false;
     },
     /**
      * Transform filters for third level items to perform search
@@ -275,15 +345,24 @@ export default {
       this.searchKnowledge(transformedFilters, this.searchInput);
     },
     searchKnowledge: function (filters, query = "") {
+      this.$refs.searchHistory.selectValue = "Search history";
+      if (this.searchInput.trim()) {
+        this.$refs.searchHistory.addSearchToHistory(
+          this.filters,
+          this.searchInput
+        );
+      }
       this.loadingCards = true;
-      if (query !== "") this.filter = filters;
       this.scrollToTop();
       if (this.searchInput !== this.lastSearch) {
+        this.lastSearch = query;
         this.$emit("search-changed", {
           value: this.searchInput,
           type: "query-update",
         });
-        this.lastSearch = query;
+      } else {
+        // fix forever loading when only filter apply
+        this.loadingCards = false;
       }
     },
     filtersLoading: function (val) {
@@ -307,9 +386,15 @@ export default {
       this.start = 0;
       this.page = 1;
     },
+    searchHistorySearch: function (item) {
+      this.$emit("connectivity-clicked", {
+        data: item.data,
+        filter: item.filters,
+        query: item.search,
+      });
+    },
   },
   mounted: function () {
-    this.mapServer = this.envVars.FLATMAPAPI_LOCATION;
     this.openSearch(this.filter, this.searchInput);
   },
 };

package/src/components/ConnectivityInfo.vue

@@ -109,7 +109,7 @@
             class="connectivity-search-icon" 
             @click="connectivityClicked(entry.featureId[0], 'Origins', origin)"
           >
-            <el-icon-location />
+            <el-icon-search />
           </el-icon>
         </div>
         <el-button
@@ -141,7 +141,7 @@
             class="connectivity-search-icon" 
             @click="connectivityClicked(entry.featureId[0], 'Components', component)"
           >
-            <el-icon-location />
+            <el-icon-search />
           </el-icon>
         </div>
       </div>
@@ -178,7 +178,7 @@
             class="connectivity-search-icon" 
             @click="connectivityClicked(entry.featureId[0], 'Destinations', destination)"
           >
-            <el-icon-location />
+            <el-icon-search />
           </el-icon>
         </div>
         <el-button v-show="hasDestinationsWithDatasets" class="button" @click="openAxons"
@@ -229,7 +229,8 @@
   /* eslint-disable no-alert, no-console */
 import {
   Warning as ElIconWarning,
-  Connection as ElIconLocation,
+  Location as ElIconLocation,
+  Search as ElIconSearch,
 } from '@element-plus/icons-vue'
 import {
   ElButton as Button,
@@ -266,6 +267,7 @@ export default {
     Icon,
     ElIconWarning,
     ElIconLocation,
+    ElIconSearch,
     CopyToClipboard,
     ConnectivityGraph,
     ExternalResourceCard
@@ -307,7 +309,6 @@ export default {
         motor: 'is the location of the initial cell body of the circuit',
         sensory: 'is the location of the initial cell body in the PNS circuit',
       },
-      componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
       connectivityError: null,
       timeoutID: undefined,

package/src/components/SearchHistory.vue

@@ -164,12 +164,22 @@ function generateUUID() {
   return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
 }
 
+const capitalise = function (txt) {
+  return txt.charAt(0).toUpperCase() + txt.slice(1)
+}
+
 export default {
   name: 'SearchHistory',
   components: {
     Tag,
     Select
   },
+  props: {
+    localStorageKey: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       searchHistory: [],
@@ -186,16 +196,14 @@ export default {
   },
   methods: {
     getSearchHistory() {
-      if (localStorage.getItem('sparc.science-sidebar-search-history')) {
-        this.searchHistory = JSON.parse(
-          localStorage.getItem('sparc.science-sidebar-search-history')
-        )
+      if (localStorage.getItem(this.localStorageKey)) {
+        this.searchHistory = JSON.parse(localStorage.getItem(this.localStorageKey))
       } else {
         this.searchHistory = []
       }
     },
     clearSearchHistory() {
-      localStorage.removeItem('sparc.science-sidebar-search-history')
+      localStorage.removeItem(this.localStorageKey)
       this.searchHistory = []
     },
     sortFilters(a, b) {
@@ -219,7 +227,7 @@ export default {
       }
       return filterItem;
     },
-    addSearchToHistory(filters = [], search = '') {
+    addSearchToHistory(filters = [], search = '', data = []) {
       search = search.trim() // remove whitespace
 
       const isExistingItem = this.searchHistory.some((item) => {
@@ -244,10 +252,11 @@ export default {
       });
 
       if (!isExistingItem) {
-        const {label, longLabel} = this.searchHistoryItemLabel(search, filters);
+        const {label, longLabel} = this.searchHistoryItemLabel(search, filters, data);
         const newItem = {
           filters: filters,
           search: search,
+          data: data,
           saved: false,
           label: label,
           longLabel: longLabel,
@@ -263,10 +272,7 @@ export default {
         this.trimSearchHistory();
 
         // Save new data
-        localStorage.setItem(
-          'sparc.science-sidebar-search-history',
-          JSON.stringify(this.searchHistory)
-        );
+        localStorage.setItem(this.localStorageKey, JSON.stringify(this.searchHistory));
       }
     },
     /**
@@ -325,7 +331,7 @@ export default {
         }
 
         if (!item.label) {
-          const {label, longLabel} = this.searchHistoryItemLabel(item.search, item.filters);
+          const {label, longLabel} = this.searchHistoryItemLabel(item.search, item.filters, item.data);
           item['label'] = label;
           item['longLabel'] = longLabel;
         }
@@ -356,28 +362,33 @@ export default {
       this.trimSearchHistory();
 
       // Save updated data
-      localStorage.setItem(
-        'sparc.science-sidebar-search-history',
-        JSON.stringify(this.searchHistory)
-      )
+      localStorage.setItem(this.localStorageKey, JSON.stringify(this.searchHistory))
     },
     search: function (item) {
       this.$emit('search', item)
     },
-    searchHistoryItemLabel: function (search, filters) {
+    searchHistoryItemLabel: function (search, filters, data) {
       let label = search ? `"${search.trim()}"` : '';
       let longLabel = '';
       let filterItems = [];
       let filterLabels = [];
+      let dataLabels = [];
 
       if (filters) {
         filterItems = filters.filter((filterItem) => filterItem.facet !== 'Show all');
         filterLabels = filterItems.map((item) => item.facet2 || item.facet);
+        if (data) {
+          dataLabels = data.map((item) => capitalise(item.label));
+        }
       }
+      
 
       if (label && filterItems.length) {
         longLabel += label;
         longLabel += `, ${filterLabels.join(', ')}`;
+        if (data.length) {
+          longLabel += `(${dataLabels.join(', ')})`;
+        }
         label += ` (+${filterItems.length})`;
       }