@abi-software/map-side-bar 2.7.2 → 2.7.3-beta.1

package/src/components/ConnectivityInfo.vue

@@ -1,11 +1,47 @@
 <template>
-  <div v-if="entry" class="main" v-loading="loading">
+  <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">
         <div class="block" v-if="entry.title">
           <div class="title">
-            {{ capitalise(entry.title) }}
+            <span @click="onConnectivityClicked({id: entry.featureId[0]})">
+              {{ capitalise(entry.title) }}
+            </span>
             <template v-if="entry.featuresAlert">
               <el-popover
                 width="250"
@@ -22,13 +58,7 @@
               </el-popover>
             </template>
           </div>
-          <div
-            v-if="
-              entry.provenanceTaxonomyLabel &&
-              entry.provenanceTaxonomyLabel.length > 0
-            "
-            class="subtitle"
-          >
+          <div v-if="hasProvenanceTaxonomyLabel" class="subtitle">
             {{ provSpeciesDescription }}
           </div>
         </div>
@@ -44,8 +74,8 @@
           popper-class="popover-map-pin"
         >
           <template #reference>
-            <el-button class="button-circle" circle @click="showConnectivity(entry)">
-              <el-icon color="white">
+            <el-button class="button-circle secondary" circle @click="showConnectivity">
+              <el-icon color="#8300bf">
                 <el-icon-location />
               </el-icon>
             </el-button>
@@ -55,178 +85,101 @@
           </span>
         </el-popover>
         <CopyToClipboard :content="updatedCopyContent" />
-      </div>
-    </div>
-
-    <div class="content-container population-display">
-      <div class="block attribute-title-container">
-        <span class="attribute-title">Population Display</span>
-      </div>
-      <div class="block buttons-row">
-        <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>
-
-    <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
-      {{ entry.paths }}
-      <div v-if="entry.origins && entry.origins.length > 0" class="block">
-        <div class="attribute-title-container">
-          <span class="attribute-title">Origin</span>
+        <template v-if="withCloseButton">
           <el-popover
-            width="250"
+            width="auto"
             trigger="hover"
             :teleported="false"
-            popper-class="popover-origin-help"
+            popper-class="popover-map-pin"
           >
             <template #reference>
-              <el-icon class="info"><el-icon-warning /></el-icon>
+              <el-button class="button-circle" circle @click="closeConnectivity">
+                <el-icon color="white">
+                  <el-icon-close />
+                </el-icon>
+              </el-button>
             </template>
-            <span style="word-break: keep-all">
-              <i>Origin</i> {{ originDescription }}
-            </span>
-
+            <span>Close</span>
           </el-popover>
-        </div>
-        <div
-          v-for="(origin, i) in entry.origins"
-          class="attribute-content"
-          :origin-item-label="origin"
-          :key="origin"
-          @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
-        >
-          {{ capitalise(origin) }}
-        </div>
-        <el-button
-          v-show="
-            entry.originsWithDatasets && entry.originsWithDatasets.length > 0 &&
-            shouldShowExploreButton(entry.originsWithDatasets)
-          "
-          class="button"
-          id="open-dendrites-button"
-          @click="openDendrites"
-        >
-          Explore origin data
-        </el-button>
+        </template>
       </div>
-      <div
-        v-if="entry.components && entry.components.length > 0"
-        class="block"
-      >
-        <div class="attribute-title-container">
-          <span class="attribute-title">Components</span>
-          <el-popover
-            width="250"
-            trigger="hover"
-            :teleported="false"
-            popper-class="popover-origin-help"
-          >
-            <template #reference>
-              <el-icon class="info"><el-icon-warning /></el-icon>
-            </template>
-            <span style="word-break: keep-all">
-              The list is not in any specific order.<br>
-              Specific paths can be viewed using Graph View.
-            </span>
-          </el-popover>
-        </div>
-        <div
-          v-for="(component, i) in entry.components"
-          class="attribute-content"
-          :component-item-label="component"
-          :key="component"
-          @mouseenter="toggleConnectivityTooltip(component, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(component, {show: false})"
+    </div>
+
+    <div
+      class="content-container population-display"
+      :class="dualConnectionSource ? 'population-display-toolbar' : ''"
+    >
+      <div class="block attribute-title-container">
+        <span class="attribute-title">Population Display</span>
+        <el-popover
+          v-if="activeView === 'listView'"
+          width="250"
+          trigger="hover"
+          :teleported="false"
+          popper-class="popover-origin-help"
         >
