@abi-software/map-side-bar 2.8.3-beta.7 → 2.9.1-beta.0

package/package.json

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

package/src/components/ConnectivityExplorer.vue

@@ -21,7 +21,7 @@
         <el-button
           link
           class="el-button-link"
-          @click="openSearch([], '')"
+          @click="onResetClick"
           size="large"
         >
           Reset
@@ -224,10 +224,17 @@ export default {
     // watch for connectivityEntry changes
     // card should be expanded if there is only one entry and it is ready
     connectivityEntry: function (newVal, oldVal) {
-      if (newVal.length === 1 && newVal[0].ready) {
-        // if the changed property is connectivity source, do not collapse
+      if (
+        JSON.stringify(newVal) !== JSON.stringify(oldVal) &&
+        newVal.length === 1 && newVal[0].ready
+      ) {
+        // if the changed property is connectivity source,
+        // or two different maps in split view, do not collapse
         if (
-          (newVal[0].connectivitySource !== oldVal[0].connectivitySource) &&
+          (
+            newVal[0].connectivitySource !== oldVal[0].connectivitySource ||
+            newVal[0].mapId !== oldVal[0].mapId
+          ) &&
           oldVal[0].ready
         ) {
           return;
@@ -323,6 +330,10 @@ export default {
         this.openSearch([], '');
       }
     },
+    onResetClick: function () {
+      this.openSearch([], '');
+      this.$emit('connectivity-explorer-reset');
+    },
     openSearch: function (filter, search = "") {
       this.searchInput = search;
       this.resetPageNavigation();
@@ -527,6 +538,7 @@ export default {
   width: 298px !important;
   height: 40px;
   padding-right: 14px;
+  font-family: inherit;
 
   :deep(.el-input__inner) {
     font-family: inherit;

package/src/components/ConnectivityInfo.vue

@@ -277,7 +277,7 @@ export default {
       return this.entry.destinationsWithDatasets;
     },
     resources: function () {
-      return this.entry.hyperlinks;
+      return this.entry.hyperlinks || [];
     },
     sckanVersion: function () {
       return this.entry.knowledgeSource;
@@ -528,17 +528,17 @@ export default {
       }
     },
     getConnectionsFromMap: async function () {
-      if (this.entry.mapuuid) {        
+      if (this.entry.mapuuid) {
         const url =
           this.flatmapApi +
           `flatmap/${this.entry.mapuuid}/connectivity/${this.entry.featureId[0]}`;
-  
+
         try {
           const response = await fetch(url);
           if (!response.ok) {
             throw new Error(`Response status: ${response.status}`);
           }
-  
+
           return await response.json();
         } catch (error) {
           throw new Error(error);

package/src/components/SearchFilters.vue

@@ -63,16 +63,32 @@
             popper-class="sidebar-cascader-popper"
           >
             <template #default="{ node, data }">
-              <el-row>
-                <el-col :span="4" v-if="hasLineStyles(data)">
-                  <div class="path-visual" :style="getLineStyles(data)"></div>
-                </el-col>
-                <el-col :span="20">
-                  <div :style="getBackgroundStyles(data)">
-                    {{ data.label }}
+              <div v-if="isFlatmapConnectionsFilterNode(node)">
+                <div class="el-input">
+                  <div class="el-input__wrapper">
+                    <input
+                      class="el-input__inner"
+                      :value="searchInputs[node.value]"
+                      @input="searchInputChange($event, node)"
+                      style="width: 100%"
+                      autocomplete="off"
+                      placeholder="Search"
+                    />
                   </div>
-                </el-col>
-              </el-row>
+                </div>
+              </div>
+              <div v-else>
+                <el-row>
+                  <el-col :span="4" v-if="hasLineStyles(data)">
+                    <div class="path-visual" :style="getLineStyles(data)"></div>
+                  </el-col>
+                  <el-col :span="20">
+                    <div :style="getBackgroundStyles(data)">
+                      {{ data.label }}
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
             </template>
           </el-cascader>
           <div v-if="showFiltersText" class="filter-default-value">Filters</div>
@@ -199,6 +215,7 @@ export default {
         },
       ],
       presentTags:[],
+      searchInputs: {},
     }
   },
   setup() {
@@ -254,6 +271,14 @@ export default {
         )
       return value
     },
+    isFlatmapConnectionsFilterNode: function (node) {
+      return (
+        node.pathValues[0].includes('flatmap.connectivity.source') &&
+        node.pathLabels.includes('Filters') &&
+        node.isDisabled &&
+        node.isLeaf
+      )
+    },
     processOptions: function () {
       // create top level of options in cascader
       this.options.forEach((facet, i) => {
@@ -273,6 +298,14 @@ export default {
           })
         }
 
+        if (facet.key.includes('flatmap.connectivity.source')) {
+          this.options[i].children.unshift({
+            value: this.createCascaderItemValue('ConnectivityFilters'),
+            label: 'Filters',
+            disabled: true,
+          });
+        }
+
         // populate second level of options
         this.options[i].children.forEach((facetItem, j) => {
           // Format labels except funding program
@@ -649,6 +682,24 @@ export default {
       this.__expandItem__ = event
       this.cssMods()
     },
+    searchInputChange: function (event, node) {
+      event.preventDefault();
+      const { target } = event;
+      if (target) {
+        const value = target.value;
+        const ul = target.closest('.el-cascader-menu__list');
+        ul.querySelectorAll('.el-cascader-node').forEach((li, index) => {
+          if (index > 0) {
+            const content = li.querySelector('.el-cascader-node__label').textContent;
+            if (content.toLowerCase().includes(value.toLowerCase())) {
+              li.classList.remove('hide');
+            } else {
+              li.classList.add('hide');
+            }
+          }
+        })
+      }
+    },
     numberShownChanged: function (event) {
       this.$emit('numberPerPage', parseInt(event))
     },
@@ -1093,6 +1144,36 @@ export default {
   border-color: $app-primary-color;
 }
 
+.sidebar-cascader-popper .el-cascader-menu:last-child .el-cascader-node {
+  &.is-disabled {
+    border-bottom: 1px solid #e4e7ed;
+    padding-bottom: 0.5rem;
+    position: sticky;
+    top: 0.5rem;
+    background-color: white;
+    z-index: 20;
+    box-shadow: 0px -6px 0px 6px white;
+
+    .el-checkbox.is-disabled {
+      display: none;
+    }
+
+    .el-cascader-node__label {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    // hide show all for connection filters
+    + .el-cascader-node {
+      display: none;
+    }
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
 .filter-help-popover,
 .cascade-tags-popover {
   font-family: 'Asap', sans-serif;

package/src/components/SideBar.vue

@@ -54,6 +54,7 @@
                 @filter-visibility="$emit('filter-visibility', $event)"
                 @search-changed="searchChanged(tab.id, $event)"
                 @hover-changed="hoverChanged(tab.id, $event)"
+                @connectivity-explorer-reset="onConnectivityExplorerReset"
                 @show-connectivity="showConnectivity"
                 @show-reference-connectivities="onShowReferenceConnectivities"
                 @connectivity-hovered="onConnectivityHovered"
@@ -210,6 +211,12 @@ export default {
         this.activeAnnotationData = data;
       }
     },
+    /**
+     * This event is emitted after clicking reset button in connectivity explorer
+     */
+    onConnectivityExplorerReset: function () {
+      this.$emit('connectivity-explorer-reset');
+    },
     /**
      * This event is emitted when the show connectivity button is clicked.
      * @arg featureIds