@abi-software/map-side-bar 2.7.3-beta.5 → 2.7.3-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.7.3-beta.5",
+  "version": "2.7.3-beta.7",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.5.0-beta.2",
+    "@abi-software/map-utilities": "^1.5.0-beta.3",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityCard.vue

@@ -48,7 +48,7 @@ export default {
     },
     cardClicked: function (data) {
       if (!this.loading) {
-        this.$emit("connectivity-explorer-clicked", data);
+        this.$emit("connectivity-card-clicked", data);
       }
     },
   },

package/src/components/ConnectivityExplorer.vue

@@ -66,7 +66,7 @@
         <ConnectivityCard
           class="dataset-card"
           :entry="result"
-          @connectivity-explorer-clicked="onConnectivityExplorerClicked"
+          @connectivity-card-clicked="onConnectivityExplorerClicked"
         />
         <ConnectivityInfo
           v-if="expanded === result.id"
@@ -80,7 +80,7 @@
           @connectivity-clicked="onConnectivityClicked"
           @connectivity-hovered="$emit('connectivity-hovered', $event)"
           @loaded="onConnectivityInfoLoaded(result)"
-          @close-connectivity="toggleConnectivityOpen(result)"
+          @close-connectivity="closeConnectivity(result)"
         />
       </div>
       <el-pagination
