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

package/package.json

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

package/src/App.vue

@@ -31,7 +31,7 @@
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
-      @connectivity-explorer-clicked="onConnectivityExplorerClicked"
+      @connectivity-collapse-change="onConnectivityCollapseChange"
     />
   </div>
 </template>
@@ -344,7 +344,7 @@ export default {
       const filter = entry ? entry.filter : []
       this.$refs.sideBar.openConnectivitySearch(filter, query)
     },
-    onConnectivityExplorerClicked: function () {
+    onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput]
     }
   },

package/src/components/ConnectivityCard.vue

@@ -2,10 +2,10 @@
   <div class="connectivity-card-container" ref="container">
     <div class="connectivity-card" ref="card">
       <div class="seperator-path"></div>
-      <div v-loading="loading" class="card" @click="cardClicked(entry)">
-        <div class="title">{{ capitalise(entry.label) }}</div>
+      <div v-loading="loading" class="card-content" @click="cardClicked(entry)">
+        <div class="card-title">{{ capitalise(entry.label) }}</div>
         <template v-for="field in displayFields" :key="field">
-          <div class="details" v-if="entry[field]">
+          <div class="card-details" v-if="entry[field]">
             <strong>{{ field }}:</strong> {{ entry[field] }}
           </div>
         </template>
@@ -31,12 +31,23 @@ export default {
       type: Object,
       default: () => {},
     },
+    connectivityEntry: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     loading: function () {
-      // Only when click on overlay paths
-      if ("detailsReady" in this.entry) {
-        return !this.entry.detailsReady;
+      // for clicking on the flatmap neuron
+      if ("ready" in this.entry) {
+        return !this.entry.ready;
+      }
+      // for clicking on the explorer card
+      const cEntry = this.connectivityEntry.find(
+        (entry) => entry.id === this.entry.id
+      );
+      if (cEntry) {
+        return !cEntry.ready;
       }
       return false;
     },
@@ -48,7 +59,7 @@ export default {
     },
     cardClicked: function (data) {
       if (!this.loading) {
-        this.$emit("connectivity-card-clicked", data);
+        this.$emit("open-connectivity", data);
       }
     },
   },
@@ -62,32 +73,21 @@ export default {
   min-height: 5rem;
 }
 