-          {{ capitalise(component) }}
-        </div>
+          <template #reference>
+            <el-icon class="info"><el-icon-warning /></el-icon>
+          </template>
+          <span style="word-break: keep-all">
+            This list is ordered alphabetically,
+            switch to graph view for path details.
+          </span>
+        </el-popover>
       </div>
-      <div
-        v-if="entry.destinations && entry.destinations.length > 0"
-        class="block"
-      >
-        <div class="attribute-title-container">
-          <span class="attribute-title">Destination</span>
-          <el-popover
-            width="250"
-            trigger="hover"
-            :teleported="false"
-            popper-class="popover-origin-help"
-          >
-            <template #reference>
-              <el-icon class="info"><el-icon-warning /></el-icon>
-            </template>
-            <span style="word-break: keep-all">
-              <i>Destination</i> is where the axons terminate
-            </span>
-          </el-popover>
+      <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
-          v-for="(destination, i) in entry.destinations"
-          class="attribute-content"
-          :destination-item-label="destination"
-          :key="destination"
-          @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
-        >
-          {{ capitalise(destination) }}
+        <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>
-        <el-button
-          v-show="
-            entry.destinationsWithDatasets &&
-            entry.destinationsWithDatasets.length > 0 &&
-            shouldShowExploreButton(entry.destinationsWithDatasets)
-          "
-          class="button"
-          @click="openAxons"
-        >
-          Explore destination data
-        </el-button>
-      </div>
-      <div
-        v-show="
-          entry.componentsWithDatasets &&
-          entry.componentsWithDatasets.length > 0 &&
-          shouldShowExploreButton(entry.componentsWithDatasets)
-        "
-        class="block"
-      >
-        <el-button
-          class="button"
-          @click="openAll"
-        >
-          Search for data on components
-        </el-button>
       </div>
+    </div>
 
-      <div class="connectivity-error-container">
-        <div class="connectivity-error" v-if="connectivityError">
-          <strong v-if="connectivityError.errorConnectivities">
-            {{ connectivityError.errorConnectivities }}
-          </strong>
-          {{ connectivityError.errorMessage }}
-        </div>
-      </div>
+    <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
+      <connectivity-list
+        v-loading="connectivityLoading"
+        :key="`${connectivityKey}list`"
+        :entry="entry"
+        :origins="origins"
+        :components="components"
+        :destinations="destinations"
+        :originsWithDatasets="originsWithDatasets"
+        :componentsWithDatasets="componentsWithDatasets"
+        :destinationsWithDatasets="destinationsWithDatasets"
+        :availableAnatomyFacets="availableAnatomyFacets"
+        :connectivityError="connectivityError"
+        @connectivity-hovered="onConnectivityHovered"
+        @connectivity-clicked="onConnectivityClicked"
+        @connectivity-action-click="onConnectivityActionClick"
+      />
     </div>
 
-    <div class="content-container" v-show="activeView === 'graphView'">
+    <div class="content-container content-container-connectivity" v-show="activeView === 'graphView'">
       <template v-if="graphViewLoaded">
         <connectivity-graph
-          :key="entry.featureId[0]"
+          v-loading="connectivityLoading"
+          :key="`${connectivityKey}graph`"
           :entry="entry.featureId[0]"
-          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          :mapServer="flatmapApi"
           :sckanVersion="sckanVersion"
+          :connectivityFromMap="connectivityFromMap"
           @tap-node="onTapNode"
           ref="connectivityGraphRef"
         />
@@ -234,22 +187,22 @@
     </div>
 
     <div class="content-container content-container-references" v-if="resources.length">
-      <external-resource-card
+      <ExternalResourceCard
         :resources="resources"
         @references-loaded="onReferencesLoaded"
         @show-reference-connectivities="onShowReferenceConnectivities"
