17 condition selector

apps/client/package.json

@@ -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",

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;
 }

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,24 @@ const contrastLimit = computed<[number, number][]>(() => {
     return [[contrastLimitSlider.value.min, contrastLimitSlider.value.max]];
 });
 
+const _determineSelectedOrFiltered = (trackId: string) => {
+    const frame = imageViewerStore.frameNumber;
+    const location = currentLocationMetadata.value?.id;
+    let selected = false;
+    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 +143,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 +239,7 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
         ),
         lineWidthUnits: 'pixels',
         id: 'segmentations',
-        opacity: 0.4,
+        opacity: 1,
         stroked: true,
         filled: true,
         getFillColor: (info) => {
@@ -228,6 +249,13 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return hoverColorWithAlpha;
             }
+
+            const { filtered } = _determineSelectedOrFiltered(
+                info.properties?.id?.toString()
+            );
+            if (filtered) {
+                return [0, 0, 0, 255];
+            }
             return [0, 0, 0, 0];
         },
         getLineColor: (info) => {
@@ -242,6 +270,17 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return colors.hovered.rgb;
             }
+
+            const { selected, filtered } = _determineSelectedOrFiltered(
+                info.properties?.id?.toString()
+            );
+            if (filtered) {
+                return [0, 0, 0];
+            } else {
+                if (!selected) {
+                    return [0, 0, 0];
+                }
+            }
             return colors.unselectedBoundary.rgb;
         },
         getLineWidth: (info) => {
@@ -257,9 +296,9 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
         onHover: onHover,
         onClick: onClick,
         updateTriggers: {
-            getFillColor: dataPointSelectionUntrracked.hoveredTrackId,
-            getLineColor: dataPointSelection.selectedTrackId,
-            getLineWidth: dataPointSelection.selectedTrackId,
+            getFillColor: [dataPointSelectionUntrracked.hoveredTrackId],
+            getLineColor: [dataPointSelection.selectedTrackId],
+            getLineWidth: [dataPointSelection.selectedTrackId],
         },
     });
 }
@@ -453,17 +492,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],
             },
         },
     });
@@ -652,6 +698,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;

apps/client/src/components/conditionSelector/ConditionChart.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, nextTick, computed } from 'vue';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
+import { useConditionSelectorStore } from '@/stores/componentStores/conditionSelectorStore';
+
+import * as vg from '@uwdata/vgplot';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+
+// Props from parent component
+// Accept props from the parent component
+const props = defineProps<{
+    tags: [string, string][];
+    xAxisName: string;
+    yIndex: number;
+    selected: boolean;
+    chartLineWidth: number;
+    height: number;
+}>();
+
+const $height = vg.Param.value(props.height);
+
+watch(
+    () => props.height,
+    (newHeight) => {
+        $height.update(newHeight);
+    }
+);
+
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, compTableName } = storeToRefs(
+    datasetSelectionStore
+);
+const { conditionChartSelections, $conditionChartYAxisDomain } =
+    useMosaicSelectionStore();
+const conditionSelectorStore = useConditionSelectorStore();
+const { selectedIndividualYAxis } = storeToRefs(conditionSelectorStore);
+
+// Container for chart.
+const chartContainer = ref<HTMLElement | null>(null);
+
+watch(
+    [
+        experimentDataInitialized,
+        chartContainer,
+        selectedIndividualYAxis,
+        conditionChartSelections,
+    ],
+    async ([
+        isInitialized,
+        newChartContainer,
+        newYAxis,
+        newConditionChartSelections,
+    ]) => {
+        if (!isInitialized || !newChartContainer || !newYAxis) {
+            return;
+        }
+        while (newChartContainer.firstChild) {
+            newChartContainer.removeChild(newChartContainer.firstChild);
+        }
+
+        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+        const chart = createChart(props.xAxisName, newYAxis);
+
+        if (chart) {
+            newChartContainer.appendChild(chart);
+        }
+    },
+    { deep: true }
+);
+
+// Styles
+const lineColor =
+    conditionSelectorStore.chartColorScheme[
+        props.yIndex % conditionSelectorStore.chartColorScheme.length
+    ];
+const strokeWidth = props.chartLineWidth / 2;
+const strokeWidthSelected = props.chartLineWidth;
+
+// Filter statements in below code are left here to illustrate possibility of additional filter statements.
+function createChart(xAxisName: string, yAxisName: string) {
+    if (!chartContainer.value) {
+        return null;
+    }
+    const source = `${props.tags[0][0]}-${props.tags[0][1]}_${props.tags[1][0]}-${props.tags[1][1]}`;
+    // Creates chart, filtered by the selection that uses the query.
+    const chart = vg.plot(
+        // Fills in area under line chart grey (optional)
+        vg.areaY(
+            vg.from(compTableName.value, {
+                filterBy: conditionChartSelections[source].baseSelection,
+            }),
+            {
+                x: xAxisName,
+                y1: 0,
+                y: vg.avg(yAxisName),
+                fill: 'grey',
+                fillOpacity: 0.3,
+                curve: 'linear',
+                stroke: null,
+                // filter: vg.sql`("${props.tags[0][0]}" = '${props.tags[0][1]}' AND "${props.tags[1][0]}" = '${props.tags[1][1]}')`
+            }
+        ),
+        vg.lineY(
+            vg.from(compTableName.value, {
+                filterBy: conditionChartSelections[source].baseSelection,
+            }),
+            {
+                x: xAxisName,
+                y: vg.avg(yAxisName),
+                stroke: lineColor,
+                strokeWidth: strokeWidth,
+                curve: 'linear',
+                opacity: 0.6,
+                // filter: vg.sql`("${props.tags[0][0]}" = '${props.tags[0][1]}' AND "${props.tags[1][0]}" = '${props.tags[1][1]}')`
+            }
+        ),
+        vg.lineY(
+            vg.from(compTableName.value, {
+                filterBy: conditionChartSelections[source].filteredSelection,
+                // cellLevelSelection
+            }),
+            {
+                x: xAxisName,
+                y: vg.avg(yAxisName),
+                stroke: lineColor,
+                strokeWidth: strokeWidthSelected,
+                curve: 'linear',
+                opacity: 1,
+                // filter: vg.sql`("${props.tags[0][0]}" = '${props.tags[0][1]}' AND "${props.tags[1][0]}" = '${props.tags[1][1]}')`
+            }
+        ),
+
+        // Gets rid of axes and margins
+        vg.axis(false),
+        // Below would allow us to adjust the yAxis based on all the charts
+        vg.yDomain($conditionChartYAxisDomain),
+        vg.margin(0),
+        vg.height($height),
+        vg.width($height)
+    );
+    return chart;
+}
+</script>
+
+<template>
+    <div ref="chartContainer"></div>
+</template>
+
+<style></style>