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

package/package.json

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

package/src/components/ConnectivityExplorer.vue

@@ -5,7 +5,7 @@
     @mouseleave="hoverChanged(undefined)"
   >
     <template #header>
-      <div class="header">
+      <div class="header" @mouseleave="hoverChanged(undefined)">
         <el-input
           class="search-input"
           placeholder="Search"
@@ -30,6 +30,10 @@
         >
           Reset
         </el-button>
+        <el-radio-group v-model="filterVisibility">
+          <el-radio :value="true">Focused</el-radio>
+          <el-radio :value="false">Contextual</el-radio>
+        </el-radio-group>
       </div>
     </template>
     <SearchFilters
@@ -78,8 +82,8 @@
           :availableAnatomyFacets="availableAnatomyFacets"
           :envVars="envVars"
           :withCloseButton="true"
-          @show-connectivity="$emit('show-connectivity', $event)"
-          @show-reference-connectivities="$emit('show-reference-connectivities', $event)"
+          @show-connectivity="onShowConnectivity"
+          @show-reference-connectivities="onShowReferenceConnectivities"
           @connectivity-clicked="onConnectivityClicked"
           @connectivity-hovered="$emit('connectivity-hovered', $event)"
           @loaded="onConnectivityInfoLoaded(result)"
@@ -109,14 +113,12 @@ import {
   ElInput as Input,
   ElPagination as Pagination,
 } from "element-plus";