-      ></external-resource-card>
+      />
     </div>
   </div>
 </template>
 
 <script>
+  /* eslint-disable no-alert, no-console */
 import {
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
   Warning as ElIconWarning,
+  Location as ElIconLocation,
+  Search as ElIconSearch,
 } from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
 import {
   ElButton as Button,
   ElContainer as Container,
@@ -260,6 +213,7 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
+  ConnectivityList,
   ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
@@ -283,26 +237,22 @@ export default {
     Button,
     Container,
     Icon,
-    ElIconArrowUp,
-    ElIconArrowDown,
     ElIconWarning,
+    ElIconLocation,
+    ElIconSearch,
     ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
+    ConnectivityList,
   },
   props: {
-    entry: {
-      type: Object,
-      default: () => ({
-        destinations: [],
-        origins: [],
-        components: [],
-        destinationsWithDatasets: [],
-        originsWithDatasets: [],
-        componentsWithDatasets: [],
-        resource: undefined,
-        featuresAlert: undefined,
-      }),
+    connectivityEntry: {
+      type: Array,
+      default: [],
+    },
+    entryId: {
+      type: String,
+      default: "",
     },
     envVars: {
       type: Object,
@@ -312,126 +262,139 @@ export default {
       type: Array,
       default: () => [],
     },
+    withCloseButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {
-      controller: undefined,
-      activeSpecies: undefined,
-      pubmedSearchUrl: '',
-      loading: false,
+      entryIndex: 0,
+      updatedCopyContent: '',
       activeView: 'listView',
-      facetList: [],
-      showToolip: false,
-      showDetails: false,
-      originDescriptions: {
-        motor: 'is the location of the initial cell body of the circuit',
-        sensory: 'is the location of the initial cell body in the PNS circuit',
-      },
-      componentsWithDatasets: [],
-      uberons: [{ id: undefined, name: undefined }],
-      connectivityError: null,
       timeoutID: undefined,
+      connectivityLoading: false,
+      dualConnectionSource: false,
+      connectivitySource: 'sckan',
+      connectivityError: null,
       graphViewLoaded: false,
-      updatedCopyContent: '',
-      sckanVersion: '',
-    }
-  },
-  watch: {
-    availableAnatomyFacets: {
-      handler: function (val) {
-        this.convertFacetsToList(val)
-      },
-      immediate: true,
-      deep: true,
-    },
+      connectivityFromMap: null,
+    };
   },
   computed: {
-    resources: function () {
-      let resources = [];
-      if (this.entry && this.entry.hyperlinks) {
-        resources = this.entry.hyperlinks;
+    entry: function () {
+      if (this.entryId) {
+        return this.connectivityEntry.filter((entry) => {
+          return entry.featureId[0] === this.entryId;
+        })[this.entryIndex];
       }
-      return resources;
+      return this.connectivityEntry[this.entryIndex];
     },
-    originDescription: function () {
-      if (
-        this.entry &&
-        this.entry.title &&
-        this.entry.title.toLowerCase().includes('motor')
-      ) {
-        return this.originDescriptions.motor
-      } else {
-        return this.originDescriptions.sensory
+    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;
+    },
+    hasProvenanceTaxonomyLabel: function () {
+      return (
+        this.entry.provenanceTaxonomyLabel &&
+        this.entry.provenanceTaxonomyLabel.length > 0
+      );
     },
     provSpeciesDescription: function () {
-      let text = 'Studied in'
+      let text = "Studied in";
       this.entry.provenanceTaxonomyLabel.forEach((label) => {
-        text += ` ${label},`
-      })
-      text = text.slice(0, -1) // remove last comma
-      text += ' species'
-      return text
+        text += ` ${label},`;
+      });
+      text = text.slice(0, -1); // remove last comma
+      text += " species";
+      return text;
     },
-  },
-  methods: {
-    titleCase: function (title) {
-      return titleCase(title)
+    connectivityKey: function () {
+      return this.entry.featureId[0] + this.entry.connectivitySource;
     },
-    capitalise: function (text) {
-      return capitalise(text)
+    origins: function () {
+      return this.entry.origins;
+    },
+    components: function () {
+      return this.entry.components;
     },
-    openUrl: function (url) {
-      window.open(url, '_blank')
+    destinations: function () {
+      return this.entry.destinations;
     },
-    openAll: function () {
-      EventBus.emit('onConnectivityActionClick', {
-        type: 'Facets',
-        labels: this.entry.componentsWithDatasets.map((a) => a.name.toLowerCase()),
-      })
+    originsWithDatasets: function () {
+      return this.entry.originsWithDatasets;
     },
-    openAxons: function () {
-      EventBus.emit('onConnectivityActionClick', {
-        type: 'Facets',
-        labels: this.entry.destinationsWithDatasets.map((a) => a.name.toLowerCase()),
-      })
+    componentsWithDatasets: function () {
+      return this.entry.componentsWithDatasets;
     },
-    // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
-    shouldShowExploreButton: function (features) {
-      for (let i = 0; i < features.length; i++) {
-        if (this.facetList.includes(features[i].name.toLowerCase())) {
-          return true
+    destinationsWithDatasets: function () {
+      return this.entry.destinationsWithDatasets;
+    },
+    resources: function () {
+      return this.entry.hyperlinks;
+    },
+    sckanVersion: function () {
+      return this.entry.knowledgeSource;
+    },
+    flatmapApi: function () {
+      return this.envVars.FLATMAPAPI_LOCATION;
+    },
+  },
+  watch: {
+    entry: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.connectivityLoading = true;
+          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');
         }
+      },
+    },
+  },
+  methods: {
+    previous: function () {
+      if (this.entryIndex !== 0) {
+        this.entryIndex = this.entryIndex - 1;
       }
-      return false
     },
-    // convertFacetsToList: Converts the available anatomy facets to a list for easy searching
-    convertFacetsToList: function (facets) {
-      facets.forEach((facet) => {
-        if(facet.children) {
-          this.convertFacetsToList(facet.children)
-        } else {
-          this.facetList.push(facet.label.toLowerCase())
-        }
-      })
+    next: function () {
+      if (this.entryIndex !== this.connectivityEntry.length - 1) {
+        this.entryIndex = this.entryIndex + 1;
+      }
     },
-    openDendrites: function () {
-      EventBus.emit('onConnectivityActionClick', {
-        type: 'Facets',
-        labels: this.entry.originsWithDatasets.map((a) => a.name.toLowerCase()),
-      })
+    titleCase: function (title) {
+      return titleCase(title)
     },
-    pubmedSearchUrlUpdate: function (val) {
-      this.pubmedSearchUrl = val
+    capitalise: function (text) {
+      return capitalise(text)
     },
-    showConnectivity: function (entry) {
+    showConnectivity: function () {
       // move the map center to highlighted area
-      const featureIds = entry.featureId || [];
+      const featureIds = this.entry.featureId || [];
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
     switchConnectivityView: function (val) {
       this.activeView = val;
+      localStorage.setItem('connectivity-active-view', this.activeView);
 
       if (val === 'graphView' && !this.graphViewLoaded) {
         // to load the connectivity graph only after the container is in view
@@ -443,7 +406,7 @@ export default {
     onTapNode: function (data) {
       // save selected state for list view
       const name = data.map(t => t.label).join(', ');
-      this.toggleConnectivityTooltip(name, {show: true});
+      this.onConnectivityHovered(name);
     },
     onShowReferenceConnectivities: function (refSource) {
       this.$emit('show-reference-connectivities', refSource);
@@ -514,28 +477,28 @@ export default {
       }
 
       // Origins
-      if (this.entry.origins?.length) {
+      if (this.origins?.length) {
         const title = 'Origin';
-        const origins = this.entry.origins;
-        const originsWithDatasets = this.entry.originsWithDatasets;
+        const origins = this.origins;
+        const originsWithDatasets = this.originsWithDatasets;
         const transformedOrigins = transformData(title, origins, originsWithDatasets);
         contentArray.push(transformedOrigins);
       }
 
       // Components
-      if (this.entry.components?.length) {
+      if (this.components?.length) {
         const title = 'Components';
-        const components = this.entry.components;
-        const componentsWithDatasets = this.entry.componentsWithDatasets;
+        const components = this.components;
+        const componentsWithDatasets = this.componentsWithDatasets;
         const transformedComponents = transformData(title, components, componentsWithDatasets);
         contentArray.push(transformedComponents);
       }
 
       // Destination
-      if (this.entry.destinations?.length) {
+      if (this.destinations?.length) {
         const title = 'Destination';
-        const destinations = this.entry.destinations;
-        const destinationsWithDatasets = this.entry.destinationsWithDatasets;
+        const destinations = this.destinations;
+        const destinationsWithDatasets = this.destinationsWithDatasets;
         const transformedDestinations = transformData(title, destinations, destinationsWithDatasets);
         contentArray.push(transformedDestinations);
       }
@@ -553,31 +516,42 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
-    toggleConnectivityTooltip: function (name, option) {
+    getConnectivityDatasets: function (label) {
       const allWithDatasets = [
-        ...this.entry.componentsWithDatasets,
-        ...this.entry.destinationsWithDatasets,
-        ...this.entry.originsWithDatasets,
+        ...this.componentsWithDatasets,
+        ...this.destinationsWithDatasets,
+        ...this.originsWithDatasets,
       ];
-      const names = name.split(','); // some features have more than one value
-      const data = [];
-      if (option.show) {
-        names.forEach((n) => {
-          const foundData = allWithDatasets.find((a) =>
-            a.name.toLowerCase().trim() === n.toLowerCase().trim()
-          );
-
-          if (foundData) {
-            data.push({
-              id: foundData.id,
-              label: foundData.name
-            });
-          }
-        });
-      }
-
+      const names = label.split(','); // some features have more than one value
+      let data = [];
+      names.forEach((n) => {
+        const foundData = allWithDatasets.find((a) =>
+          a.name.toLowerCase().trim() === n.toLowerCase().trim()
+        );
+        if (foundData) {
+          data.push({
+            id: foundData.id,
+            label: foundData.name
+          });
+        }
+      });
+      return data
+    },
+    onConnectivityHovered: function (label) {
+      const payload = {
+        connectivityInfo: this.entry,
+        data: label ? this.getConnectivityDatasets(label) : [],
+      };
       // type: to show error only for click event
-      this.$emit('connectivity-component-click', data);
+      this.$emit('connectivity-hovered', payload);
+    },
+    onConnectivityClicked: function (data) {
+      let payload = {
+        query: data.id,
+        filter: [],
+        data: data.label ? this.getConnectivityDatasets(data.label) : [],
+      };
+      this.$emit('connectivity-clicked', payload);
     },
     getErrorConnectivities: function (errorData) {
       const errorDataToEmit = [...new Set(errorData)];
@@ -633,10 +607,70 @@ export default {
         this.connectivityError = null;
       }, ERROR_TIMEOUT);
     },
+    onConnectivitySourceChange: function (connectivitySource) {
+      const { featureId } = this.entry;
+
+      this.connectivityLoading = true;
+
+      if (this.activeView !== 'graphView') {
+        this.graphViewLoaded = false;
+      }
+
+      this.checkAndUpdateDualConnection();
+      this.updateGraphConnectivity();
+
+      EventBus.emit('connectivity-source-change', {
+        featureId: featureId,
+        connectivitySource: connectivitySource,
+      });
+    },
+    updateGraphConnectivity: function () {
+      if (this.connectivitySource === "map") {
+        this.getConnectionsFromMap().then((response) => {
+          this.connectivityFromMap = response;
+          this.connectivityLoading = false;
+        });
+      } else {
+        this.connectivityFromMap = null;
+        this.connectivityLoading = false;
+      }
+    },
+    getConnectionsFromMap: async function () {
+      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);
+      }
+    },
+    onConnectivityActionClick: function (data) {
+      EventBus.emit('onConnectivityActionClick', data);
+    },
+    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.sckanVersion = this.entry['knowledge-source'];
     this.updatedCopyContent = this.getUpdateCopyContent();
+
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
     });
@@ -645,12 +679,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-.display {
-  width: 44px;
-  word-break: normal;
-}
-
 .connectivity-info-title {
   padding: 0;
   display: flex;
@@ -664,15 +692,30 @@ export default {
   }
 }
 
+.toggle-button {
+  display: flex;
+  justify-content: space-between;
+
+  .is-disabled {
+    color: #fff !important;
+    background-color: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
 .title {
   text-align: left;
   // width: 16em;
   line-height: 1.3em !important;
   font-size: 18px;
-  font-family: Helvetica;
+  // font-family: Helvetica;
   font-weight: bold;
   padding-bottom: 8px;
   color: $app-primary-color;
+
+  span:hover {
+    cursor: pointer;
+  }
 }
 
 .block + .block {
@@ -691,43 +734,14 @@ export default {
     background-color: $app-primary-color;
     border-color: $app-primary-color;
   }
-}
-
-.icon {
-  right: 0px;
-  position: absolute;
-  top: 10px;
-}
-
-.icon:hover {
-  cursor: pointer;
-}
 
-:deep(.popover-origin-help.el-popover) {
-  text-transform: none !important; // need to overide the tooltip text transform
-  border: 1px solid $app-primary-color;
-  font-weight: 400;
-  font-family: Asap, sans-serif, Helvetica;
-
-  .el-popper__arrow {
-    &:before {
-      border-color: $app-primary-color;
-      background-color: #ffffff;
-    }
+  &.secondary {
+    background-color: white;
   }
 }
 
-.info,
 .alert {
   color: #8300bf;
-}
-
-.info {
-  transform: rotate(180deg);
-  margin-left: 8px;
-}
-
-.alert {
   margin-left: 5px;
   vertical-align: text-bottom;
 
@@ -776,6 +790,12 @@ export default {
   padding: 1rem;
 }
 
+.info {
+  color: #8300bf;
+  transform: rotate(180deg);
+  margin-left: 8px;
+}
+
 .attribute-title-container {
   margin-bottom: 0.5em;
 }
@@ -787,39 +807,6 @@ export default {
   text-transform: uppercase;
 }
 
-.attribute-content {
-  font-size: 14px;
-  font-weight: 500;
-  transition: color 0.25s ease;
-  position: relative;
-  cursor: default;
-
-  &:hover {
-    color: $app-primary-color;
-  }
-
-  + .attribute-content {
-    &::before {
-      content: "";
-      width: 90%;
-      height: 1px;
-      background-color: var(--el-border-color);
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  &:last-of-type {
-    margin-bottom: 0.5em;
-  }
-}
-
-.popover-container {
-  height: 100%;
-  width: 100%;
-}
-
 .main {
   .el-button.is-round {
     border-radius: 4px;
@@ -876,6 +863,25 @@ export default {
     margin-top: 0 !important;
     margin-left: 10px !important;
   }
+
+  > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+.neuron-connection-button {
+  display: flex;
+  flex: 1 1 auto !important;
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: space-between;
+
+  .el-button + .el-button {
+    margin-top: 0 !important;
+    margin-left: 10px !important;
+  }
 }
 
 .population-display {
@@ -886,6 +892,23 @@ export default {
   justify-content: space-between;
   border-bottom: 1px solid $app-primary-color;
   padding-bottom: 0.5rem !important;
+
+  &.population-display-toolbar {
+    flex-direction: column !important;
+    align-items: start;
+
+    .buttons-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+
+  .el-radio {
+    margin-right: 1rem;
+  }
 }
 
 .tooltip-container {
@@ -981,6 +1004,10 @@ export default {
       border-radius: 50%;
     }
   }
+
+  .el-button + .el-button {
+    margin-left: 0 !important;
+  }
 }
 
 :deep(.el-popper.popover-map-pin) {
@@ -1007,25 +1034,4 @@ export default {
     margin-top: -1.25rem;
   }
 }
-
-.connectivity-error-container {
-  position: sticky;
-  bottom: 0.5rem;
-  width: 100%;
-  min-height: 31px; // placeholder
-  margin-top: -10px !important;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.connectivity-error {
-  width: fit-content;
-  font-size: 12px;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--el-color-error-light-9);
-  border-radius: var(--el-border-radius-small);
-  border: 1px solid var(--el-color-error);
-}
 </style>