@abi-software/flatmapvuer 1.10.3-beta.9 → 1.11.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.10.3-beta.9",
+  "version": "1.11.0-beta.1",
   "license": "Apache-2.0",
   "files": [
     "dist/*",

package/src/components/FlatmapVuer.vue

@@ -643,9 +643,6 @@ import {
   refreshFlatmapKnowledgeCache,
   getKnowledgeSource,
   getReferenceConnectivitiesByAPI,
-  filterPathsByOriginFromKnowledge,
-  filterPathsByDestinationFromKnowledge,
-  filterPathsByViaFromKnowledge,
 } from '../services/flatmapKnowledge.js'
 import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
@@ -655,14 +652,10 @@ import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
 import {
-  queryPathsByOrigin,
-  queryPathsByViaLocation,
-  queryPathsByDestination,
   extractOriginItems,
   extractDestinationItems,
   extractViaItems,
   fetchLabels,
-  queryAllConnectedPaths,
   DrawToolbar,
   Tooltip,
   TreeControls
@@ -765,6 +758,11 @@ export default {
     return { annotator }
   },
   methods: {
+    enableFeatureResetOnClick: function (enable) {
+      if (this.mapImp) {
+        this.mapImp.enableFeatureResetOnClick(enable)
+      }
+    },
     /**
      *
      * @param filter format should follow #makeStyleFilter (flatmap-viewer)
@@ -828,7 +826,7 @@ export default {
             ? this.mapImp.featureProperties(numericId)
             : { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
           let payload = { feature: featureObject }
-          this.checkAndCreatePopups([payload])
+          this.checkAndCreatePopups([payload], false)
         } else {
           this.closeTooltip()
         }
@@ -840,7 +838,7 @@ export default {
      */
     confirmDrawnFeature: function () {
       if (this.isValidDrawnCreated) {
-        this.checkAndCreatePopups([this.drawnCreatedEvent])
+        this.checkAndCreatePopups([this.drawnCreatedEvent], false)
         // Add connection if exist to annotationEntry
         // Connection will only be added in creating new drawn feature annotation
         // And will not be updated if move drawn features
@@ -1338,12 +1336,6 @@ export default {
      * @arg {string} `pathId` or `anatomicalId`
      */
     retrieveConnectedPaths: async function (payload, options = {}) {
-      // query all connected paths CQ
-      if (this.viewingMode === 'Neuron Connection' && this.connectionType.toLowerCase() === 'all') {
-        const sourceId = this.mapImp.uuid;
-        const connectedPaths = await queryAllConnectedPaths(this.flatmapAPI, sourceId, payload);
-        return connectedPaths;
-      }
       // query all connected paths from flatmap
       if (this.mapImp) {
         let connectedPaths = [];
@@ -1517,7 +1509,7 @@ export default {
      * @arg {String} `models`
      */
     ftuSelected: function (models) {
-      this.searchAndShowResult(models, true)
+      this.searchAndShowResult(models, true, true)
     },
     /**
      * @public
@@ -2022,7 +2014,7 @@ export default {
      * _checkNeuronClicked shows a neuron path pop up if a path was recently clicked._
      * @arg {Object} `data`
      */
-    checkAndCreatePopups: async function (data, connectivityExplorerClicked) {
+    checkAndCreatePopups: async function (data, mapclick = true) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
         const features = data.filter(d => d.feature).map(d => d.feature)
@@ -2072,7 +2064,7 @@ export default {
       }
       // clicking on a connectivity explorer card will be the same as exploration mode
       // the card should be opened without doing other functions
-      else if (this.viewingMode === 'Neuron Connection' && !connectivityExplorerClicked) {
+      else if (this.viewingMode === 'Neuron Connection' && mapclick) {
         const resources = data.map(tooltip => tooltip.resource[0]);
 
         // filter out paths
@@ -2087,11 +2079,16 @@ export default {
           const featureId = data[0].feature?.featureId;
           const annotation = this.mapImp.annotations.get(featureId);
           const anatomicalNodes = annotation?.['anatomical-nodes'];
+          const annotationModels = annotation?.['models'];
           let anatomicalNode;
           let uniqueResource = transformResources;
           const models = annotation?.['models'];
           if (anatomicalNodes?.length) {
-            anatomicalNode = anatomicalNodes[anatomicalNodes.length - 1];
+            // get the node which match the feature in a location
+            // [feature, location]
+            anatomicalNode = anatomicalNodes.find((node) =>
+              JSON.parse(node)[0] === annotationModels
+            );
           }
           if (anatomicalNode) {
             uniqueResource = JSON.parse(anatomicalNode);
@@ -2134,18 +2131,10 @@ export default {
             this.connectivityFilters.push(newConnectivityfilter);
           }
 
-          if (this.connectionType.toLowerCase() === 'all') {
-            const searchTerms = uniqueTerms.join();
-            this.$emit('neuron-connection-feature-click', {
-              filters: [],
-              search: searchTerms,
-            });
-          } else {
-            this.$emit('neuron-connection-feature-click', {
-              filters: this.connectivityFilters,
-              search: '',
-            });
-          }
+          this.$emit('neuron-connection-feature-click', {
+            filters: this.connectivityFilters,
+            search: '',
+          });
         } else {
           // clicking on paths
           // do nothing for origin, destination, via
@@ -2728,7 +2717,7 @@ export default {
         if (state.background) this.backgroundChangeCallback(state.background)
         if (state.searchTerm) {
           const searchTerm = state.searchTerm
-          this.searchAndShowResult(searchTerm, true)
+          this.searchAndShowResult(searchTerm, true, true)
         }
         this.setVisibilityState(state)
       }
@@ -2975,7 +2964,7 @@ export default {
           const id = knowledge.id;
           if (id) {
             const mapKnowledgeObj = mapKnowledge[id];
-            if (mapKnowledgeObj) {
+            if (mapKnowledgeObj && mapKnowledgeObj.connectivity && mapKnowledgeObj['node-phenotypes']) {
               const mapConnectivity = mapKnowledgeObj.connectivity;
               const mapNodePhenotypes = mapKnowledgeObj['node-phenotypes'];
               // take only map connectivity
@@ -3005,7 +2994,7 @@ export default {
           };
         }
 
-        for (const facet of ["origin", "via", "destination"]) {
+        for (const facet of ["origin", "via", "destination", "all"]) {
           let childrenList = []
           if (facet === 'origin') {
             childrenList = originItems.map((item) => transformItem(facet, item));
@@ -3013,6 +3002,20 @@ export default {
             childrenList = viaItems.map((item) => transformItem(facet, item));
           } else if (facet === 'destination') {
             childrenList = destinationItems.map((item) => transformItem(facet, item));
+          } else {
+            // All is the combination of origin, via, destination
+            const allList = [
+              ...originItems.map((item) => transformItem(facet, item)),
+              ...viaItems.map((item) => transformItem(facet, item)),
+              ...destinationItems.map((item) => transformItem(facet, item))
+            ];
+            // Generate unique list since the same feature can be in origin, via, and destination
+            const seenKeys = new Set();
+            childrenList = allList.filter(item => {
+              if (seenKeys.has(item.key)) return false;
+              seenKeys.add(item.key);
+              return true;
+            });
           }
 
           // Those without label but key should be below
@@ -3027,14 +3030,18 @@ export default {
             return a.label.localeCompare(b.label);
           });
 
-          connectionFilters.push({
-            key: `flatmap.connectivity.source.${facet}`,
-            label: facet,
-            children: childrenList,
-          })
+          if (childrenList.length) {
+            connectionFilters.push({
+              key: `flatmap.connectivity.source.${facet}`,
+              label: facet,
+              children: childrenList,
+            })
+          }
         }
 
-        filterOptions.push(...connectionFilters)
+        if (connectionFilters.length) {
+          filterOptions.push(...connectionFilters)
+        }
       }
       return filterOptions;
     },
@@ -3113,8 +3120,9 @@ export default {
      * with the option to display the label/connectivity information using displayInfo flag.
      * @arg {String} `term`,
      * @arg {String} `displayInfo`
+     * @arg {String} `mapclick` Similate the event as it is triggered by an user click
      */
-    searchAndShowResult: function (term, displayInfo, connectivityExplorerClicked) {
+    searchAndShowResult: function (term, displayInfo, mapclick = true) {
       if (this.mapImp) {
         if (term === undefined || term === '') {
           this.mapImp.clearSearchResults()
@@ -3146,7 +3154,7 @@ export default {
                   alert: feature.alert,
                 }
                 // Show popup for all modes
-                this.checkAndCreatePopups([data], connectivityExplorerClicked)
+                this.checkAndCreatePopups([data], mapclick)
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
                   positionAtLastClick: false,

package/src/components/legends/DynamicLegends.vue

@@ -6,12 +6,7 @@
       :key="item[identifierKey]"
       :label="item[identifierKey]"
     >
-      <div
-        v-if="legendStyle(item) === 'yellow-star'"
-        :class="legendStyle(item)"
-        v-html="showStarInLegend ? yellowstar : ''"
-      ></div>
-      <div v-else class="legend-item">
+      <div class="legend-item" v-if="legendStyle(item)">
         <div
           :class="legendStyle(item)"
           :style="{ 'background-color': item[colourKey] }"
@@ -23,7 +18,6 @@
 </template>
 
 <script>
-import yellowstar from "../../icons/yellowstar";
 /* eslint-disable no-alert, no-console */
 export default {
   name: "DynamicLegends",
@@ -55,11 +49,6 @@ export default {
       default: false,
     },
   },
-  data: function () {
-    return {
-      yellowstar: yellowstar,
-    };
-  },
   methods: {
     capitalise: function (label) {
       return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
@@ -67,6 +56,9 @@ export default {
     legendStyle: function (item) {
       if (item[this.styleKey] === "star") {
         if (item[this.identifierKey] === "Featured dataset marker") {
+          if (!this.showStarInLegend) {
+            return;
+          }
           return "yellow-star";
         } else if (item[this.identifierKey] === "Gaglionated nerve plexus") {
           return "hexagon-star";
@@ -101,20 +93,31 @@ export default {
   display: inline-block;
 }
 
-// hexagon
 .hexagon-star {
-  width: 21px;
+  width: 20px;
   height: 25px;
   background-color: #ffffff;
   opacity: 0.64;
   clip-path: path(
-    "M10.48 0.76 c-2.12 3.72 -6.12 6.04 -10.44 6.04 l-0.16 0.24 c2.04 3.6 2.04 8 0 11.6 l0.16 0.24 c4.28 0 8.32 2.32 10.44 6.04 c2.12 -3.72 6.12 -6.04 10.44 -6.04 c-2.12 -3.72 -2.12 -8.36 0 -12.16 C16.64 6.84 12.68 4.52 10.48 0.76z"
+    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
   );
   -webkit-clip-path: path(
-    "M10.48 0.76 c-2.12 3.72 -6.12 6.04 -10.44 6.04 l-0.16 0.24 c2.04 3.6 2.04 8 0 11.6 l0.16 0.24 c4.28 0 8.32 2.32 10.44 6.04 c2.12 -3.72 6.12 -6.04 10.44 -6.04 c-2.12 -3.72 -2.12 -8.36 0 -12.16 C16.64 6.84 12.68 4.52 10.48 0.76z"
+    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
   );
 }
 
+.yellow-star {
+  width: 25px;
+  height: 25px;
+  background-color: #ffffff !important;
+  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22yellow%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20d%3D%22M11.0748%203.25583C11.4141%202.42845%2012.5859%202.42845%2012.9252%203.25583L14.6493%207.45955C14.793%207.80979%2015.1221%208.04889%2015.4995%208.07727L20.0303%208.41798C20.922%208.48504%2021.2841%209.59942%2020.6021%2010.1778L17.1369%2013.1166C16.8482%2013.3614%2016.7225%2013.7483%2016.8122%2014.1161L17.8882%2018.5304C18.1%2019.3992%2017.152%2020.0879%2016.3912%2019.618L12.5255%2017.2305C12.2034%2017.0316%2011.7966%2017.0316%2011.4745%2017.2305L7.60881%2019.618C6.84796%2020.0879%205.90001%2019.3992%206.1118%2018.5304L7.18785%2014.1161C7.2775%2013.7483%207.1518%2013.3614%206.86309%2013.1166L3.3979%2010.1778C2.71588%209.59942%203.07796%208.48504%203.96971%208.41798L8.50046%208.07727C8.87794%208.04889%209.20704%207.80979%209.35068%207.45955L11.0748%203.25583Z%22/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+  margin: -3px;
+  padding-right: 2px;
+}
+
 .label {
   margin-left: 14px;
   font-size: 12px;

package/src/services/flatmapKnowledge.js

@@ -25,9 +25,8 @@ async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries)
   const sql = `select knowledge from knowledge
     where source="${knowledgeSource}" and
     knowledge like "%${resource}%" order by source desc`;
-  const response = await flatmapQueries.flatmapQuery(sql);
-  const mappedData = response.values.map((x) => x[0]);
-  const parsedData = mappedData.map((x) => JSON.parse(x));
+  const response = await flatmapQueries.queryKnowledge(sql);
+  const parsedData = response.map((x) => JSON.parse(x));
   const featureIds = parsedData.map((x) => x.id);
   return featureIds;
 }
@@ -97,9 +96,8 @@ async function loadAndStoreKnowledge(mapImp, flatmapQueries) {
   const flatmapKnowledgeSource = sessionStorage.getItem('flatmap-knowledge-source');
 
   if (!flatmapKnowledge || flatmapKnowledgeSource !== knowledgeSource) {
-    const response = await flatmapQueries.flatmapQuery(sql);
-    const mappedData = response.values.map(x => x[0]);
-    const parsedData = mappedData.map(x => JSON.parse(x));
+    const response = await flatmapQueries.queryKnowledge(sql);
+    const parsedData = response.map(x => JSON.parse(x));
 
     sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
     sessionStorage.setItem('flatmap-knowledge-source', knowledgeSource);

package/src/services/flatmapQueries.js

@@ -104,6 +104,7 @@ let FlatmapQueries = function () {
     this.uberons = []
     this.lookUp = []
     this.connectivitySource = 'map' // 'sckan'
+    this.noMapConnectivity = false
   }
 
   this.createTooltipData = async function (mapImp, eventData) {
@@ -144,7 +145,8 @@ let FlatmapQueries = function () {
       hyperlinks: hyperlinks,
       provenanceTaxonomy: eventData.provenanceTaxonomy,
       provenanceTaxonomyLabel: taxonomyLabel,
-      connectivitySource: this.connectivitySource
+      connectivitySource: this.connectivitySource,
+      noMapConnectivity: this.noMapConnectivity,
     }
     return tooltipData
   }
@@ -158,7 +160,8 @@ let FlatmapQueries = function () {
       componentsWithDatasets: this.componentsWithDatasets,
       destinations: this.destinations,
       destinationsWithDatasets: this.destinationsWithDatasets,
-      connectivitySource: this.connectivitySource
+      connectivitySource: this.connectivitySource,
+      noMapConnectivity: this.noMapConnectivity,
     };
   }
 
@@ -300,6 +303,9 @@ let FlatmapQueries = function () {
       queryAPI
         .then((response) => {
           if (this.checkConnectivityExists(response)) {
+            if (connectivitySource === 'map') {
+              this.noMapConnectivity = false;
+            }
             let connectivity = response;
             if (processConnectivity) {
               this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
@@ -312,6 +318,32 @@ let FlatmapQueries = function () {
               })
             }
             else resolve(connectivity)
+          } else if (connectivitySource === 'map') {
+            // switch to SCKAN
+            // when there has no connectivity data from Map
+            // and add the noMapConnectivity flag to disable the option
+            this.connectivitySource = 'sckan';
+            this.noMapConnectivity = true;
+            mapImp.queryKnowledge(keastId)
+              .then((fallbackResponse) => {
+                if (this.checkConnectivityExists(fallbackResponse)) {
+                  let connectivity = fallbackResponse;
+                  if (processConnectivity) {
+                    this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
+                      // response.references is publication urls
+                      if (fallbackResponse.references) {
+                        // with publications from both PubMed and Others
+                        this.rawURLs = [...fallbackResponse.references];
+                      }
+                      resolve(processedConnectivity)
+                    })
+                  }
+                  else resolve(connectivity)
+                } else {
+                  resolve(false)
+                }
+              })
+              .catch(() => resolve(false));
           } else {
             resolve(false)
           }
@@ -536,19 +568,24 @@ let FlatmapQueries = function () {
     return `select distinct publication from publications where entity = '${model}'`
   }
 
-  this.flatmapQuery = function (sql) {
-    const data = { sql: sql }
-    return fetch(`${this.flatmapAPI}knowledge/query/`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
+  this.queryKnowledge = async (sql, params) => {
+    const url = `${this.flatmapAPI}/knowledge/query/`;
+    const query = { sql, params };
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            "Accept": "application/json"
+        },
+        body: JSON.stringify(query),
     })
-      .then((response) => response.json())
-      .catch((error) => {
-        console.error('Error:', error)
-      })
+    if (!response.ok) {
+        throw new Error(`Cannot access ${url}`);
+    }
+    const data = await response.json();
+    if ('error' in data) {
+        throw new TypeError(data.error);
+    }
+    return data.values
   }
 }