Add toggle for showing single signals

Author: welchr

src/components/DataTable/DataTable.vue

@@ -148,6 +148,10 @@ watch(() => appStore.filterPanelControls.filterDataChanged, async () => {
   await loadDataDebounced()
 })
 
+watch(() => appStore[currentPageName.value]?.showOrphans, async () => {
+  await loadDataDebounced()
+})
+
 watch(() => loadTableDataFlag.value, async () => {
   await loadData()
 })
@@ -281,7 +285,10 @@ const loadData = async () => {
   try {
     if ([locuszoomPage, multizoomPage].includes(cpn)) {
       if(!appStore[cpn].colocDataReady) {
-        const colocURL = `${URLS.COLOC_DATA}/${colocID}?include_orphans=1`
+        let colocURL = `${URLS.COLOC_DATA}/${colocID}`
+        if (appStore[cpn].showOrphans) {
+          colocURL += `?include_orphans=1`
+        }
         await loadColocData(cpn, colocURL)
       }
       const signal1 = appStore[cpn].colocData.signal1

src/components/FilterPanel/FilterPanel.vue

@@ -24,6 +24,7 @@
       <CtlSwitch :controlSet="controlConfig.colorCodeVariants" />
       <CtlSwitch :controlSet="controlConfig.showEnsIDs" />
       <CtlSwitch :controlSet="controlConfig.showEffects" />
+      <CtlSwitch :controlSet="controlConfig.showOrphans" />
     </FilterPanelSubpanel>
   </v-sheet>
 </template>
@@ -69,7 +70,8 @@ const controlConfig = {
   r2: { title: 'r² ≥', topKey: 'filter', storeKey: 'r2', items: null, emptyValue: '0', defaultValue: THRESHOLDS.R2, placeholder: null },
   colorCodeVariants: { title: 'Color-code variants', storeKey: 'colorCodeVariants', defaultValue: true },
   showEnsIDs: { title: 'Show Ensembl IDs', storeKey: 'showEnsIDs', defaultValue: false },
-  showEffects: { title: 'Show effect sizes', storeKey: 'showEffects', defaultValue: false }
+  showEffects: { title: 'Show effect sizes', storeKey: 'showEffects', defaultValue: false },
+  showOrphans: { title: 'Show single signals', storeKey: 'showOrphans', defaultValue: false },
 }
 
 </script>

src/composables/DataTableHelpers.js

@@ -13,6 +13,7 @@ export const useDataTableHelpers = () => {
   const showEnsIDs = ref(false)
   const showEffects = ref(false)
   const showCellType = ref(false)
+  const showOrphans = ref(false)
 
   const showAddPlotIcon = () => {
     return [locuszoomPage, multizoomPage].includes(appStore.currentPageName)
@@ -26,6 +27,10 @@ export const useDataTableHelpers = () => {
   watch(() => appStore[manhattanPage].showEffects, newValue => {showEffects.value = newValue})
   watch(() => appStore[searchPage].showEffects, newValue => {showEffects.value = newValue})
 
+  watch(() => appStore[locuszoomPage].showOrphans, newValue => {showOrphans.value = newValue})
+  watch(() => appStore[manhattanPage].showOrphans, newValue => {showOrphans.value = newValue})
+  watch(() => appStore[searchPage].showOrphans, newValue => {showOrphans.value = newValue})
+
   watch(() => appStore.showCellType, newValue => {showCellType.value = newValue}, { immediate: true })
 
   const alwaysShow = () => true

src/stores/AppStore.js

@@ -127,8 +127,10 @@ export const useAppStore = defineStore('appStore', {
         if(p?.toString().length > 0) url.searchParams.set(value, p)
       })
 
-      // Always allow orphan signals to be included
-      url.searchParams.set('include_orphans', 1)
+      // Check if orphan signals should be included
+      if (this[parentKey].showOrphans) {
+        url.searchParams.set('include_orphans', 1)
+      }
     },
 
     buildLZdataTableURL(urlPath, signal1, signal2) {
@@ -181,6 +183,7 @@ export const useAppStore = defineStore('appStore', {
       this[parentKey].filters.colorCodeVariants = this[PAGE_NAMES.SEARCH].filters.colorCodeVariants
       this[parentKey].filters.showEnsIDs = this[PAGE_NAMES.SEARCH].filters.showEnsIDs
       this[parentKey].filters.showEffects = this[PAGE_NAMES.SEARCH].filters.showEffects
+      this[parentKey].filters.showOrphans = this[PAGE_NAMES.SEARCH].filters.showOrphans
       this[parentKey].filters.itemsPerPage = this[PAGE_NAMES.SEARCH].filters.itemsPerPage
       this[parentKey].filters.pageNum = 1
     },
@@ -293,6 +296,7 @@ function getFilterPanelSettings() {
     colorCodeVariants: true,
     showEnsIDs: false,
     showEffects: false,
+    showOrphans: false,
     filters: {
       // these are actual filters set by the user in the UI
       studies: [],