Merge pull request #126 from visdesignlab/17-condition-selector

17 condition selector
visdesignlab · Jan 21, 2025 · 44f5238 · 44f5238
2 parents aa3ea10 + c4a5dec
commit 44f5238
Show file tree

Hide file tree

Showing 45 changed files with 4,613 additions and 858 deletions.
diff --git a/apps/client/README.md b/apps/client/README.md
@@ -1,6 +1,6 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/d889955c-3ff6-4443-b1df-b7d740ea1cfc/deploy-status)](https://app.netlify.com/sites/bright-pika-7e11db/deploys)
 
-# aardvark
+# Loon
 
 This template should help get you started developing with Vue 3 in Vite.
 

diff --git a/apps/client/index.html b/apps/client/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Aardvark</title>
+        <title>Loon</title>
     </head>
     <body>
         <div id="app"></div>

diff --git a/apps/client/package-lock.json b/apps/client/package-lock.json
diff --git a/apps/client/package.json b/apps/client/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "aardvark",
+    "name": "loon",
     "version": "0.0.0",
     "private": true,
     "scripts": {
@@ -8,7 +8,8 @@
         "preview": "vite preview",
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+        "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,vue}\""
     },
     "dependencies": {
         "@deck.gl/core": "8.9.30",

diff --git a/apps/client/src/components/AggregateLineChart.vue b/apps/client/src/components/AggregateLineChart.vue
@@ -129,6 +129,18 @@ const areaGen = computed(() => {
         );
 });
 
+const areaGenHighlighted = computed(() => {
+    return area<AggDataPoint>()
+        .x((aggPoint) => scaleX.value(aggPoint.time))
+        .y0((aggPoint) =>
+            scaleY.value(aggPoint.value + temp.value * aggPoint.count)
+        )
+        .y1((aggPoint) =>
+            scaleY.value(aggPoint.value - temp.value * aggPoint.count)
+        )
+        .defined((aggPoint) => aggPoint.highlighted ?? false);
+});
+
 const lineGen = computed(() => {
     return line<AggDataPoint>()
         .x((aggPoint) => scaleX.value(aggPoint.time))
@@ -522,7 +534,9 @@ const otherUnmuted = computed(() => {
                 </g>
                 <g :transform="`translate(${margin.left},${margin.top})`">
                     <path
-                        :class="`muted agg-line ${globalSettings.normalizedDark}`"
+                        :class="`muted agg-line ${
+                            globalSettings.normalizedDark
+                        } ${aggLine.filtered ? 'filtered' : ''}`"
                         v-for="(
                             aggLine, index
                         ) in aggregateLineChartStore.aggLineDataList.filter(
@@ -531,6 +545,18 @@ const otherUnmuted = computed(() => {
                         :key="index"
                         :d="areaGen(aggLine.data) ?? ''"
                     ></path>
+                    <!-- Path below is for individual cell tracks with highlighted cells. -->
+                    <path
+                        style="stroke-width: 2px"
+                        :class="`highlighted-line ${globalSettings.normalizedDark}`"
+                        v-for="(
+                            aggLine, index
+                        ) in aggregateLineChartStore.aggLineDataList.filter(
+                            (d) => d.muted
+                        )"
+                        :key="'highlighted-' + index"
+                        :d="areaGenHighlighted(aggLine.data) ?? ''"
+                    ></path>
                 </g>
                 <g :transform="`translate(${margin.left},${margin.top})`">
                     <path
@@ -646,6 +672,15 @@ const otherUnmuted = computed(() => {
     stroke-width: 1px;
     opacity: 0.6;
 }
+
+.highlighted.agg-line {
+    stroke-width: 3px;
+    opacity: 1;
+}
+
+.filtered.agg-line {
+    opacity: 0 !important;
+}
 .selected.agg-line {
     stroke-width: 4px;
 }

diff --git a/apps/client/src/components/ImageViewer.vue b/apps/client/src/components/ImageViewer.vue
@@ -21,7 +21,6 @@ import Pool from '../util/Pool';
 import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 
-
 import {
     loadOmeTiff,
     getChannelStats,
@@ -42,6 +41,7 @@ import { TripsLayer } from '@deck.gl/geo-layers';
 import { format } from 'd3-format';
 import colors from '@/util/colors';
 import { useConfigStore } from '@/stores/misc/configStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
@@ -57,6 +57,10 @@ const { currentLocationMetadata } = storeToRefs(datasetSelectionStore);
 const { contrastLimitSlider } = storeToRefs(imageViewerStoreUntrracked);
 const eventBusStore = useEventBusStore();
 const looneageViewStore = useLooneageViewStore();
+const mosaicSelectionStore = useMosaicSelectionStore();
+const { highlightedCellIds, unfilteredTrackIds } =
+    storeToRefs(mosaicSelectionStore);
+
 const deckGlContainer = ref(null);
 const { width: containerWidth, height: containerHeight } =
     useElementSize(deckGlContainer);
@@ -66,6 +70,27 @@ const contrastLimit = computed<[number, number][]>(() => {
     return [[contrastLimitSlider.value.min, contrastLimitSlider.value.max]];
 });
 
+function _determineSelectedOrFiltered(trackId: string): {
+    selected: boolean;
+    filtered: boolean;
+} {
+    const frame = imageViewerStore.frameNumber;
+    const location = currentLocationMetadata.value?.id;
+    let selected = true;
+    if (frame && location && highlightedCellIds.value) {
+        // Generate Unique String to compare against list
+        const unique_string = `${trackId}_${frame}_${location}`;
+        selected = highlightedCellIds.value.includes(unique_string);
+    }
+
+    return {
+        selected,
+        filtered: unfilteredTrackIds.value
+            ? !unfilteredTrackIds.value.includes(trackId)
+            : false,
+    };
+}
+
 let deckgl: any | null = null;
 onMounted(() => {
     deckgl = new Deck({
@@ -121,7 +146,6 @@ onMounted(() => {
         // onLoad: () => console.log('onLoad'),
 
         getTooltip: ({ object }) => {
-            console.log(object);
             if (!object) return null;
             let { id, frame } = object.properties;
             if (id == null) return null;
@@ -218,7 +242,7 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
         ),
         lineWidthUnits: 'pixels',
         id: 'segmentations',
-        opacity: 0.4,
+        opacity: 1,
         stroked: true,
         filled: true,
         getFillColor: (info) => {
@@ -242,6 +266,17 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return colors.hovered.rgb;
             }
+
+            const { selected, filtered } = _determineSelectedOrFiltered(
+                info.properties?.id?.toString()
+            );
+            // Removes outline
+            if (filtered) {
+                return [0, 0, 0];
+            }
+            if (selected) {
+                return colors.highlightedBoundary.rgb;
+            }
             return colors.unselectedBoundary.rgb;
         },
         getLineWidth: (info) => {
@@ -251,15 +286,21 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return 3;
             }
-            return 2;
+            const { selected, filtered } = _determineSelectedOrFiltered(
+                info.properties?.id?.toString()
+            );
+            if (selected) {
+                return 2.5;
+            }
+            return 1.5;
         },
         pickable: true,
         onHover: onHover,
         onClick: onClick,
         updateTriggers: {
-            getFillColor: dataPointSelectionUntrracked.hoveredTrackId,
-            getLineColor: dataPointSelection.selectedTrackId,
-            getLineWidth: dataPointSelection.selectedTrackId,
+            getFillColor: [dataPointSelectionUntrracked.hoveredTrackId],
+            getLineColor: [dataPointSelection.selectedTrackId],
+            getLineWidth: [dataPointSelection.selectedTrackId],
         },
     });
 }
@@ -370,23 +411,6 @@ function addSegmentsFromTrack(
     });
 
     return accumChildPositions;
-
-    // for (let i = 0; i < track.cells.length - 1; i++) {
-    // const start = track.cells[0];
-    // const end = track.cells[track.cells.length - 1];
-    // if (cellMetaData.getFrame(end) >= imageViewerStore.frameNumber) {
-    //     return;
-    // }
-    // segments.push({
-    //     trackId: track.trackId,
-    //     from: cellMetaData.getPosition(start),
-    //     to: cellMetaData.getPosition(end),
-    // });
-    // // }
-    // if (!track.children) return;
-    // for (let child of track.children) {
-    //     addSegmentsFromTrack(child, segments);
-    // }
 }
 
 function createLineageLayer(): LineLayer {
@@ -453,17 +477,24 @@ function createCenterPointLayer(): ScatterplotLayer {
             if (d.trackId === dataPointSelection.selectedTrackId) {
                 return globalSettings.normalizedSelectedRgb;
             }
+
+            // const { filtered } = _determineSelectedOrFiltered(d.trackId);
+
+            // if (filtered) {
+            //     return [0, 0, 0, 0];
+            // }
+
             return [228, 26, 28];
         },
         getStrokeWidth: 1,
         updateTriggers: {
             getFillColor: {
-                selected: dataPointSelection.selectedTrackId,
-                hovered: dataPointSelectionUntrracked.hoveredTrackId,
+                selected: [dataPointSelection.selectedTrackId],
+                hovered: [dataPointSelectionUntrracked.hoveredTrackId],
             },
             getLineColor: {
-                selected: dataPointSelection.selectedTrackId,
-                hovered: dataPointSelectionUntrracked.hoveredTrackId,
+                selected: [dataPointSelection.selectedTrackId],
+                hovered: [dataPointSelectionUntrracked.hoveredTrackId],
             },
         },
     });
@@ -533,7 +564,7 @@ function createTrajectoryGhostLayer(): TripsLayer {
 const imageLayer = ref();
 function renderDeckGL(): void {
     if (deckgl == null) return;
-    if (!cellMetaData.dataInitialized || cellMetaData.selectedLineage == null) {
+    if (!cellMetaData.dataInitialized) {
         renderLoadingDeckGL();
         return;
     }
@@ -652,6 +683,8 @@ watch(currentTrackArray, renderDeckGL);
 watch(dataPointSelection.$state, renderDeckGL);
 watch(imageViewerStore.$state, renderDeckGL);
 watch(contrastLimitSlider, renderDeckGL);
+watch(highlightedCellIds, renderDeckGL);
+watch(unfilteredTrackIds, renderDeckGL);
 
 function clearSelection() {
     dataPointSelection.selectedTrackId = null;