@@ -212,7 +212,10 @@ export default {
     },
   },
   watch: {
-    connectivityKnowledge: function (value) {
+    connectivityKnowledge: function (value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) {
+        return;
+      }
       this.expanded = "";
       this.results = value.map((item) => {
         return {
@@ -239,19 +242,20 @@ export default {
       this.filters = data.filter;
       this.searchAndFilterUpdate();
     },
-    toggleConnectivityOpen: function (data) {
-      if (this.expanded === data.id) {
-        this.expanded = "";
-      } else {
-        this.expanded = data.id;
-      }
+    openConnectivity: function (data) {
+      this.expanded = data.id;
+    },
+    closeConnectivity: function (data) {
+      this.expanded = '';
     },
     onConnectivityExplorerClicked: function (data) {
-      data.loaded = false; // reset loading
-      this.toggleConnectivityOpen(data);
-      const entry = this.connectivityEntry.filter(entry => entry.featureId[0] === data.id);
-      if (entry.length === 0) {
-        this.$emit("connectivity-explorer-clicked", data);
+      if (this.expanded !== data.id) {
+        data.loaded = false; // reset loading
+        this.openConnectivity(data);
+        const entry = this.connectivityEntry.filter(entry => entry.featureId[0] === data.id);
+        if (entry.length === 0) {
+          this.$emit("connectivity-explorer-clicked", data);
+        }
       }
     },
     hoverChanged: function (data) {
@@ -475,7 +479,7 @@ export default {
   }
 
   &.is-active {
-    max-height: 1800px;
+    max-height: 9999px;
     background-color: #f7faff;
     border: 2px solid $app-primary-color;
     border-radius: var(--el-border-radius-base);

package/src/components/ConnectivityInfo.vue

@@ -39,9 +39,7 @@
       <div class="title-content">
         <div class="block" v-if="entry.title">
           <div class="title">
-            <span @click="onConnectivityClicked(entry.title)">
-              {{ capitalise(entry.title) }}
-            </span>
+            <span>{{ capitalise(entry.title) }}</span>
             <template v-if="entry.featuresAlert">
               <el-popover
                 width="250"
@@ -58,6 +56,7 @@
               </el-popover>
             </template>
           </div>
+          <div class="subtitle"><strong>id: </strong>{{ entry.featureId[0] }}</div>
           <div v-if="hasProvenanceTaxonomyLabel" class="subtitle">
             {{ provSpeciesDescription }}
           </div>
@@ -105,10 +104,7 @@
       </div>
     </div>
 
-    <div
-      class="content-container population-display"
-      :class="dualConnectionSource ? 'population-display-toolbar' : ''"
-    >
+    <div class="content-container population-display">
       <div class="block attribute-title-container">
         <span class="attribute-title">Population Display</span>
         <el-popover
@@ -128,27 +124,23 @@
         </el-popover>
       </div>
       <div class="block buttons-row">
-        <div v-if="dualConnectionSource">
-          <span>Connectivity from:</span>
-          <el-radio-group v-model="connectivitySource" @change="onConnectivitySourceChange">
-            <el-radio value="map">Map</el-radio>
-            <el-radio value="sckan">SCKAN</el-radio>
-          </el-radio-group>
-        </div>
-        <div>
-          <el-button
-            :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
-            @click="switchConnectivityView('listView')"
-          >
-            List view
-          </el-button>
-          <el-button
-            :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
-            @click="switchConnectivityView('graphView')"
-          >
-            Graph view
-          </el-button>
-        </div>
+        <span>Connectivity from:</span>
+        <el-radio-group v-model="connectivitySource" @change="onConnectivitySourceChange">
+          <el-radio value="map">Map</el-radio>
+          <el-radio value="sckan">SCKAN</el-radio>
+        </el-radio-group>
+        <el-button
+          :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('listView')"
+        >
+          List view
+        </el-button>
+        <el-button
+          :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('graphView')"
+        >
+          Graph view
+        </el-button>
       </div>
     </div>
 
@@ -180,8 +172,8 @@
           :mapServer="flatmapApi"
           :sckanVersion="sckanVersion"
           :connectivityFromMap="connectivityFromMap"
+          :connectivityError="connectivityError"
           @tap-node="onTapNode"
-          ref="connectivityGraphRef"
         />
       </template>
     </div>
@@ -229,8 +221,6 @@ const capitalise = function (str) {
   return ''
 }
 
-const ERROR_TIMEOUT = 3000; // 3 seconds
-
 export default {
   name: 'ConnectivityInfo',
   components: {
@@ -272,11 +262,9 @@ export default {
       entryIndex: 0,
       updatedCopyContent: '',
       activeView: 'listView',
-      timeoutID: undefined,
       connectivityLoading: false,
-      dualConnectionSource: false,
       connectivitySource: 'sckan',
-      connectivityError: null,
+      connectivityError: {},
       graphViewLoaded: false,
       connectivityFromMap: null,
     };
@@ -355,16 +343,19 @@ export default {
       handler: function (newVal, oldVal) {
         if (newVal !== oldVal) {
           this.connectivityLoading = true;
-          this.activeView = localStorage.getItem('connectivity-active-view') || this.activeView;
+          this.activeView =
+            localStorage.getItem('connectivity-active-view') ||
+            this.activeView;
           if (this.activeView === 'graphView') {
             this.graphViewLoaded = true;
           }
-
-          this.checkAndUpdateDualConnection();
           this.connectivitySource = this.entry.connectivitySource;
           this.updateGraphConnectivity();
           this.connectivityLoading = false;
-          this.$emit('loaded');
+          // only emit to scroll when entire entry content changes
+          if (!oldVal || newVal?.featureId[0] !== oldVal?.featureId[0]) {
+            this.$emit('loaded');
+          }
         }
       },
     },
@@ -546,31 +537,9 @@ export default {
       this.$emit('connectivity-hovered', payload);
     },
     onConnectivityClicked: function (label) {
-      const payload = {
-        query: label,
-        filter: []
-      };
+      const payload = { query: label, filter: [] };
       this.$emit('connectivity-clicked', payload);
     },
-    getErrorConnectivities: function (errorData) {
-      const errorDataToEmit = [...new Set(errorData)];
-      let errorConnectivities = '';
-
-      errorDataToEmit.forEach((connectivity, i) => {
-        const { label } = connectivity;
-        errorConnectivities += (i === 0) ? capitalise(label) : label;
-
-        if (errorDataToEmit.length > 1) {
-          if ((i + 2) === errorDataToEmit.length) {
-            errorConnectivities += ' and ';
-          } else if ((i + 1) < errorDataToEmit.length) {
-            errorConnectivities += ', ';
-          }
-        }
-      });
-
-      return errorConnectivities;
-    },
     /**
      * Function to show error message.
      * `errorInfo` includes `errorData` array (optional) for error connectivities
@@ -579,33 +548,16 @@ export default {
      */
     getConnectivityError: function (errorInfo) {
       const { errorData, errorMessage } = errorInfo;
-      const errorConnectivities = this.getErrorConnectivities(errorData);
+      const errorConnectivities = errorData
+        .map((connectivity) => capitalise(connectivity.label))
+        .join(', ')
+        .replace(/, ([^,]*)$/, ' and $1');
 
       return {
         errorConnectivities,
         errorMessage,
       };
     },
-    pushConnectivityError: function (errorInfo) {
-      const connectivityError = this.getConnectivityError(errorInfo);
-      const connectivityGraphRef = this.$refs.connectivityGraphRef;
-
-      // error for graph view
-      if (connectivityGraphRef) {
-        connectivityGraphRef.showErrorMessage(connectivityError);
-      }
-
-      // error for list view
-      this.connectivityError = {...connectivityError};
-
-      if (this.timeoutID) {
-        clearTimeout(this.timeoutID);
-      }
-
-      this.timeoutID = setTimeout(() => {
-        this.connectivityError = null;
-      }, ERROR_TIMEOUT);
-    },
     onConnectivitySourceChange: function (connectivitySource) {
       const { featureId } = this.entry;
 
@@ -615,7 +567,6 @@ export default {
         this.graphViewLoaded = false;
       }
 
-      this.checkAndUpdateDualConnection();
       this.updateGraphConnectivity();
 
       EventBus.emit('connectivity-source-change', {
@@ -626,7 +577,11 @@ export default {
     updateGraphConnectivity: function () {
       if (this.connectivitySource === "map") {
         this.getConnectionsFromMap().then((response) => {
-          this.connectivityFromMap = response;
+          // show sckan source graph if map source not exist
+          this.connectivityFromMap = null;
+          if (response?.connectivity?.length) {
+            this.connectivityFromMap = response;
+          }
           this.connectivityLoading = false;
         });
       } else {
@@ -658,22 +613,13 @@ export default {
     closeConnectivity: function () {
       this.$emit('close-connectivity');
     },
-    checkAndUpdateDualConnection: async function () {
-      const response = await this.getConnectionsFromMap()
-
-      if (response?.connectivity?.length) {
-        this.dualConnectionSource = true;
-      } else {
-        this.dualConnectionSource = false;
-        this.connectivitySource = 'sckan';
-      }
-    },
   },
   mounted: function () {
     this.updatedCopyContent = this.getUpdateCopyContent();
 
-    EventBus.on('connectivity-graph-error', (errorInfo) => {
-      this.pushConnectivityError(errorInfo);
+    EventBus.on('connectivity-error', (errorInfo) => {
+      const connectivityError = this.getConnectivityError(errorInfo);
+      this.connectivityError = { ...connectivityError };
     });
   },
 }
@@ -706,17 +652,11 @@ export default {
 
 .title {
   text-align: left;
-  // width: 16em;
   line-height: 1.3em !important;
   font-size: 18px;
-  // font-family: Helvetica;
   font-weight: bold;
   padding-bottom: 8px;
   color: $app-primary-color;
-
-  span:hover {
-    cursor: pointer;
-  }
 }
 
 .block + .block {
@@ -895,17 +835,15 @@ export default {
   border-bottom: 1px solid $app-primary-color;
   padding-bottom: 0.5rem !important;
 
-  &.population-display-toolbar {
-    flex-direction: column !important;
-    align-items: start;
+  flex-direction: column !important;
+  align-items: start;
 
-    .buttons-row {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
+  .buttons-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
   }
 
   .el-radio {

package/src/components/SideBar.vue

@@ -308,8 +308,8 @@ export default {
      * To receive error message for connectivity graph
      * @param {String} errorMessage
      */
-    updateConnectivityGraphError: function (errorInfo) {
-      EventBus.emit('connectivity-graph-error', errorInfo);
+    updateConnectivityError: function (errorInfo) {
+      EventBus.emit('connectivity-error', errorInfo);
     },
     /**
      * Store available anatomy facets data for connectivity list component

package/vite.config.js

@@ -38,11 +38,12 @@ export default defineConfig({
             fileName: 'map-side-bar',
         },
         rollupOptions: {
-            external: ["vue", "@abi-software/map-utilities"],
+            external: ["vue", "@abi-software/map-utilities", "@element-plus/icons-vue"],
             output: {
               globals: {
                 vue: "Vue",
-                "@abi-software/map-utilities": "@abi-software/map-utilities"
+                "@abi-software/map-utilities": "@abi-software/map-utilities",
+                "@element-plus/icons-vue": "@element-plus/icons-vue"
               },
             },
         },

package/src/services/flatmapKnowledge.js

@@ -1,94 +0,0 @@
-async function getReferenceConnectivitiesFromStorage(resource) {
-  const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
-
-  if (flatmapKnowledgeRaw) {
-    const flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
-    const dataWithRefs = flatmapKnowledge.filter((x) => x.references && x.references.length);
-    const foundData = dataWithRefs.filter((x) => x.references.includes(resource));
-
-    if (foundData.length) {
-      const featureIds = foundData.map((x) => x.id);
-      return featureIds;
-    }
-  }
-  return [];
-}
-
-async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries) {
-  const knowledgeSource = getKnowledgeSource(mapImp);
-  const sql = `select knowledge from knowledge
-    where source="${knowledgeSource}" and
-    knowledge like "%${resource}%" order by source desc`;
-  console.log(sql)
-  const response = await flatmapQueries.flatmapQuery(sql);
-  const mappedData = response.values.map((x) => x[0]);
-  const parsedData = mappedData.map((x) => JSON.parse(x));
-  const featureIds = parsedData.map((x) => x.id);
-  return featureIds;
-}
-
-function getKnowledgeSource(mapImp) {
-  let mapKnowledgeSource = '';
-  if (mapImp.provenance?.connectivity) {
-    const sckanProvenance = mapImp.provenance.connectivity;
-    if ('knowledge-source' in sckanProvenance) {
-      mapKnowledgeSource = sckanProvenance['knowledge-source'];
-    } else if ('npo' in sckanProvenance) {
-      mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
-    }
-  }
-
-  return mapKnowledgeSource;
-}
-
-function loadAndStoreKnowledge(mapImp, flatmapQueries) {
-  const knowledgeSource = getKnowledgeSource(mapImp);
-  const sql = `select knowledge from knowledge
-    where source="${knowledgeSource}"
-    order by source desc`;
-  const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
-
-  if (!flatmapKnowledge) {
-    flatmapQueries.flatmapQuery(sql).then((response) => {
-      const mappedData = response.values.map(x => x[0]);
-      const parsedData = mappedData.map(x => JSON.parse(x));
-      sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
-      updateFlatmapKnowledgeCache();
-    });
-  }
-}
-
-function updateFlatmapKnowledgeCache() {
-  const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
-  const now = new Date();
-  const expiry = now.getTime() + CACHE_LIFETIME;
-
-  sessionStorage.setItem('flatmap-knowledge-expiry', expiry);
-}
-
-function removeFlatmapKnowledgeCache() {
-  const keys = [
-    'flatmap-knowledge',
-    'flatmap-knowledge-expiry',
-  ];
-  keys.forEach((key) => {
-    sessionStorage.removeItem(key);
-  });
-}
-
-function refreshFlatmapKnowledgeCache() {
-  const expiry = sessionStorage.getItem('flatmap-knowledge-expiry');
-  const now = new Date();
-
-  if (now.getTime() > expiry) {
-    removeFlatmapKnowledgeCache();
-  }
-}
-
-export {
-  getReferenceConnectivitiesFromStorage,
-  getReferenceConnectivitiesByAPI,
-  loadAndStoreKnowledge,
-  getKnowledgeSource,
-  refreshFlatmapKnowledgeCache,
-}