Single listing with SCKAN as the primary listing

src/App.vue

@@ -24,6 +24,7 @@
                 <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
+                <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
               </div>
             </div>
             <template #reference>
@@ -40,6 +41,7 @@
         :startingMap="startingMap"
         :options="options"
         :state="state"
+        :showLongLabel="showLongLabel"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -158,6 +160,7 @@ export default {
       startingMap: "AC",
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
+      showLongLabel: true,
     }
   },
   computed: {
@@ -309,6 +312,9 @@ export default {
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
+    toggleLongLabel: function() {
+      this.showLongLabel = !this.showLongLabel;
+    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       // map.changeViewingMode('Annotation')

src/components/MapContent.vue

@@ -11,6 +11,7 @@
         v-if="isReady"
         @onFullscreen="onFullscreen"
         :state="stateToSet"
+        :showLongLabel="showLongLabel"
         ref="flow"
         @vue:mounted="flowMounted"
       />
@@ -59,6 +60,10 @@ export default {
       type: Object,
       default: undefined
     },
+    showLongLabel: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * The options include APIs and Keys.
      */

src/components/SplitFlow.vue

@@ -30,6 +30,7 @@
           :connectivityKnowledge="connectivityKnowledge"
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
+          :showLongLabel="showLongLabel"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -146,7 +147,11 @@ export default {
     state: {
       type: Object,
       default: undefined,
-    }
+    },
+    showLongLabel: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {
@@ -480,9 +485,25 @@ export default {
         if (entry.ready) {
           result['nerve-label'] = entry['nerve-label'] || ck['nerve-label'];
         }
+        if (ck && ck['long-label']) {
+          result['long-label'] = ck['long-label'];
+        }
         return result;
       });
 
+      // Fetch long-label from global connectivities if not exist in the payload,
+      // this is for the case when user click on the flatmap paths/features directly without going through sidebar list,
+      // which will only have id and label in the payload
+      if (!this.connectivityEntry[0]['long-label'] && this.connectivityEntry[0].mapuuid) {
+        const connectivityData = this.connectivitiesStore.globalConnectivities[this.connectivityEntry[0].mapuuid] || [];
+        if (connectivityData.length) {
+          const ck = connectivityData.find(ck => ck.id === this.connectivityEntry[0].id);
+          if (ck && ck['long-label']) {
+            this.connectivityEntry[0]['long-label'] = ck['long-label'];
+          }
+        }
+      }
+
       if (this.connectivityExplorerClicked.length) {
         // only remove clicked if not placeholder entry
         if (this.connectivityEntry.every(entry => entry.ready)) {