-.card {
+.card-content {
   padding-top: 18px;
   padding-left: 6px;
   cursor: pointer;
 }
 
-.title {
+.card-title {
   padding-bottom: 0.75rem;
   font-weight: bold;
   line-height: 1.5;
   letter-spacing: 1.05px;
 }
 
-.details {
+.card-details {
   line-height: 1.5;
   letter-spacing: 1.05px;
 }
-
-.button {
-  margin-right: 3.5rem;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-  margin-top: 8px;
-}
 </style>

package/src/components/ConnectivityExplorer.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-card :body-style="bodyStyle" class="content-card">
+  <el-card
+    :body-style="bodyStyle"
+    class="content-card"
+    @mouseleave="hoverChanged(undefined)"
+  >
     <template #header>
       <div class="header">
         <el-input
@@ -57,21 +61,20 @@
         :key="result.id"
         :ref="'stepItem-'  + result.id"
         class="step-item"
-        :class="{
-          'is-active': expanded === result.id && result.loaded,
-          'is-loading': expanded === result.id && !result.loaded,
-        }"
         @mouseenter="hoverChanged(result)"
       >
         <ConnectivityCard
-          class="dataset-card"
+          v-show="expanded !== result.id"
+          class="connectivity-card"
           :entry="result"
-          @connectivity-card-clicked="onConnectivityExplorerClicked"
+          :connectivityEntry="connectivityEntry"
+          @open-connectivity="onConnectivityCollapseChange"
         />
         <ConnectivityInfo
           v-if="expanded === result.id"
-          :connectivityEntry="connectivityEntry"
+          class="connectivity-info"
           :entryId="result.id"
+          :connectivityEntry="connectivityEntry"
           :availableAnatomyFacets="availableAnatomyFacets"
           :envVars="envVars"
           :withCloseButton="true"
@@ -80,7 +83,7 @@
           @connectivity-clicked="onConnectivityClicked"
           @connectivity-hovered="$emit('connectivity-hovered', $event)"
           @loaded="onConnectivityInfoLoaded(result)"
-          @close-connectivity="closeConnectivity(result)"
+          @close-connectivity="onConnectivityCollapseChange(result)"
         />
       </div>
       <el-pagination
@@ -106,6 +109,7 @@ 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";
@@ -212,24 +216,31 @@ export default {
     },
   },
   watch: {
-    connectivityKnowledge: function (value, oldValue) {
-      this.expanded = '';
-      this.initLoading = false;
+    connectivityKnowledge: function (newVal, oldVal) {
+      this.expanded = ""; // reset expanded state
       this.loadingCards = false;
-
-      if (JSON.stringify(value) === JSON.stringify(oldValue)) {
-        return;
+      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+        this.results = newVal;
+        this.initLoading = false;
+        this.numberOfHits = this.results.length;
+        // knowledge is from the neuron click if there is 'ready' property
+        if (this.numberOfHits === 1 && !('ready' in this.results[0])) {
+          this.onConnectivityCollapseChange(this.results[0]);
+        }
       }
-
-      this.results = value.map((item) => {
-        return {
-          ...item,
-          loaded: false,
-        };
-      });
-      this.numberOfHits = this.results.length;
-      if (this.numberOfHits === 1) {
-        this.onConnectivityExplorerClicked(this.results[0]);
+    },
+    // 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 (
+          (newVal[0].connectivitySource !== oldVal[0].connectivitySource) &&
+          oldVal[0].ready
+        ) {
+          return;
+        }
+        this.collapseChange(newVal[0]);
       }
     },
     paginatedResults: function () {
@@ -242,20 +253,23 @@ export default {
       this.filters = data.filter;
       this.searchAndFilterUpdate();
     },
-    openConnectivity: function (data) {
-      this.expanded = data.id;
+    collapseChange:function (data) {
+      this.expanded = this.expanded === data.id ? "" : data.id;
     },
     closeConnectivity: function (data) {
       this.expanded = '';
+      this.$emit('connectivity-item-close');
     },
-    onConnectivityExplorerClicked: function (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);
-        }
+    onConnectivityCollapseChange: function (data) {
+      // close connectivity event will not trigger emit
+      if (this.connectivityEntry.find(entry => entry.featureId[0] === data.id)) {
+        this.collapseChange(data);
+      } else {
+        this.expanded = "";
+        // Make sure to emit the change after the next DOM update
+        this.$nextTick(() => {
+          this.$emit("connectivity-collapse-change", data);
+        });
       }
     },
     hoverChanged: function (data) {
@@ -412,7 +426,6 @@ export default {
       this.searchAndFilterUpdate();
     },
     onConnectivityInfoLoaded: function (result) {
-      result.loaded = true;
       const stepItemRef = this.$refs['stepItem-' + result.id];
       const contentRef = this.$refs['content'];
       this.$nextTick(() => {
@@ -425,6 +438,10 @@ export default {
   mounted: function () {
     localStorage.removeItem('connectivity-active-view');
     this.openSearch(this.filter, this.searchInput);
+
+    EventBus.on('close-connectivity', () => {
+      this.closeConnectivity();
+    });
   },
 };
 </script>
@@ -432,7 +449,7 @@ export default {
 <style lang="scss" scoped>
 @import '../assets/pagination.scss';
 
-.dataset-card {
+.connectivity-card {
   position: relative;
 
   &::before {
@@ -472,51 +489,15 @@ export default {
   font-size: 14px;
   margin-bottom: 18px;
   text-align: left;
-  max-height: 200px;
   transition: all 0.3s ease;
 
-  .dataset-card {
-    opacity: 1;
-    visibility: visible;
-    transition: all 0.3s ease;
+  .connectivity-card {
+    max-height: 200px;
   }
-
-  &.is-active {
-    max-height: 9999px;
+  .connectivity-info {
     background-color: #f7faff;
     border: 2px solid $app-primary-color;
     border-radius: var(--el-border-radius-base);
-
-    .dataset-card {
-      pointer-events: none;
-
-      &::before {
-        display: none;
-      }
-
-      + .main {
-        border: 0 none;
-      }
-    }
-
-    &:not(.is-loading) {
-      .dataset-card {
-        opacity: 0;
-        visibility: hidden;
-        height: 0;
-      }
-    }
-  }
-
-  &.is-loading {
-    opacity: 0.5;
-    pointer-events: none;
-
-    :deep(.connectivity-card .title) {
-      color: $app-primary-color;
-      font-size: 18px;
-      letter-spacing: normal;
-    }
   }
 }
 

package/src/components/ConnectivityInfo.vue

@@ -1,39 +1,5 @@
 <template>
   <div v-if="entry" class="main">
-    <div v-if="connectivityEntry.length > 1 && !entryId" class="toggle-button">
-      <el-popover
-        width="auto"
-        trigger="hover"
-        :teleported="false"
-      >
-        <template #reference>
-          <el-button
-            class="button"
-            @click="previous"
-            :disabled="this.entryIndex === 0"
-          >
-            Previous
-          </el-button>
-        </template>
-        <span>{{ previousLabel }}</span>
-      </el-popover>
-      <el-popover
-        width="auto"
-        trigger="hover"
-        :teleported="false"
-      >
-        <template #reference>
-          <el-button
-            class="button"
-            @click="next"
-            :disabled="this.entryIndex === this.connectivityEntry.length - 1"
-          >
-            Next
-          </el-button>
-        </template>
-        <span>{{ nextLabel }}</span>
-      </el-popover>
-    </div>
     <!-- Connectivity Info Title -->
     <div class="connectivity-info-title">
       <div class="title-content">
@@ -259,7 +225,6 @@ export default {
   },
   data: function () {
     return {
-      entryIndex: 0,
       updatedCopyContent: '',
       activeView: 'listView',
       connectivityLoading: false,
@@ -271,24 +236,9 @@ export default {
   },
   computed: {
     entry: function () {
-      if (this.entryId) {
-        return this.connectivityEntry.filter((entry) => {
-          return entry.featureId[0] === this.entryId;
-        })[this.entryIndex];
-      }
-      return this.connectivityEntry[this.entryIndex];
-    },
-    previousLabel: function () {
-      if (this.entryIndex === 0) {
-        return "This is the first item. Click 'Next' to see more information.";
-      }
-      return this.connectivityEntry[this.entryIndex - 1].title;
-    },
-    nextLabel: function () {
-      if (this.entryIndex === this.connectivityEntry.length - 1) {
-        return "This is the last item. Click 'Previous' to see more information.";
-      }
-      return this.connectivityEntry[this.entryIndex + 1].title;
+      return this.connectivityEntry.find((entry) => {
+        return entry.featureId[0] === this.entryId;
+      });
     },
     hasProvenanceTaxonomyLabel: function () {
       return (
@@ -341,7 +291,7 @@ export default {
       deep: true,
       immediate: true,
       handler: function (newVal, oldVal) {
-        if (newVal !== oldVal) {
+        if (newVal && newVal !== oldVal) {
           this.connectivityLoading = true;
           this.activeView =
             localStorage.getItem('connectivity-active-view') ||
@@ -361,16 +311,6 @@ export default {
     },
   },
   methods: {
-    previous: function () {
-      if (this.entryIndex !== 0) {
-        this.entryIndex = this.entryIndex - 1;
-      }
-    },
-    next: function () {
-      if (this.entryIndex !== this.connectivityEntry.length - 1) {
-        this.entryIndex = this.entryIndex + 1;
-      }
-    },
     titleCase: function (title) {
       return titleCase(title)
     },
@@ -941,6 +881,9 @@ export default {
       border-color: $app-primary-color !important;
       border-radius: 50%;
     }
+    &.is-disabled {
+      border-color: #dab3ec !important;
+    }
   }
 
   .el-button + .el-button {

package/src/components/SideBar.vue

@@ -54,7 +54,8 @@
                 @show-connectivity="showConnectivity"
                 @show-reference-connectivities="onShowReferenceConnectivities"
                 @connectivity-hovered="onConnectivityHovered"
-                @connectivity-explorer-clicked="onConnectivityExplorerClicked"
+                @connectivity-collapse-change="onConnectivityCollapseChange"
+                @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
             <template v-else>
@@ -173,8 +174,16 @@ export default {
     }
   },
   methods: {
-    onConnectivityExplorerClicked: function (data) {
-      this.$emit('connectivity-explorer-clicked', data)
+    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.
@@ -323,6 +332,9 @@ 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

package/src/components.d.ts

@@ -40,6 +40,8 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']