17 condition selector

apps/client/src/App.vue

@@ -71,6 +71,11 @@ onBeforeMount(() => {
                     type="basic"
                     label="Upload"
                 />
+                <l-btn
+                    @click="router.push('/test')"
+                    type="basic"
+                    label="Test"
+                />
             </q-toolbar>
         </q-header>
         <GlobalSettingsView></GlobalSettingsView>

apps/client/src/components/AggregateLineChart.vue

@@ -129,6 +129,19 @@ 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 +535,7 @@ 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 +544,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 +671,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

@@ -42,6 +42,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 +58,9 @@ 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,23 @@ 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 +142,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;
@@ -152,6 +172,8 @@ onMounted(() => {
     eventBusStore.emitter.on('resetImageView', resetView);
 });
 
+
+
 const loader = ref<any | null>(null);
 const pixelSource = ref<any | null>(null);
 watch(currentLocationMetadata, async () => {
@@ -218,7 +240,7 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
         ),
         lineWidthUnits: 'pixels',
         id: 'segmentations',
-        opacity: 0.4,
+        opacity: 1,
         stroked: true,
         filled: true,
         getFillColor: (info) => {
@@ -228,6 +250,11 @@ 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 +269,15 @@ 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 +293,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 +489,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 +695,9 @@ 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,155 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+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;
+    yAxisName: string;
+    yIndex: number;
+    selected: boolean;
+    chartLineWidth:number;
+}>();
+
+// Will use soon for dark mode.
+const globalSettings = useGlobalSettings();
+
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
+    datasetSelectionStore
+);
+const { conditionChartSelections, $conditionChartYAxisDomain } = useMosaicSelectionStore();
+const { chartColorScheme } = useConditionSelectorStore();
+
+// Container for chart.
+const chartContainer = ref<HTMLElement | null>(null);
+let observer:MutationObserver|null = null;
+
+const isLoading = ref<boolean>(false);
+
+watch(
+    [experimentDataInitialized, conditionChartSelections, chartContainer],
+    async ([isInitialized, newConditionChartSelections, newChartContainer]) => {
+        if (isInitialized && newChartContainer) {
+            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, props.yAxisName);
+
+            if(chart){
+                newChartContainer.appendChild(chart);
+                observer = new MutationObserver((mutationList) => {
+                    for(const mutation of mutationList) {
+                        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                            observer?.disconnect();
+                            break;
+                        }
+                    }
+                })
+            }
+
+        }
+    },
+    { immediate: true, deep: true }
+);
+
+// Creates a new set of selections and adds them to an overall list that is updated whenever general cellLevelSelection is updated.
+// Returns the "base" and "filtered". Base a constant selection which is never updated. This is only to filter based on the tags. The "filteredSelection" is updated by other general filters (i.e. cellLevelSelection).
+
+// Styles
+const lineColor = chartColorScheme[props.yIndex % 6];
+const strokeWidth = props.chartLineWidth/2;
+const strokeWidthSelected = props.chartLineWidth;
+
+// const $param = vg.Param.value([0,2000])
+
+function createChart(xAxisName: string, yAxisName: string) {
+    if (chartContainer.value) {
+        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(
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy:
+                            conditionChartSelections[source].baseSelection,
+                    }
+                ),
+                {
+                    x: xAxisName,
+                    y1: 0,
+                    y: vg.avg(yAxisName),
+                    fill: 'grey',
+                    fillOpacity: 0.3,
+                    curve: 'basis',
+                    stroke: null,
+                }
+            ),
+            vg.lineY(
+                vg.from(
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy:
+                            conditionChartSelections[source].baseSelection,
+                    }
+                ),
+                {
+                    x: xAxisName,
+                    y: vg.avg(yAxisName),
+                    stroke: lineColor,
+                    strokeWidth: strokeWidth,
+                    curve: 'basis',
+                    opacity: 0.6,
+                }
+            ),
+            vg.lineY(
+                vg.from(
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy:
+                            conditionChartSelections[source].filteredSelection,
+                    }
+                ),
+                {
+                    x: xAxisName,
+                    y: vg.avg(yAxisName),
+                    stroke: lineColor,
+                    strokeWidth: strokeWidthSelected,
+                    curve: 'basis',
+                    opacity: 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.margin(40)
+        );
+        return chart;
+    }
+}
+</script>
+
+<template>
+    <div 
+        v-if="isLoading"
+        style="position:absolute;width:100%;height:100%;flex:1;display:flex;"
+        class="flex justify-center"
+    >
+        <q-spinner/>
+    </div>
+    <div ref="chartContainer"></div>
+</template>
+
+<style></style>