-import EventBus from './EventBus.js'
 import SearchFilters from "./SearchFilters.vue";
 import SearchHistory from "./SearchHistory.vue";
 import ConnectivityCard from "./ConnectivityCard.vue";
 import ConnectivityInfo from "./ConnectivityInfo.vue";
 
 var initial_state = {
-  filters: [],
   searchInput: "",
   lastSearch: "",
   results: [],
@@ -162,6 +164,10 @@ export default {
       type: Object,
       default: [],
     },
+    connectivityFilterOptions: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
@@ -171,34 +177,12 @@ export default {
         "flex-flow": "column",
         display: "flex",
       },
-      filterOptions: [
-        {
-          id: 3,
-          key: "flatmap.connectivity.source",
-          label: "Connectivity",
-          children: [
-            {
-              facetPropPath: "flatmap.connectivity.source",
-              id: 0,
-              label: "Origins",
-            },
-            {
-              facetPropPath: "flatmap.connectivity.source",
-              id: 1,
-              label: "Components",
-            },
-            {
-              facetPropPath: "flatmap.connectivity.source",
-              id: 2,
-              label: "Destinations",
-            },
-          ],
-        },
-      ],
       cascaderIsReady: false,
-      displayConnectivity: false,
+      freezeTimeout: undefined,
+      freezed: false,
       initLoading: true,
-      expanded: ""
+      expanded: "",
+      filterVisibility: true
     };
   },
   computed: {
@@ -207,8 +191,8 @@ export default {
       return {
         numberOfHits: this.numberOfHits,
         filterFacets: this.filter,
-        options: this.filterOptions,
-        showFilters: false
+        options: this.connectivityFilterOptions,
+        showFilters: true
       };
     },
     paginatedResults: function () {
@@ -246,20 +230,37 @@ export default {
     paginatedResults: function () {
       this.loadingCards = false;
     },
+    filterVisibility: function (state) {
+      this.filterVisibility = state;
+      this.$emit('filter-visibility', this.filterVisibility);
+    },
   },
   methods: {
+    freezeHoverChange: function () {
+      this.freezed = true;
+      if (this.freezeTimeout) {
+        clearTimeout(this.freezeTimeout);
+      }
+      this.freezeTimeout = setTimeout(() => {
+        this.freezed = false;
+      }, 3000)
+    },
+    onShowConnectivity: function (data) {
+      this.freezeHoverChange();
+      this.$emit('show-connectivity', data);
+    },
+    onShowReferenceConnectivities: function (data) {
+      this.freezeHoverChange();
+      this.$emit('show-reference-connectivities', data);
+    },
     onConnectivityClicked: function (data) {
       this.searchInput = data.query;
-      this.filters = data.filter;
+      this.filter = data.filter;
       this.searchAndFilterUpdate();
     },
     collapseChange:function (data) {
       this.expanded = this.expanded === data.id ? "" : data.id;
     },
-    closeConnectivity: function (data) {
-      this.expanded = '';
-      this.$emit('connectivity-item-close');
-    },
     onConnectivityCollapseChange: function (data) {
       // close connectivity event will not trigger emit
       if (this.connectivityEntry.find(entry => entry.featureId[0] === data.id)) {
@@ -273,8 +274,11 @@ export default {
       }
     },
     hoverChanged: function (data) {
-      const payload = data ? { ...data, type: "connectivity" } : data;
-      this.$emit("hover-changed", payload);
+      // disable hover changes when show connectivity is clicked
+      if (!this.freezed) {
+        const payload = data ? { ...data, tabType: "connectivity" } : { tabType: "connectivity" };
+        this.$emit("hover-changed", payload);
+      }
     },
     resetSearch: function () {
       this.numberOfHits = 0;
@@ -282,9 +286,12 @@ export default {
       this.loadingCards = false;
     },
     resetSearchIfNoActiveSearch: function() {
-      if (!this.searchInput) this.openSearch([], '');
+      const hasValidFacet = this.filter.some(f => f.facet !== "Show all");
+      if (!this.searchInput && !hasValidFacet) {
+        this.openSearch([], '');
+      }
     },
-    openSearch: function (filter, search = "", option = { withSearch: true }) {
+    openSearch: function (filter, search = "") {
       this.searchInput = search;
       this.resetPageNavigation();
       //Proceed normally if cascader is ready
@@ -303,17 +310,17 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes();
           this.resetSearch();
         } else if (this.filter) {
-          if (option.withSearch) {
-            this.searchKnowledge(this.filter, search);
-          }
+          this.searchKnowledge(this.filter, search);
           this.$refs.filtersRef.setCascader(this.filter);
+          this.searchHistoryUpdate(this.filter, search);
         }
       } else {
         //cascader is not ready, perform search if no filter is set,
         //otherwise waith for cascader to be ready
         this.filter = filter;
-        if ((!filter || filter.length == 0) && option.withSearch) {
+        if (!filter || filter.length == 0) {
           this.searchKnowledge(this.filter, search);
+          this.searchHistoryUpdate(this.filter, search);
         }
       }
     },
@@ -339,63 +346,44 @@ export default {
     clearSearchClicked: function () {
       this.searchInput = "";
       this.searchAndFilterUpdate();
-      this.$refs.filtersRef.checkShowAllBoxes();
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
         this.searchInput = this.searchInput.trim();
         this.searchAndFilterUpdate();
-        if (!this.searchInput) {
-          this.$refs.filtersRef.checkShowAllBoxes();
-        }
       }
     },
     filterUpdate: function (filters) {
-      this.filters = [...filters];
+      this.filter = [...filters];
       this.searchAndFilterUpdate();
-      this.$emit("search-changed", {
-        value: filters,
-        type: "filter-update",
-      });
-    },
-    /**
-     * Transform filters for third level items to perform search
-     * because cascader keeps adding it back.
-     */
-    transformFiltersBeforeSearch: function (filters) {
-      return filters.map((filter) => {
-        if (filter.facet2) {
-          filter.facet = filter.facet2;
-          delete filter.facet2;
-        }
-        return filter;
-      });
+      // this.$emit("search-changed", {
+      //   value: filters,
+      //   tabType: "connectivity",
+      //   type: "filter-update",
+      // });
     },
     searchAndFilterUpdate: function () {
       this.resetPageNavigation();
-      const transformedFilters = this.transformFiltersBeforeSearch(
-        this.filters
-      );
-      this.searchKnowledge(transformedFilters, this.searchInput);
+      this.searchKnowledge(this.filter, this.searchInput);
+      this.searchHistoryUpdate(this.filter, this.searchInput);
     },
     searchHistoryUpdate: function (filters, search) {
       this.$refs.searchHistory.selectValue = 'Search history';
       // save history only if there has value
-      if (search?.trim()) {
-        this.$refs.searchHistory.addSearchToHistory(
-          filters,
-          search
-        );
+      if (filters.length || search?.trim()) {
+        this.$refs.searchHistory.addSearchToHistory(this.filter, search);
       }
     },
     searchKnowledge: function (filters, query = "") {
       this.expanded = "";
-      this.searchHistoryUpdate(filters, query);
       this.loadingCards = true;
       this.scrollToTop();
       this.$emit("search-changed", {
-        value: this.searchInput,
-        type: "query-update",
+        // value: this.searchInput,
+        // type: "query-update",
+        query: query,
+        filter: filters,
+        tabType: "connectivity",
       });
       this.lastSearch = query;
     },
@@ -409,7 +397,7 @@ export default {
     pageChange: function (page) {
       this.start = (page - 1) * this.numberPerPage;
       this.page = page;
-      this.searchKnowledge(this.filters, this.searchInput);
+      this.searchKnowledge(this.filter, this.searchInput);
     },
     scrollToTop: function () {
       if (this.$refs.content) {
@@ -422,8 +410,8 @@ export default {
     },
     searchHistorySearch: function (item) {
       this.searchInput = item.search;
-      this.filters = item.filters;
-      this.searchAndFilterUpdate();
+      this.filter = item.filters;
+      this.openSearch([...item.filters], item.search);
     },
     onConnectivityInfoLoaded: function (result) {
       const stepItemRef = this.$refs['stepItem-' + result.id];
@@ -438,10 +426,6 @@ export default {
   mounted: function () {
     localStorage.removeItem('connectivity-active-view');
     this.openSearch(this.filter, this.searchInput);
-
-    EventBus.on('close-connectivity', () => {
-      this.closeConnectivity();
-    });
   },
 };
 </script>
@@ -512,6 +496,9 @@ export default {
 }
 
 .header {
+  display: flex;
+  align-items: center;
+
   .el-button {
     font-family: inherit;
 
@@ -519,7 +506,19 @@ export default {
     &:focus {
       background: $app-primary-color;
       box-shadow: -3px 2px 4px #00000040;
-      color: #fff;
+      color: #ffffff;
+    }
+  }
+
+  .el-radio-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .el-radio {
+      color: #ffffff;
+      margin-left: 20px;
+      height: 20px;
     }
   }
 }

package/src/components/SearchFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="filters">
     <MapSvgSpriteColor />
-    <div v-show="showFilters">
+    <div v-if="showFilters">
       <div class="cascader-tag" v-if="presentTags.length > 0">
         <el-tag
           class="ml-2"
@@ -9,12 +9,12 @@
           closable
           @close="cascadeTagClose(presentTags[0])"
         >
-          {{ presentTags[0] }}
+          <p class="tag-text">{{ presentTags[0] }}</p>
         </el-tag>
         <el-popover
           v-if="presentTags.length > 1"
           placement="bottom-start"
-          :width="200"
+          :width="250"
           trigger="hover"
           popper-class="cascade-tags-popover"
         >
@@ -131,6 +131,9 @@ const convertReadableLabel = function (original) {
   if (speciesMap[name]) {
     return capitalise(speciesMap[name])
   } else {
+    if (original === original.toUpperCase()) {
+      return original
+    }
     return capitalise(name)
   }
 }
@@ -202,6 +205,27 @@ export default {
       return this.entry.showFilters
     }
   },
+  watch: {
+    entry: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (JSON.stringify(newVal?.options) !== JSON.stringify(oldVal?.options)) {
+          this.options = []
+          this.filters = []
+          this.cascaderIsReady = false
+          // Populate the cascader with new options
+          this.populateCascader().then(() => {
+            this.cascaderIsReady = true
+            this.checkShowAllBoxes()
+            // this.setCascader(this.entry.filterFacets)
+            this.cssMods()
+            this.$emit('cascaderReady')
+          })
+        }
+      },
+    },
+  },
   methods: {
     createCascaderItemValue: function (
       term,
@@ -228,11 +252,13 @@ export default {
           undefined
         )
 
-        // put "Show all" as first option
-        this.options[i].children.unshift({
-          value: this.createCascaderItemValue('Show all'),
-          label: 'Show all',
-        })
+        if (!this.options[i].children.find((child) => child.label === 'Show all')) {
+          // put "Show all" as first option
+          this.options[i].children.unshift({
+            value: this.createCascaderItemValue('Show all'),
+            label: 'Show all',
+          })
+        }
 
         // populate second level of options
         this.options[i].children.forEach((facetItem, j) => {
@@ -488,13 +514,6 @@ export default {
             }
           })
 
-        // if all checkboxes are checked
-        // there has no filter values
-        const filtersLength = filters.filter((item) => item.facet !== 'Show all');
-        if (!filtersLength.length) {
-          filters = [];
-        }
-
         // timeout: add delay for filter checkboxes
         if (this.filterTimeout) {
           clearTimeout(this.filterTimeout);
@@ -866,6 +885,13 @@ export default {
   gap: 4px;
 }
 
+.tag-text {
+  max-width: 75px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .el-tags-container {
   display: flex;
   flex-wrap: wrap;

package/src/components/SearchHistory.vue

@@ -215,14 +215,6 @@ export default {
       }
       return 0;
     },
-    formatFilters(filterItem) {
-      // because filters do not work correctly with facet2
-      if (filterItem.facet2) {
-        filterItem.facet = filterItem.facet2;
-        delete filterItem.facet2;
-      }
-      return filterItem;
-    },
     addSearchToHistory(filters = [], search = '') {
       search = search.trim() // remove whitespace
 
@@ -230,10 +222,6 @@ export default {
         let historyFilters = item.filters;
         let newFilters = filters;
 
-        // make all filters same format
-        historyFilters.forEach((filter) => this.formatFilters(filter));
-        newFilters.forEach((filter) => this.formatFilters(filter));
-
         // sort filters (to check duplicates in string format)
         historyFilters = historyFilters.sort(this.sortFilters);
         newFilters = newFilters.sort(this.sortFilters);
@@ -333,11 +321,6 @@ export default {
           item['longLabel'] = longLabel;
         }
 
-        // make all filters same format
-        item.filters.forEach((filter) =>
-          this.formatFilters(filter)
-        );
-
         // sort filters (to check duplicates in string format)
         item.filters = item.filters.sort(this.sortFilters);
 
@@ -372,7 +355,7 @@ export default {
 
       if (filters) {
         filterItems = filters.filter((filterItem) => filterItem.facet !== 'Show all');
-        filterLabels = filterItems.map((item) => item.facet2 || item.facet);
+        filterLabels = filterItems.map((item) => item.facet);
       }
 
       if (label && filterItems.length) {

package/src/components/SideBar.vue

@@ -49,13 +49,14 @@
                 :envVars="envVars"
                 :connectivityEntry="connectivityEntry"
                 :availableAnatomyFacets="availableAnatomyFacets"
+                :connectivityFilterOptions="filterOptions"
+                @filter-visibility="$emit('filter-visibility', $event)"
                 @search-changed="searchChanged(tab.id, $event)"
-                @hover-changed="hoverChanged($event)"
+                @hover-changed="hoverChanged(tab.id, $event)"
                 @show-connectivity="showConnectivity"
                 @show-reference-connectivities="onShowReferenceConnectivities"
                 @connectivity-hovered="onConnectivityHovered"
                 @connectivity-collapse-change="onConnectivityCollapseChange"
-                @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
             <template v-else>
@@ -66,7 +67,7 @@
                 :envVars="envVars"
                 :ref="'datasetExplorerTab_' + tab.id"
                 @search-changed="searchChanged(tab.id, $event)"
-                @hover-changed="hoverChanged($event)"
+                @hover-changed="hoverChanged(tab.id, $event)"
               />
             </template>
           </template>
@@ -165,6 +166,10 @@ export default {
       type: Array,
       default: [],
     },
+    filterOptions: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
@@ -177,20 +182,12 @@ export default {
     onConnectivityCollapseChange: function (data) {
       this.$emit('connectivity-collapse-change', data)
     },
-    /**
-     * This event is emitted when
-     * the close button of the opened connectivity card
-     * in connectivity explorer is clicked.
-     */
-    onConnectivityItemClose: function () {
-      this.$emit('connectivity-item-close');
-    },
     /**
      * This event is emitted when the mouse hover are changed.
      * @arg data
      */
-    hoverChanged: function (data) {
-      this.$emit('hover-changed', data)
+    hoverChanged: function (id, data) {
+      this.$emit('hover-changed', {...data,  tabId: id })
     },
     /**
      * This event is emitted when the show connectivity button is clicked.
@@ -218,7 +215,7 @@ export default {
      * @arg `obj` {data, id}
      */
     searchChanged: function (id, data) {
-      this.$emit('search-changed', { ...data, id: id })
+      this.$emit('search-changed', { ...data, tabId: id })
     },
     /**
      * The function to close sidebar.
@@ -332,9 +329,6 @@ export default {
     storeAvailableAnatomyFacets: function (availableAnatomyFacets) {
       localStorage.setItem('available-anatomy-facets', JSON.stringify(availableAnatomyFacets))
     },
-    closeConnectivity: function () {
-      EventBus.emit('close-connectivity');
-    },
   },
   computed: {
     // This should respect the information provided by the property