From 6279a01a867090f04fd52c89f3fe08a9a04fded0 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 8 Oct 2024 08:44:43 -0600
Subject: [PATCH 01/64] Initializing PR


From d0e204488502400193ed9ac35a213038c848b202 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:29:10 -0600
Subject: [PATCH 02/64] Empty Condition Selector.vue file

---
 apps/client/src/components/ConditionSelector.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 apps/client/src/components/ConditionSelector.vue

diff --git a/apps/client/src/components/ConditionSelector.vue b/apps/client/src/components/ConditionSelector.vue
new file mode 100644
index 00000000..e69de29b

From 2723c79dfd69db8b9fddc41520758e99d58f3e50 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:47:21 -0600
Subject: [PATCH 03/64] Empty condition selector as a registered component

---
 .../src/components/ConditionSelector.vue      | 21 +++++++++++++++++++
 apps/client/src/main.ts                       |  2 ++
 .../interactionStores/gridstackLayoutStore.ts |  7 +++++++
 3 files changed, 30 insertions(+)

diff --git a/apps/client/src/components/ConditionSelector.vue b/apps/client/src/components/ConditionSelector.vue
index e69de29b..9e153978 100644
--- a/apps/client/src/components/ConditionSelector.vue
+++ b/apps/client/src/components/ConditionSelector.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+const globalSettings = useGlobalSettings();
+</script>
+
+<template>
+    <div class="flex items-center justify-center align-center h-100">
+        <q-card
+            bordered
+            :dark="globalSettings.darkMode"
+            class="q-ma-sm inner-card"
+        >
+        </q-card>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.inner-card {
+    border-radius: 30px;
+}
+</style>
diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
index 4704a8b5..10a0e0fa 100644
--- a/apps/client/src/main.ts
+++ b/apps/client/src/main.ts
@@ -22,6 +22,7 @@ import AggregateLineChartSettingsSidebar from './components/AggregateLineChartSe
 import AggregateLineChartSettingsToolbar from './components/AggregateLineChartSettingsToolbar.vue';
 import TrrackVisWrapper from './components/TrrackVisWrapper.vue';
 import NoDataSplash from './components/NoDataSplash.vue';
+import ConditionSelector from './components/ConditionSelector.vue';
 import { router } from './router';
 
 import { Quasar, Loading, Notify } from 'quasar';
@@ -103,4 +104,5 @@ createApp(App)
     .component('NoDataSplash', NoDataSplash)
     .component('StubView', StubView)
     .component('FilterSelector', FilterSelector)
+    .component('ConditionSelector', ConditionSelector)
     .mount('#app');
diff --git a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
index 15defb09..a1837b36 100644
--- a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
+++ b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
@@ -284,6 +284,13 @@ export const useGridstackLayoutStore = defineStore(
             return layoutItems;
         }
         const allEqualItems: LayoutItem[] = setEqualItems([
+            {
+                component: 'ConditionSelector',
+                displayName: 'Condition Selector',
+                id: 'ConditionSelector',
+                icon: 'table_chart',
+                noPadding: true,
+            },
             {
                 component: 'LooneageViewGL',
                 displayName: 'Looneage',

From 739144474a7a25222e7ca795a126fb7bf0047111 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:46:57 -0600
Subject: [PATCH 04/64] Condition Selector moved to folder, condition chart
 component added

---
 .../conditionSelector/ConditionChart.vue      | 10 +++++++++
 .../conditionSelector/ConditionSelector.vue   | 21 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 apps/client/src/components/conditionSelector/ConditionChart.vue
 create mode 100644 apps/client/src/components/conditionSelector/ConditionSelector.vue

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
new file mode 100644
index 00000000..1742d323
--- /dev/null
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+const globalSettings = useGlobalSettings();
+</script>
+
+<template>
+    <div></div>
+</template>
+
+<style></style>
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
new file mode 100644
index 00000000..9e153978
--- /dev/null
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+const globalSettings = useGlobalSettings();
+</script>
+
+<template>
+    <div class="flex items-center justify-center align-center h-100">
+        <q-card
+            bordered
+            :dark="globalSettings.darkMode"
+            class="q-ma-sm inner-card"
+        >
+        </q-card>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.inner-card {
+    border-radius: 30px;
+}
+</style>

From bd42a2ec97fd421566fab553edd3732250af26b2 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:47:16 -0600
Subject: [PATCH 05/64] main.ts changes whoops

---
 apps/client/src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
index 10a0e0fa..c3ec4d5f 100644
--- a/apps/client/src/main.ts
+++ b/apps/client/src/main.ts
@@ -22,7 +22,7 @@ import AggregateLineChartSettingsSidebar from './components/AggregateLineChartSe
 import AggregateLineChartSettingsToolbar from './components/AggregateLineChartSettingsToolbar.vue';
 import TrrackVisWrapper from './components/TrrackVisWrapper.vue';
 import NoDataSplash from './components/NoDataSplash.vue';
-import ConditionSelector from './components/ConditionSelector.vue';
+import ConditionSelector from './components/conditionSelector/ConditionSelector.vue';
 import { router } from './router';
 
 import { Quasar, Loading, Notify } from 'quasar';

From c6de1db657ec80183f7fc547c320bfabe44480f5 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 9 Oct 2024 11:45:53 -0600
Subject: [PATCH 06/64] Created layout for condition selector

---
 .../conditionSelector/ConditionSelector.vue   | 96 ++++++++++++++++++-
 1 file changed, 92 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 9e153978..24dbd5c5 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -1,20 +1,108 @@
 <script setup lang="ts">
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const globalSettings = useGlobalSettings();
+
+const yTag = "Drug";
+const xTag = "Concentration";
+const yLabels = ["Tylenol", "Tylenol", "Tylenol"];
+const xLabels = ["0.1", "0.2", "0.2", "0.4"];
+
+
 </script>
 
 <template>
-    <div class="flex items-center justify-center align-center h-100">
-        <q-card
+    <div class="flex items-center h-100">
+        <div
             bordered
             :dark="globalSettings.darkMode"
-            class="q-ma-sm inner-card"
+            class="inner-card condition-selector-container"
         >
-        </q-card>
+            <div class="q-pa-sm items-center justify-center flex y-tag"><div>{{yTag}}</div></div>
+            <div class="q-pa-sm items-center justify-center flex condition-charts-container">
+                    <div class="q-pa-sm items-center justify-center flex y-labels">
+                        <template v-for="(labelY) in yLabels">
+                            <div>{{ labelY }}</div>
+                        </template>
+                    </div>
+                    <div class="q-pa-sm items-center justify-center column chart-area">
+                        <template v-for="(ely, idy) in yLabels">
+                            <div class="chart-row row justify-space-between align-center">
+                                <template v-for="(elx,idx) in xLabels">
+                                    <div class="chart"></div>
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="q-pa-sm items-center justify-center flex">All</div>
+                    <div class="q-pa-sm items-center justify-around row flex">
+                        <template v-for="(labelX) in xLabels">
+                            <div class="row justify-center align-center flex x-label"><div>{{ labelX }}</div></div>
+                        </template>
+                    </div>
+
+            </div>
+            <div class="q-pa-sm items-center justify-center flex">Legend</div>
+            <div class="q-pa-sm items-center justify-center flex">{{ xTag }}</div>
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
+.chart-area{
+    gap:10px;
+    .chart-row{
+        flex:1;
+        width:100%;
+        .chart{
+            width:100px;
+            height:100px;
+            margin:10px;
+            border:1px solid black;
+            box-sizing:border-box;
+        }
+    }
+}
+
+
+.condition-selector-container{
+    box-sizing:border-box;
+    grid-template-columns:80px 1fr;
+    grid-template-rows: 1fr 80px;
+    font-size:0.8rem;
+    gap: 10px;
+    display:grid;
+    width:100%;
+    height:100%;
+    box-sizing:border-box;
+    & > div:not(.condition-charts-container){
+        border:1px solid black;
+        box-sizing:border-box;
+        width:100%;
+        height:100%;
+
+    }
+    .y-tag div{
+        transform:rotate(-90deg);
+    }
+
+    .condition-charts-container{
+        grid-template-columns: 80px 1fr;
+        grid-template-rows: 1fr 80px;
+        gap: 10px;
+        display:grid;
+        width:100%;
+        height:100%;
+        &> div{
+            width:100%;
+            height:100%;
+            border:1px solid black;
+        }
+        .y-labels div{
+            transform:rotate(-90deg);
+        }
+    }
+}
+
 .inner-card {
     border-radius: 30px;
 }

From 8bd762db1c3c379479d36ce7d443aa06563ccfb0 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:53:22 -0600
Subject: [PATCH 07/64] Data Loads

---
 .../conditionSelector/ConditionChart.vue      | 84 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 1742d323..95e14563 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -1,10 +1,92 @@
 <script setup lang="ts">
+import { onMounted, ref, nextTick } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { storeToRefs } from 'pinia';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import * as vg from '@uwdata/vgplot';
+import { Query, min } from '@uwdata/mosaic-sql';
+
+// We won't use this block later.
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+const cellMetaDataStore = useCellMetaData();
+const { dataInitialized } = storeToRefs(cellMetaDataStore);
+
 const globalSettings = useGlobalSettings();
+
+// We will instead just check only if the experiment data is loaded.
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
+
+// Container for chart.
+const chartContainer = ref<HTMLElement | null>(null);
+
+// Only create charts if data is loaded and ready.
+onMounted(async () => {
+    if (experimentDataInitialized) {
+        // Wait for the DOM to update
+        await nextTick();
+        createChart(tags, chartWidth, chartHeight);
+    }
+});
+
+// Styles
+const lineColor = '#ff0000';
+const strokeWidth = 3;
+
+// These should be dynamic, not static values.
+const chartWidth = 500;
+const chartHeight = 500;
+const tags = { drug: 'drug1', concentration: 0.5 };
+
+// Takes in tag names and values, width, height. Creates chart.
+function createChart(
+    tags: { [key: string]: string | number },
+    width: number,
+    height: number
+) {
+    if (chartContainer.value) {
+        // Soon to sort data based on tags (ex: only show data with drug: drug1 and concentration: 0.5)
+
+        // Query
+        const query = vg
+            .Query()
+            .select('*')
+            .from('composite_experiment_cell_metadata');
+
+        const chart = vg.plot(
+            // Fills in area under line chart grey.
+            vg.areaY(vg.from(query), {
+                x: 'Frame',
+                y1: 0,
+                y2: 'Dry Mass (pg)',
+                fill: 'grey',
+                fillOpacity: 0.2,
+                stroke: null,
+            }),
+
+            // Plots Line Chart
+            vg.lineY(vg.from(query), {
+                x: 'Frame',
+                y: 'Dry Mass (pg)',
+                stroke: lineColor,
+                strokeWidth: strokeWidth,
+            }),
+
+            // General settings.
+            vg.width(width),
+            vg.height(height)
+
+            // Get rid of axes
+            // vg.axis(false),
+            // vg.margin(0)
+        );
+        chartContainer.value.appendChild(chart);
+    }
+}
 </script>
 
 <template>
-    <div></div>
+    <div ref="chartContainer"></div>
 </template>
 
 <style></style>

From 5c962ffac7a158611c01d9737a4ded8177d48a71 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 9 Oct 2024 16:29:48 -0600
Subject: [PATCH 08/64] Added dropdown buttons, condition selector store, and
 added styling for hover affects

---
 .../conditionSelector/ConditionSelector.vue   | 164 +++++++++++++-----
 .../ConditionSelectorDropdown.vue             |  43 +++++
 .../componentStores/conditionSelectorStore.ts |  49 ++++++
 3 files changed, 215 insertions(+), 41 deletions(-)
 create mode 100644 apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
 create mode 100644 apps/client/src/stores/componentStores/conditionSelectorStore.ts

diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 24dbd5c5..75a1adb8 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -1,13 +1,41 @@
 <script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import {useConditionSelector, type Axis} from '@/stores/componentStores/conditionSelectorStore';
+import LBtn from '../custom/LBtn.vue';
+import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue'
 const globalSettings = useGlobalSettings();
+const conditionSelector = useConditionSelector();
 
-const yTag = "Drug";
-const xTag = "Concentration";
-const yLabels = ["Tylenol", "Tylenol", "Tylenol"];
-const xLabels = ["0.1", "0.2", "0.2", "0.4"];
+const hoveredColumn = ref<number|null>(null);
+const hoveredRow = ref<number|null>(null);
 
 
+const width = computed(() => {
+    return{
+        width : "100px"
+    }
+})
+
+const height = computed(() => {
+    return{
+        "max-height" : "100px"
+    }
+})
+
+const handleLabelMouseOver = (axis:Axis, index: number) => {
+    if(axis === 'x-axis'){
+        hoveredColumn.value = index;
+    } else {
+        hoveredRow.value = index;
+    }
+}
+
+const handleLabelMouseLeave = () => {
+    hoveredColumn.value = null;
+    hoveredRow.value = null;
+}
+
 </script>
 
 <template>
@@ -17,78 +45,94 @@ const xLabels = ["0.1", "0.2", "0.2", "0.4"];
             :dark="globalSettings.darkMode"
             class="inner-card condition-selector-container"
         >
-            <div class="q-pa-sm items-center justify-center flex y-tag"><div>{{yTag}}</div></div>
+            <div class="q-pa-sm items-center justify-center flex y-tag"><div><ConditionSelectorDropDown axis="y-axis"/></div></div>
             <div class="q-pa-sm items-center justify-center flex condition-charts-container">
-                    <div class="q-pa-sm items-center justify-center flex y-labels">
-                        <template v-for="(labelY) in yLabels">
-                            <div>{{ labelY }}</div>
+                    <div class="q-pa-sm justify-space-around align-center column">
+                        <template v-for="(labelY, idy) in conditionSelector.yLabels">
+                            <div 
+                                @mouseover="() => handleLabelMouseOver('y-axis',idy)"
+                                @mouseleave="() => handleLabelMouseLeave()"
+                                class="row justify-center align-center y-label"
+                                :style="height"
+
+                            >
+                                <div 
+                                    class="row justify-center align-center flex y-label-text"
+                                >
+                                    {{ labelY }}
+                                </div>
+                            </div>
+
                         </template>
                     </div>
                     <div class="q-pa-sm items-center justify-center column chart-area">
-                        <template v-for="(ely, idy) in yLabels">
-                            <div class="chart-row row justify-space-between align-center">
-                                <template v-for="(elx,idx) in xLabels">
-                                    <div class="chart"></div>
+                        <template v-for="(ely, idy) in conditionSelector.yLabels">
+                            <div class="chart-row row justify-space-around align-center">
+                                <template v-for="(elx,idx) in conditionSelector.xLabels">
+                                    <div 
+                                        :class="`chart flex justify-center align-center ${idx === hoveredColumn || idy === hoveredRow ? 'hovered' : ''}`"
+                                        :style="width"
+
+                                    >
+                                        <div>test</div>
+                                    </div>
                                 </template>
                             </div>
                         </template>
                     </div>
                     <div class="q-pa-sm items-center justify-center flex">All</div>
-                    <div class="q-pa-sm items-center justify-around row flex">
-                        <template v-for="(labelX) in xLabels">
-                            <div class="row justify-center align-center flex x-label"><div>{{ labelX }}</div></div>
+                    <div class="q-pa-sm items-center justify-around row">
+                        <template v-for="(labelX, idx) in conditionSelector.xLabels">
+                            <div
+                                @mouseover="() => handleLabelMouseOver('x-axis',idx)"
+                                @mouseleave="() => handleLabelMouseLeave()" 
+                                class="row justify-center align-center flex x-label"
+                            >
+                                <div 
+
+                                    :style="width"
+
+                                >
+                                    {{ labelX }}
+                                </div>
+                            </div>
                         </template>
                     </div>
 
             </div>
             <div class="q-pa-sm items-center justify-center flex">Legend</div>
-            <div class="q-pa-sm items-center justify-center flex">{{ xTag }}</div>
+            <div class="q-pa-sm items-center justify-center flex x-tag"><ConditionSelectorDropDown axis="x-axis"/></div>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-.chart-area{
-    gap:10px;
-    .chart-row{
-        flex:1;
-        width:100%;
-        .chart{
-            width:100px;
-            height:100px;
-            margin:10px;
-            border:1px solid black;
-            box-sizing:border-box;
-        }
-    }
-}
-
-
 .condition-selector-container{
-    box-sizing:border-box;
     grid-template-columns:80px 1fr;
     grid-template-rows: 1fr 80px;
     font-size:0.8rem;
-    gap: 10px;
     display:grid;
     width:100%;
     height:100%;
-    box-sizing:border-box;
     & > div:not(.condition-charts-container){
         border:1px solid black;
-        box-sizing:border-box;
         width:100%;
         height:100%;
 
     }
-    .y-tag div{
-        transform:rotate(-90deg);
+    .y-tag {
+        font-size: 1.2rem;
+        div {
+            transform:rotate(-90deg);
+        }
+    }
+    .x-tag{
+        font-size:1.2rem;
     }
 
     .condition-charts-container{
         grid-template-columns: 80px 1fr;
         grid-template-rows: 1fr 80px;
-        gap: 10px;
         display:grid;
         width:100%;
         height:100%;
@@ -97,10 +141,48 @@ const xLabels = ["0.1", "0.2", "0.2", "0.4"];
             height:100%;
             border:1px solid black;
         }
-        .y-labels div{
-            transform:rotate(-90deg);
+        .y-label {
+            // transform:rotate(-90deg) translateY(-15px);
+            // margin-right:80px;
+            width:100%;
+            flex:1;
+            .y-label-text{
+                transform:rotate(-90deg);
+
+            }
+        }
+        .x-label{
+            height:100%;
+        }
+        .y-label,
+        .x-label{
+            cursor:pointer;
+            text-align:center;
+            border-radius:4px;
+            &:hover{
+                border:1px solid black;
+            }
         }
     }
+
+    .chart-area{
+        .chart-row{
+            flex:1;
+            width:100%;
+            .chart{
+                width:100px;
+                height:100px;
+                box-sizing:border-box;
+                border-radius:4px;
+                cursor:pointer;
+                &:hover,
+                &.hovered{
+                    border:1px solid black;
+                }
+            }
+        }
+    }
+
 }
 
 .inner-card {
diff --git a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
new file mode 100644
index 00000000..aee807ea
--- /dev/null
+++ b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
@@ -0,0 +1,43 @@
+
+
+<script setup lang="ts">
+import { useConditionSelector, type Axis } from '@/stores/componentStores/conditionSelectorStore';
+const conditionSelector = useConditionSelector();
+
+const props = defineProps({
+    axis: {
+        type: String,
+        default: 'confirm',
+        required:true,
+        validator: (value: string) =>
+            [
+                'x-axis',
+                'y-axis'
+            ].includes(value),
+    },
+});
+
+const tagVar = props.axis === 'x-axis' ? 'selectedXTag' : 'selectedYTag';
+
+const handleTagClick = (item:string) => {
+    conditionSelector.selectTag(item, props.axis);
+}
+
+</script>
+<template>
+    <q-btn-dropdown flat no-caps :label="conditionSelector[tagVar]">
+        <q-list>
+            <template v-for="item in conditionSelector.tags">
+                <q-item clickable v-close-popup @click="() => handleTagClick(item)">
+                    <q-item-section>
+                    <q-item-label>{{item}}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </template>
+        </q-list>
+    </q-btn-dropdown>
+</template>
+
+<style></style>
+
+
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
new file mode 100644
index 00000000..74da4251
--- /dev/null
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -0,0 +1,49 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+
+
+export type Axis = "x-axis" | "y-axis";
+
+
+export const useConditionSelector = defineStore('conditionSelector', () => {
+
+    const tags = ref<string[]>([
+        "drug",
+        "concentration",
+        "cancer_concentration"
+    ]);
+    const selectedXTag = ref<string>('drug');
+    const selectedYTag = ref<string>('concentration');
+
+    const valuesFromTags = ref<Record<string, string[]>>({
+        "drug": ['tylenol', 'advil', 'aspirin', 'ibuprofen'],
+        "concentration": ['0.3', '0.4', '0.5', '0.6', '0.7'],
+        "cancer_concentration": ['0.1', '0.2']
+    });
+
+    const xLabels = computed<string[]>(() => {
+        return valuesFromTags.value[selectedXTag.value]
+    })
+
+    const yLabels = computed<string[]>(() => {
+        return valuesFromTags.value[selectedYTag.value]
+    })
+
+
+    function selectTag(tag: string, axis: Axis) {
+        if (axis === 'x-axis') {
+            selectedXTag.value = tag;
+        } else {
+            selectedYTag.value = tag;
+        }
+    }
+
+    return {
+        tags,
+        selectedXTag,
+        selectedYTag,
+        selectTag,
+        xLabels,
+        yLabels
+    };
+});

From 9274206eee8ab3ced96064b616522284f1e02566 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:46:22 -0600
Subject: [PATCH 09/64] Creates vgplot (hard-coded size and attributes)

---
 .../conditionSelector/ConditionChart.vue      | 86 +++++++++++--------
 1 file changed, 48 insertions(+), 38 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 95e14563..8933a6f4 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -1,31 +1,26 @@
 <script setup lang="ts">
-import { onMounted, ref, nextTick } from 'vue';
+import { computed, onMounted, ref, nextTick } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { storeToRefs } from 'pinia';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import * as vg from '@uwdata/vgplot';
-import { Query, min } from '@uwdata/mosaic-sql';
-
-// We won't use this block later.
-import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
-const cellMetaDataStore = useCellMetaData();
-const { dataInitialized } = storeToRefs(cellMetaDataStore);
 
+// Will use soon for dark mode.
 const globalSettings = useGlobalSettings();
 
-// We will instead just check only if the experiment data is loaded.
+// Checks if experiment data is initialized
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
 
-// Only create charts if data is loaded and ready.
+// *** Change to watch statement
 onMounted(async () => {
+    // Waits for experiment data to be loaded
     if (experimentDataInitialized) {
-        // Wait for the DOM to update
         await nextTick();
-        createChart(tags, chartWidth, chartHeight);
+        createChart(tags, xAxisName, yAxisName, chartWidth, chartHeight);
     }
 });
 
@@ -33,52 +28,67 @@ onMounted(async () => {
 const lineColor = '#ff0000';
 const strokeWidth = 3;
 
-// These should be dynamic, not static values.
+// These are examples. These should be dynamic, not static values.
 const chartWidth = 500;
 const chartHeight = 500;
 const tags = { drug: 'drug1', concentration: 0.5 };
+const xAxisName = 'Frame';
+const yAxisName = 'Dry Mass (pg)';
 
 // Takes in tag names and values, width, height. Creates chart.
 function createChart(
     tags: { [key: string]: string | number },
+    xAxisName: string,
+    yAxisName: string,
     width: number,
     height: number
 ) {
     if (chartContainer.value) {
         // Soon to sort data based on tags (ex: only show data with drug: drug1 and concentration: 0.5)
+        const tagSelection = computed(() => vg.Selection.intersect());
+        // const query =
+        //    "SELECT * FROM current_experiment_cell_metadata WHERE drug = 'drug1' AND concentration = 0.5";
+        // const source = ;
+        // const predicate = query;
+        // const clause = { source, predicate };
+        // tagSelection.value.update(clause);
 
-        // Query
-        const query = vg
-            .Query()
-            .select('*')
-            .from('composite_experiment_cell_metadata');
-
+        // Creates chart, filtered by the selection that uses the query.
         const chart = vg.plot(
-            // Fills in area under line chart grey.
-            vg.areaY(vg.from(query), {
-                x: 'Frame',
-                y1: 0,
-                y2: 'Dry Mass (pg)',
-                fill: 'grey',
-                fillOpacity: 0.2,
-                stroke: null,
-            }),
+            // Fills in area under line chart grey (optional)
+            vg.areaY(
+                vg.from('composite_experiment_cell_metadata', {
+                    filterBy: tagSelection,
+                }),
+                {
+                    x: xAxisName,
+                    y1: 0,
+                    y2: yAxisName,
+                    fill: 'grey',
+                    fillOpacity: 0.2,
+                    stroke: null,
+                }
+            ),
 
             // Plots Line Chart
-            vg.lineY(vg.from(query), {
-                x: 'Frame',
-                y: 'Dry Mass (pg)',
-                stroke: lineColor,
-                strokeWidth: strokeWidth,
-            }),
-
+            vg.lineY(
+                vg.from('composite_experiment_cell_metadata', {
+                    filterBy: tagSelection,
+                }),
+                {
+                    x: xAxisName,
+                    y: yAxisName,
+                    stroke: lineColor,
+                    strokeWidth: strokeWidth,
+                }
+            ),
             // General settings.
             vg.width(width),
-            vg.height(height)
+            vg.height(height),
 
-            // Get rid of axes
-            // vg.axis(false),
-            // vg.margin(0)
+            // Gets rid of axes and margins!
+            vg.axis(false),
+            vg.margin(0)
         );
         chartContainer.value.appendChild(chart);
     }

From ad93c35d58a554c3aa9051da4168b33353e8118e Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 9 Oct 2024 16:53:09 -0600
Subject: [PATCH 10/64] Added resizing

---
 .../conditionSelector/ConditionSelector.vue   | 66 +++++++++++++++----
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 75a1adb8..b9c04a38 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -1,28 +1,72 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {useConditionSelector, type Axis} from '@/stores/componentStores/conditionSelectorStore';
-import LBtn from '../custom/LBtn.vue';
 import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue'
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelector();
 
+
+
+const container = ref(null);
+const gridWidth = ref(0);
+const gridHeight = ref(0);
+let resizeObserver: ResizeObserver|null = null;
+
+const observeContainerSize = () => {
+  if (!container.value) return;
+
+  resizeObserver = new ResizeObserver((entries) => {
+    for (let entry of entries) {
+      gridWidth.value = entry.contentRect.width;
+      gridHeight.value = entry.contentRect.height;
+    }
+  });
+
+  resizeObserver.observe(container.value);
+};
+
+onMounted(() => {
+  observeContainerSize();
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+
+
 const hoveredColumn = ref<number|null>(null);
 const hoveredRow = ref<number|null>(null);
 
+const size = computed(() => Math.min((gridWidth.value / conditionSelector.xLabels.length - 40),gridHeight.value / conditionSelector.yLabels.length - 40));
+
+const baseWidth = computed(() => gridWidth.value / conditionSelector.xLabels.length - 40);
+const baseHeight = computed(() => gridHeight.value / conditionSelector.yLabels.length - 40);
+
 
 const width = computed(() => {
+    console.log(width);
     return{
-        width : "100px"
+        width : `${size.value}px`
     }
 })
 
-const height = computed(() => {
+const maxHeight = computed(() => {
     return{
-        "max-height" : "100px"
+        "max-height" :  `${size.value}px`
+    }
+})
+const heightWidth = computed(() => {
+    return{
+        "height" :  `${size.value}px`,
+        "width":  `${size.value}px`
     }
 })
 
+
 const handleLabelMouseOver = (axis:Axis, index: number) => {
     if(axis === 'x-axis'){
         hoveredColumn.value = index;
@@ -53,7 +97,7 @@ const handleLabelMouseLeave = () => {
                                 @mouseover="() => handleLabelMouseOver('y-axis',idy)"
                                 @mouseleave="() => handleLabelMouseLeave()"
                                 class="row justify-center align-center y-label"
-                                :style="height"
+                                :style="maxHeight"
 
                             >
                                 <div 
@@ -65,13 +109,13 @@ const handleLabelMouseLeave = () => {
 
                         </template>
                     </div>
-                    <div class="q-pa-sm items-center justify-center column chart-area">
+                    <div ref="container" class="q-pa-sm items-center justify-center column chart-area">
                         <template v-for="(ely, idy) in conditionSelector.yLabels">
                             <div class="chart-row row justify-space-around align-center">
                                 <template v-for="(elx,idx) in conditionSelector.xLabels">
                                     <div 
                                         :class="`chart flex justify-center align-center ${idx === hoveredColumn || idy === hoveredRow ? 'hovered' : ''}`"
-                                        :style="width"
+                                        :style="heightWidth"
 
                                     >
                                         <div>test</div>
@@ -170,14 +214,14 @@ const handleLabelMouseLeave = () => {
             flex:1;
             width:100%;
             .chart{
-                width:100px;
-                height:100px;
                 box-sizing:border-box;
                 border-radius:4px;
                 cursor:pointer;
+                border:1px solid black;
                 &:hover,
                 &.hovered{
-                    border:1px solid black;
+                    // border:1px solid black;
+                    background-color:red;
                 }
             }
         }

From 942b92cde36d424eb3ae12168e948e05f2059a49 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 9 Oct 2024 16:57:16 -0600
Subject: [PATCH 11/64] Updated size slightly

---
 .../src/components/conditionSelector/ConditionSelector.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index b9c04a38..92a65e15 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -41,7 +41,7 @@ onBeforeUnmount(() => {
 const hoveredColumn = ref<number|null>(null);
 const hoveredRow = ref<number|null>(null);
 
-const size = computed(() => Math.min((gridWidth.value / conditionSelector.xLabels.length - 40),gridHeight.value / conditionSelector.yLabels.length - 40));
+const size = computed(() => Math.min((gridWidth.value / conditionSelector.xLabels.length - 20),gridHeight.value / conditionSelector.yLabels.length - 20));
 
 const baseWidth = computed(() => gridWidth.value / conditionSelector.xLabels.length - 40);
 const baseHeight = computed(() => gridHeight.value / conditionSelector.yLabels.length - 40);

From e5e3e9e8c6e5096775868cbdb71b6f9b3830af43 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 10 Oct 2024 12:38:52 -0600
Subject: [PATCH 12/64] Fixed experiment metadata table names, got condition
 chart working

---
 .../conditionSelector/ConditionChart.vue      | 71 +++++++++++--------
 .../conditionSelector/ConditionSelector.vue   |  9 +--
 .../globalSettings/UnivariateCellPlot.vue     | 10 +--
 .../datasetSelectionUntrrackedStore.ts        |  5 +-
 .../interactionStores/selectionStore.ts       |  6 +-
 5 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 8933a6f4..dc90827f 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, nextTick } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
-import { storeToRefs } from 'pinia';
+// import { storeToRefs } from 'pinia';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import * as vg from '@uwdata/vgplot';
 
@@ -9,8 +9,9 @@ import * as vg from '@uwdata/vgplot';
 const globalSettings = useGlobalSettings();
 
 // Checks if experiment data is initialized
-const datasetSelectionStore = useDatasetSelectionStore();
-const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
+// const datasetSelectionStore = useDatasetSelectionStore();
+// const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
+const { experimentDataInitialized, currentExperimentMetadata } = useDatasetSelectionStore();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
@@ -32,8 +33,8 @@ const strokeWidth = 3;
 const chartWidth = 500;
 const chartHeight = 500;
 const tags = { drug: 'drug1', concentration: 0.5 };
-const xAxisName = 'Frame';
-const yAxisName = 'Dry Mass (pg)';
+const xAxisName = 'drug';
+const yAxisName = 'concentration';
 
 // Takes in tag names and values, width, height. Creates chart.
 function createChart(
@@ -44,36 +45,50 @@ function createChart(
     height: number
 ) {
     if (chartContainer.value) {
-        // Soon to sort data based on tags (ex: only show data with drug: drug1 and concentration: 0.5)
-        const tagSelection = computed(() => vg.Selection.intersect());
-        // const query =
-        //    "SELECT * FROM current_experiment_cell_metadata WHERE drug = 'drug1' AND concentration = 0.5";
-        // const source = ;
-        // const predicate = query;
-        // const clause = { source, predicate };
-        // tagSelection.value.update(clause);
+        // If experiment metadata not initialized, return. Change this??
 
+        /*
+        
+        Idea is that we want to filter our data for this chart based on the tag values. To do this, we mimic a user selection by first creating the selection, updating the selection clause with the appropriate filter, then filtering the data based on this clause.
+
+        Since no users directly interact with the selection, this will be enough to filter our data.
+
+         */
+
+        //Create a vg selection
+        const tagSelection = computed(() => vg.Selection.single());
+        // Set a unique source so we do not chain filters
+        const source = 'test_source';
+        // Create clause with filter predicate
+        const clause = { source, predicate:"drug = 'tylenol'" };
+        // Update selection
+        tagSelection.value.update(clause);
+
+
+        // vg.coordinator().exec("CREATE TEMP TABLE test_table_five AS (SELECT * FROM test_new_composite_experiment_cell_metadata)")
         // 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('composite_experiment_cell_metadata', {
-                    filterBy: tagSelection,
-                }),
-                {
-                    x: xAxisName,
-                    y1: 0,
-                    y2: yAxisName,
-                    fill: 'grey',
-                    fillOpacity: 0.2,
-                    stroke: null,
-                }
-            ),
+            // vg.areaY(
+            //     vg.from('test_new_composite_experiment_cell_metadata',{
+            //         filterBy:tagSelection.value
+            //     }),
+            //     {
+            //         x: xAxisName,
+            //         y1: 0,
+            //         y2: yAxisName,
+            //         fill: 'grey',
+            //         fillOpacity: 0.2,
+            //         stroke: null,
+            //     }
+            // ),
 
             // Plots Line Chart
+            // Filter based on selection
+            
             vg.lineY(
-                vg.from('composite_experiment_cell_metadata', {
-                    filterBy: tagSelection,
+                vg.from(`${currentExperimentMetadata?.name}_composite_experiment_cell_metadata`,{
+                    filterBy:tagSelection.value
                 }),
                 {
                     x: xAxisName,
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 92a65e15..4226b040 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -3,11 +3,13 @@ import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {useConditionSelector, type Axis} from '@/stores/componentStores/conditionSelectorStore';
 import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue'
+import ConditionChart from './ConditionChart.vue';
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelector();
 
 
 
+
 const container = ref(null);
 const gridWidth = ref(0);
 const gridHeight = ref(0);
@@ -43,12 +45,7 @@ const hoveredRow = ref<number|null>(null);
 
 const size = computed(() => Math.min((gridWidth.value / conditionSelector.xLabels.length - 20),gridHeight.value / conditionSelector.yLabels.length - 20));
 
-const baseWidth = computed(() => gridWidth.value / conditionSelector.xLabels.length - 40);
-const baseHeight = computed(() => gridHeight.value / conditionSelector.yLabels.length - 40);
-
-
 const width = computed(() => {
-    console.log(width);
     return{
         width : `${size.value}px`
     }
@@ -118,7 +115,7 @@ const handleLabelMouseLeave = () => {
                                         :style="heightWidth"
 
                                     >
-                                        <div>test</div>
+                                        <div><ConditionChart :width="size" :height="size"/></div>
                                     </div>
                                 </template>
                             </div>
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index aeb7c661..947e8d3d 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -14,7 +14,7 @@ import { QItemSection } from 'quasar';
 
 // Initialise Data
 const datasetSelectionStore = useDatasetSelectionStore();
-const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
@@ -34,10 +34,10 @@ const props = defineProps({
 
 // Vg Plot
 function makePlot(column: string) {
-    try {
+        try {
         return vg.plot(
             // Background grey data
-            vg.rectY(vg.from('composite_experiment_cell_metadata'), {
+            vg.rectY(vg.from(`${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`), {
                 x: vg.bin(column),
                 y: vg.count(),
                 fill: '#cccccc',
@@ -45,7 +45,7 @@ function makePlot(column: string) {
             }),
             // Currently Selected Data
             vg.rectY(
-                vg.from('composite_experiment_cell_metadata', {
+                vg.from(`${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`, {
                     filterBy: props.plotBrush,
                 }),
                 {
@@ -77,6 +77,8 @@ function makePlot(column: string) {
     } catch (error) {
         emit('plot-error', props.plotName);
     }
+
+
 }
 
 // Handle Loading of Everything
diff --git a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index 024c5530..9390b254 100644
--- a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -17,7 +17,7 @@ import {
 import { useNotificationStore } from '../misc/notificationStore';
 
 export interface ExperimentMetadata {
-    // name?: string; // user friendly name
+    name: string; // user friendly name
     filename: string;
     headers: string[];
     headerTransforms?: TextTransforms; // maps things like "Time (h)" to "time"
@@ -134,10 +134,9 @@ export const useDatasetSelectionStore = defineStore(
                         ?.compositeTabularDataFilename
                 );
                 try {
-                    console.log('here')
                     await loadFileIntoDuckDb(
                         duckDbFileUrl,
-                        'composite_experiment_cell_metadata',
+                        `${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`,
                         'parquet'
                     );
                     notify({
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index 4560543e..10e2425b 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia';
 import * as vg from '@uwdata/vgplot';
 import mitt from 'mitt';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+
 
 export interface DataSelection {
     plotName: string;
@@ -108,6 +110,8 @@ export const useSelectionStore = defineStore('Selection', {
             this.setMaxRange(name);
         },
         async getMaxRange(plotName: string): Promise<[number, number]> {
+            const { currentExperimentMetadata } = useDatasetSelectionStore();
+
             try {
                 // Loading
                 let minVal = -Infinity;
@@ -124,7 +128,7 @@ export const useSelectionStore = defineStore('Selection', {
                     SELECT
                         MIN("${escapedPlotName}") AS min_value,
                         MAX("${escapedPlotName}") AS max_value
-                    FROM composite_experiment_cell_metadata
+                    FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata
                 `;
 
                 console.log('Constructed query:', query);

From 7309d3cb6daa2211e32061a19dc76c9eff5c3353 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:16:48 -0600
Subject: [PATCH 13/64] vgplot styling (grey under line chart, smoothed lines)

---
 .../conditionSelector/ConditionChart.vue      | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index dc90827f..fd1b584a 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -11,7 +11,8 @@ const globalSettings = useGlobalSettings();
 // Checks if experiment data is initialized
 // const datasetSelectionStore = useDatasetSelectionStore();
 // const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
-const { experimentDataInitialized, currentExperimentMetadata } = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } =
+    useDatasetSelectionStore();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
@@ -33,8 +34,8 @@ const strokeWidth = 3;
 const chartWidth = 500;
 const chartHeight = 500;
 const tags = { drug: 'drug1', concentration: 0.5 };
-const xAxisName = 'drug';
-const yAxisName = 'concentration';
+const xAxisName = 'Pixel Position Y (pixels)';
+const yAxisName = 'Frame';
 
 // Takes in tag names and values, width, height. Creates chart.
 function createChart(
@@ -60,41 +61,45 @@ function createChart(
         // Set a unique source so we do not chain filters
         const source = 'test_source';
         // Create clause with filter predicate
-        const clause = { source, predicate:"drug = 'tylenol'" };
+        const clause = { source, predicate: "drug = 'tylenol'" };
         // Update selection
         tagSelection.value.update(clause);
 
-
         // vg.coordinator().exec("CREATE TEMP TABLE test_table_five AS (SELECT * FROM test_new_composite_experiment_cell_metadata)")
         // 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('test_new_composite_experiment_cell_metadata',{
-            //         filterBy:tagSelection.value
-            //     }),
-            //     {
-            //         x: xAxisName,
-            //         y1: 0,
-            //         y2: yAxisName,
-            //         fill: 'grey',
-            //         fillOpacity: 0.2,
-            //         stroke: null,
-            //     }
-            // ),
-
-            // Plots Line Chart
-            // Filter based on selection
-            
+            vg.areaY(
+                vg.from(
+                    `${currentExperimentMetadata?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy: tagSelection.value,
+                    }
+                ),
+                {
+                    x: xAxisName,
+                    y1: 0,
+                    y2: yAxisName,
+                    fill: 'grey',
+                    fillOpacity: 0.2,
+                    curve: 'basis',
+                    stroke: null,
+                }
+            ),
+            // Plots Line Chart based on selection.
             vg.lineY(
-                vg.from(`${currentExperimentMetadata?.name}_composite_experiment_cell_metadata`,{
-                    filterBy:tagSelection.value
-                }),
+                vg.from(
+                    `${currentExperimentMetadata?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy: tagSelection.value,
+                    }
+                ),
                 {
                     x: xAxisName,
                     y: yAxisName,
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
+                    curve: 'basis',
                 }
             ),
             // General settings.

From cb6ec06fc45380b1c29d8b6cca4c294c96a41d44 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 15 Oct 2024 16:21:49 -0600
Subject: [PATCH 14/64] Fixed typing on handleTagClick

---
 .../components/conditionSelector/ConditionSelectorDropdown.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
index aee807ea..e51cd95e 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
@@ -20,7 +20,8 @@ const props = defineProps({
 const tagVar = props.axis === 'x-axis' ? 'selectedXTag' : 'selectedYTag';
 
 const handleTagClick = (item:string) => {
-    conditionSelector.selectTag(item, props.axis);
+    const axis = props.axis as Axis
+    conditionSelector.selectTag(item, axis);
 }
 
 </script>

From ef1a3b42ab887434abf64a3aaefc451b08fd6d7a Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:29:56 -0600
Subject: [PATCH 15/64] ConditionChart gets passed 'props' to create charts.
 Linting issues changed in condition selector.

---
 .../conditionSelector/ConditionChart.vue      |  30 +-
 .../conditionSelector/ConditionSelector.vue   | 309 ++++++++++--------
 2 files changed, 194 insertions(+), 145 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index fd1b584a..03998699 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -5,6 +5,16 @@ import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore'
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import * as vg from '@uwdata/vgplot';
 
+// Props from parent component
+// Accept props from the parent component
+const props = defineProps<{
+    tags: { [key: string]: string | number };
+    xAxisName: string;
+    yAxisName: string;
+    width: number;
+    height: number;
+}>();
+
 // Will use soon for dark mode.
 const globalSettings = useGlobalSettings();
 
@@ -22,7 +32,13 @@ onMounted(async () => {
     // Waits for experiment data to be loaded
     if (experimentDataInitialized) {
         await nextTick();
-        createChart(tags, xAxisName, yAxisName, chartWidth, chartHeight);
+        createChart(
+            props.tags,
+            props.xAxisName,
+            props.yAxisName,
+            props.width,
+            props.height
+        );
     }
 });
 
@@ -31,11 +47,11 @@ const lineColor = '#ff0000';
 const strokeWidth = 3;
 
 // These are examples. These should be dynamic, not static values.
-const chartWidth = 500;
-const chartHeight = 500;
-const tags = { drug: 'drug1', concentration: 0.5 };
-const xAxisName = 'Pixel Position Y (pixels)';
-const yAxisName = 'Frame';
+// const chartWidth = 500;
+// const chartHeight = 500;
+// const tags = { drug: 'drug1', concentration: 0.5 };
+// const xAxisName = 'Pixel Position Y (pixels)';
+// const yAxisName = 'Frame';
 
 // Takes in tag names and values, width, height. Creates chart.
 function createChart(
@@ -55,7 +71,7 @@ function createChart(
         Since no users directly interact with the selection, this will be enough to filter our data.
 
          */
-
+        //console.log('Test');
         //Create a vg selection
         const tagSelection = computed(() => vg.Selection.single());
         // Set a unique source so we do not chain filters
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 4226b040..70e2f3d7 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -1,82 +1,83 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
-import {useConditionSelector, type Axis} from '@/stores/componentStores/conditionSelectorStore';
-import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue'
+import {
+    useConditionSelector,
+    type Axis,
+} from '@/stores/componentStores/conditionSelectorStore';
+import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue';
 import ConditionChart from './ConditionChart.vue';
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelector();
 
-
-
-
 const container = ref(null);
 const gridWidth = ref(0);
 const gridHeight = ref(0);
-let resizeObserver: ResizeObserver|null = null;
+let resizeObserver: ResizeObserver | null = null;
 
 const observeContainerSize = () => {
-  if (!container.value) return;
+    if (!container.value) return;
 
-  resizeObserver = new ResizeObserver((entries) => {
-    for (let entry of entries) {
-      gridWidth.value = entry.contentRect.width;
-      gridHeight.value = entry.contentRect.height;
-    }
-  });
+    resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+            gridWidth.value = entry.contentRect.width;
+            gridHeight.value = entry.contentRect.height;
+        }
+    });
 
-  resizeObserver.observe(container.value);
+    resizeObserver.observe(container.value);
 };
 
 onMounted(() => {
-  observeContainerSize();
+    observeContainerSize();
 });
 
 onBeforeUnmount(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-  }
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
 });
 
+const hoveredColumn = ref<number | null>(null);
+const hoveredRow = ref<number | null>(null);
 
-
-const hoveredColumn = ref<number|null>(null);
-const hoveredRow = ref<number|null>(null);
-
-const size = computed(() => Math.min((gridWidth.value / conditionSelector.xLabels.length - 20),gridHeight.value / conditionSelector.yLabels.length - 20));
+const size = computed(() =>
+    Math.min(
+        gridWidth.value / conditionSelector.xLabels.length - 20,
+        gridHeight.value / conditionSelector.yLabels.length - 20
+    )
+);
 
 const width = computed(() => {
-    return{
-        width : `${size.value}px`
-    }
-})
+    return {
+        width: `${size.value}px`,
+    };
+});
 
 const maxHeight = computed(() => {
-    return{
-        "max-height" :  `${size.value}px`
-    }
-})
+    return {
+        'max-height': `${size.value}px`,
+    };
+});
 const heightWidth = computed(() => {
-    return{
-        "height" :  `${size.value}px`,
-        "width":  `${size.value}px`
-    }
-})
-
+    return {
+        height: `${size.value}px`,
+        width: `${size.value}px`,
+    };
+});
 
-const handleLabelMouseOver = (axis:Axis, index: number) => {
-    if(axis === 'x-axis'){
+const handleLabelMouseOver = (axis: Axis, index: number) => {
+    if (axis === 'x-axis') {
         hoveredColumn.value = index;
     } else {
         hoveredRow.value = index;
     }
-}
+};
 
 const handleLabelMouseLeave = () => {
     hoveredColumn.value = null;
     hoveredRow.value = null;
-}
-
+};
 </script>
 
 <template>
@@ -86,144 +87,176 @@ const handleLabelMouseLeave = () => {
             :dark="globalSettings.darkMode"
             class="inner-card condition-selector-container"
         >
-            <div class="q-pa-sm items-center justify-center flex y-tag"><div><ConditionSelectorDropDown axis="y-axis"/></div></div>
-            <div class="q-pa-sm items-center justify-center flex condition-charts-container">
-                    <div class="q-pa-sm justify-space-around align-center column">
-                        <template v-for="(labelY, idy) in conditionSelector.yLabels">
-                            <div 
-                                @mouseover="() => handleLabelMouseOver('y-axis',idy)"
-                                @mouseleave="() => handleLabelMouseLeave()"
-                                class="row justify-center align-center y-label"
-                                :style="maxHeight"
-
+            <div class="q-pa-sm items-center justify-center flex y-tag">
+                <div><ConditionSelectorDropDown axis="y-axis" /></div>
+            </div>
+            <div
+                class="q-pa-sm items-center justify-center flex condition-charts-container"
+            >
+                <div class="q-pa-sm justify-space-around align-center column">
+                    <template
+                        v-for="(labelY, idy) in conditionSelector.yLabels"
+                        :key="idy"
+                    >
+                        <div
+                            @mouseover="
+                                () => handleLabelMouseOver('y-axis', idy)
+                            "
+                            @mouseleave="() => handleLabelMouseLeave()"
+                            class="row justify-center align-center y-label"
+                            :style="maxHeight"
+                        >
+                            <div
+                                class="row justify-center align-center flex y-label-text"
                             >
-                                <div 
-                                    class="row justify-center align-center flex y-label-text"
-                                >
-                                    {{ labelY }}
-                                </div>
+                                {{ labelY }}
                             </div>
-
-                        </template>
-                    </div>
-                    <div ref="container" class="q-pa-sm items-center justify-center column chart-area">
-                        <template v-for="(ely, idy) in conditionSelector.yLabels">
-                            <div class="chart-row row justify-space-around align-center">
-                                <template v-for="(elx,idx) in conditionSelector.xLabels">
-                                    <div 
-                                        :class="`chart flex justify-center align-center ${idx === hoveredColumn || idy === hoveredRow ? 'hovered' : ''}`"
-                                        :style="heightWidth"
-
-                                    >
-                                        <div><ConditionChart :width="size" :height="size"/></div>
-                                    </div>
-                                </template>
-                            </div>
-                        </template>
-                    </div>
-                    <div class="q-pa-sm items-center justify-center flex">All</div>
-                    <div class="q-pa-sm items-center justify-around row">
-                        <template v-for="(labelX, idx) in conditionSelector.xLabels">
-                            <div
-                                @mouseover="() => handleLabelMouseOver('x-axis',idx)"
-                                @mouseleave="() => handleLabelMouseLeave()" 
-                                class="row justify-center align-center flex x-label"
+                        </div>
+                    </template>
+                </div>
+                <div
+                    ref="container"
+                    class="q-pa-sm items-center justify-center column chart-area"
+                >
+                    <template
+                        v-for="(ely, idy) in conditionSelector.yLabels"
+                        :key="idy"
+                    >
+                        <div
+                            class="chart-row row justify-space-around align-center"
+                        >
+                            <template
+                                v-for="(elx, idx) in conditionSelector.xLabels"
+                                :key="idx"
                             >
-                                <div 
-
-                                    :style="width"
-
+                                <div
+                                    :class="`chart flex justify-center align-center ${
+                                        idx === hoveredColumn ||
+                                        idy === hoveredRow
+                                            ? 'hovered'
+                                            : ''
+                                    }`"
+                                    :style="heightWidth"
                                 >
-                                    {{ labelX }}
+                                    <div>
+                                        <ConditionChart
+                                            :width="size"
+                                            :height="size"
+                                            :tags="{
+                                                drug: 'drug1',
+                                                concentration: 0.5,
+                                            }"
+                                            :xAxisName="'Pixel Position Y (pixels)'"
+                                            :yAxisName="'Frame'"
+                                        />
+                                    </div>
                                 </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+                <div class="q-pa-sm items-center justify-center flex">All</div>
+                <div class="q-pa-sm items-center justify-around row">
+                    <template
+                        v-for="(labelX, idx) in conditionSelector.xLabels"
+                        :key="idx"
+                    >
+                        <div
+                            @mouseover="
+                                () => handleLabelMouseOver('x-axis', idx)
+                            "
+                            @mouseleave="() => handleLabelMouseLeave()"
+                            class="row justify-center align-center flex x-label"
+                        >
+                            <div :style="width">
+                                {{ labelX }}
                             </div>
-                        </template>
-                    </div>
-
+                        </div>
+                    </template>
+                </div>
             </div>
             <div class="q-pa-sm items-center justify-center flex">Legend</div>
-            <div class="q-pa-sm items-center justify-center flex x-tag"><ConditionSelectorDropDown axis="x-axis"/></div>
+            <div class="q-pa-sm items-center justify-center flex x-tag">
+                <ConditionSelectorDropDown axis="x-axis" />
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-.condition-selector-container{
-    grid-template-columns:80px 1fr;
+.condition-selector-container {
+    grid-template-columns: 80px 1fr;
     grid-template-rows: 1fr 80px;
-    font-size:0.8rem;
-    display:grid;
-    width:100%;
-    height:100%;
-    & > div:not(.condition-charts-container){
-        border:1px solid black;
-        width:100%;
-        height:100%;
-
+    font-size: 0.8rem;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    & > div:not(.condition-charts-container) {
+        border: 1px solid black;
+        width: 100%;
+        height: 100%;
     }
     .y-tag {
         font-size: 1.2rem;
         div {
-            transform:rotate(-90deg);
+            transform: rotate(-90deg);
         }
     }
-    .x-tag{
-        font-size:1.2rem;
+    .x-tag {
+        font-size: 1.2rem;
     }
 
-    .condition-charts-container{
+    .condition-charts-container {
         grid-template-columns: 80px 1fr;
         grid-template-rows: 1fr 80px;
-        display:grid;
-        width:100%;
-        height:100%;
-        &> div{
-            width:100%;
-            height:100%;
-            border:1px solid black;
+        display: grid;
+        width: 100%;
+        height: 100%;
+        & > div {
+            width: 100%;
+            height: 100%;
+            border: 1px solid black;
         }
         .y-label {
             // transform:rotate(-90deg) translateY(-15px);
             // margin-right:80px;
-            width:100%;
-            flex:1;
-            .y-label-text{
-                transform:rotate(-90deg);
-
+            width: 100%;
+            flex: 1;
+            .y-label-text {
+                transform: rotate(-90deg);
             }
         }
-        .x-label{
-            height:100%;
+        .x-label {
+            height: 100%;
         }
         .y-label,
-        .x-label{
-            cursor:pointer;
-            text-align:center;
-            border-radius:4px;
-            &:hover{
-                border:1px solid black;
+        .x-label {
+            cursor: pointer;
+            text-align: center;
+            border-radius: 4px;
+            &:hover {
+                border: 1px solid black;
             }
         }
     }
 
-    .chart-area{
-        .chart-row{
-            flex:1;
-            width:100%;
-            .chart{
-                box-sizing:border-box;
-                border-radius:4px;
-                cursor:pointer;
-                border:1px solid black;
+    .chart-area {
+        .chart-row {
+            flex: 1;
+            width: 100%;
+            .chart {
+                box-sizing: border-box;
+                border-radius: 4px;
+                cursor: pointer;
+                border: 1px solid black;
                 &:hover,
-                &.hovered{
+                &.hovered {
                     // border:1px solid black;
-                    background-color:red;
+                    background-color: red;
                 }
             }
         }
     }
-
 }
 
 .inner-card {

From 36ac5ded3fb9e8b47fd7ad49a3abe9b2439d5501 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:24:41 -0600
Subject: [PATCH 16/64] refactoring changes

---
 .../conditionSelector/ConditionChart.vue      |  2 +-
 .../conditionSelector/ConditionSelector.vue   |  4 +--
 .../ConditionSelectorDropdown.vue             | 35 ++++++++++---------
 .../componentStores/conditionSelectorStore.ts | 28 +++++++--------
 4 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 03998699..0d4a285d 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -71,7 +71,7 @@ function createChart(
         Since no users directly interact with the selection, this will be enough to filter our data.
 
          */
-        //console.log('Test');
+        console.log('Test');
         //Create a vg selection
         const tagSelection = computed(() => vg.Selection.single());
         // Set a unique source so we do not chain filters
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 70e2f3d7..80947bd0 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -146,8 +146,8 @@ const handleLabelMouseLeave = () => {
                                                 drug: 'drug1',
                                                 concentration: 0.5,
                                             }"
-                                            :xAxisName="'Pixel Position Y (pixels)'"
-                                            :yAxisName="'Frame'"
+                                            :xAxisName="'Frame'"
+                                            :yAxisName="'Dry Mass (pg)'"
                                         />
                                     </div>
                                 </div>
diff --git a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
index aee807ea..b05d68ea 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
@@ -1,36 +1,39 @@
-
-
 <script setup lang="ts">
-import { useConditionSelector, type Axis } from '@/stores/componentStores/conditionSelectorStore';
+import {
+    useConditionSelector,
+    type Axis,
+} from '@/stores/componentStores/conditionSelectorStore';
 const conditionSelector = useConditionSelector();
 
 const props = defineProps({
     axis: {
         type: String,
         default: 'confirm',
-        required:true,
-        validator: (value: string) =>
-            [
-                'x-axis',
-                'y-axis'
-            ].includes(value),
+        required: true,
+        validator: (value: string) => ['x-axis', 'y-axis'].includes(value),
     },
 });
 
 const tagVar = props.axis === 'x-axis' ? 'selectedXTag' : 'selectedYTag';
 
-const handleTagClick = (item:string) => {
+const handleTagClick = (item: string) => {
     conditionSelector.selectTag(item, props.axis);
-}
-
+};
 </script>
 <template>
     <q-btn-dropdown flat no-caps :label="conditionSelector[tagVar]">
         <q-list>
-            <template v-for="item in conditionSelector.tags">
-                <q-item clickable v-close-popup @click="() => handleTagClick(item)">
+            <template
+                v-for="(item, index) in conditionSelector.tags"
+                :key="index"
+            >
+                <q-item
+                    clickable
+                    v-close-popup
+                    @click="() => handleTagClick(item)"
+                >
                     <q-item-section>
-                    <q-item-label>{{item}}</q-item-label>
+                        <q-item-label>{{ item }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </template>
@@ -39,5 +42,3 @@ const handleTagClick = (item:string) => {
 </template>
 
 <style></style>
-
-
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index 74da4251..e85dbc39 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -1,34 +1,30 @@
 import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
-
-export type Axis = "x-axis" | "y-axis";
-
+export type Axis = 'x-axis' | 'y-axis';
 
 export const useConditionSelector = defineStore('conditionSelector', () => {
-
     const tags = ref<string[]>([
-        "drug",
-        "concentration",
-        "cancer_concentration"
+        'drug',
+        'concentration',
+        'cancer_concentration',
     ]);
     const selectedXTag = ref<string>('drug');
     const selectedYTag = ref<string>('concentration');
 
     const valuesFromTags = ref<Record<string, string[]>>({
-        "drug": ['tylenol', 'advil', 'aspirin', 'ibuprofen'],
-        "concentration": ['0.3', '0.4', '0.5', '0.6', '0.7'],
-        "cancer_concentration": ['0.1', '0.2']
+        drug: ['tylenol', 'advil', 'aspirin', 'ibuprofen'],
+        concentration: ['0.3', '0.4', '0.5', '0.6', '0.7'],
+        cancer_concentration: ['0.1', '0.2'],
     });
 
     const xLabels = computed<string[]>(() => {
-        return valuesFromTags.value[selectedXTag.value]
-    })
+        return valuesFromTags.value[selectedXTag.value];
+    });
 
     const yLabels = computed<string[]>(() => {
-        return valuesFromTags.value[selectedYTag.value]
-    })
-
+        return valuesFromTags.value[selectedYTag.value];
+    });
 
     function selectTag(tag: string, axis: Axis) {
         if (axis === 'x-axis') {
@@ -44,6 +40,6 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         selectedYTag,
         selectTag,
         xLabels,
-        yLabels
+        yLabels,
     };
 });

From 8d666e041f87ee96fd477be4481133964c645847 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 16 Oct 2024 14:27:56 -0600
Subject: [PATCH 17/64] Added small readme

---
 apps/client/src/stores/misc/README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 apps/client/src/stores/misc/README.md

diff --git a/apps/client/src/stores/misc/README.md b/apps/client/src/stores/misc/README.md
new file mode 100644
index 00000000..53de5651
--- /dev/null
+++ b/apps/client/src/stores/misc/README.md
@@ -0,0 +1,23 @@
+# Filtering, Selecting, and Action Taxonomy
+
+Below we describe the general desired actions that a user can take when using Loon. We do not discuss uploading data in this feature.
+
+
+
+1. Experiment Level Data
+2. Location Level Data
+    - Table View
+    - Cell images
+    - Lineage view
+    - Aggregate Line Chart view
+3. Condition Selector
+4. Cell-level attribute aggregate charts
+5. Track-level attribute aggregate charts
+
+
+Selections should go in a general selection store. User can add any number of selections, each can be turned into filters.
+
+One source, many different filterBy statements that get added to each plot
+
+
+

From f9aae63881172db3a8d0550c6d6d25b37e2f4f36 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 16 Oct 2024 15:19:15 -0600
Subject: [PATCH 18/64] Fixed condition chart not loading on hot reload while
 maintaining hot reload ability.

---
 .../conditionSelector/ConditionChart.vue      | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 0d4a285d..bcd31afb 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, nextTick } from 'vue';
+import { computed, onMounted, ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 // import { storeToRefs } from 'pinia';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import * as vg from '@uwdata/vgplot';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
 
 // Props from parent component
 // Accept props from the parent component
@@ -18,20 +20,14 @@ const props = defineProps<{
 // Will use soon for dark mode.
 const globalSettings = useGlobalSettings();
 
-// Checks if experiment data is initialized
-// const datasetSelectionStore = useDatasetSelectionStore();
-// const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
-const { experimentDataInitialized, currentExperimentMetadata } =
-    useDatasetSelectionStore();
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
-
-// *** Change to watch statement
-onMounted(async () => {
-    // Waits for experiment data to be loaded
-    if (experimentDataInitialized) {
-        await nextTick();
+watch(experimentDataInitialized, async (isInitialized) => {
+    if(isInitialized){
+        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
         createChart(
             props.tags,
             props.xAxisName,
@@ -40,7 +36,8 @@ onMounted(async () => {
             props.height
         );
     }
-});
+}, {immediate : true})
+
 
 // Styles
 const lineColor = '#ff0000';
@@ -54,6 +51,8 @@ const strokeWidth = 3;
 // const yAxisName = 'Frame';
 
 // Takes in tag names and values, width, height. Creates chart.
+
+
 function createChart(
     tags: { [key: string]: string | number },
     xAxisName: string,
@@ -71,7 +70,6 @@ function createChart(
         Since no users directly interact with the selection, this will be enough to filter our data.
 
          */
-        console.log('Test');
         //Create a vg selection
         const tagSelection = computed(() => vg.Selection.single());
         // Set a unique source so we do not chain filters
@@ -87,7 +85,7 @@ function createChart(
             // Fills in area under line chart grey (optional)
             vg.areaY(
                 vg.from(
-                    `${currentExperimentMetadata?.name}_composite_experiment_cell_metadata`,
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
                         filterBy: tagSelection.value,
                     }
@@ -105,7 +103,7 @@ function createChart(
             // Plots Line Chart based on selection.
             vg.lineY(
                 vg.from(
-                    `${currentExperimentMetadata?.name}_composite_experiment_cell_metadata`,
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
                         filterBy: tagSelection.value,
                     }

From f7cc59d87a71b6da923dd75c7b1e4d78617a5b6a Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 16 Oct 2024 16:12:39 -0600
Subject: [PATCH 19/64] Labels now come from experiment.json file. Fixed hover
 effects and removed borders on condition selector.

---
 .../src/components/ConditionSelector.vue      | 21 ------
 .../conditionSelector/ConditionSelector.vue   | 65 ++++++++++++-------
 .../ConditionSelectorDropdown.vue             |  5 +-
 .../componentStores/conditionSelectorStore.ts | 47 +++++++++-----
 .../datasetSelectionUntrrackedStore.ts        |  3 +
 5 files changed, 80 insertions(+), 61 deletions(-)
 delete mode 100644 apps/client/src/components/ConditionSelector.vue

diff --git a/apps/client/src/components/ConditionSelector.vue b/apps/client/src/components/ConditionSelector.vue
deleted file mode 100644
index 9e153978..00000000
--- a/apps/client/src/components/ConditionSelector.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
-const globalSettings = useGlobalSettings();
-</script>
-
-<template>
-    <div class="flex items-center justify-center align-center h-100">
-        <q-card
-            bordered
-            :dark="globalSettings.darkMode"
-            class="q-ma-sm inner-card"
-        >
-        </q-card>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.inner-card {
-    border-radius: 30px;
-}
-</style>
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 80947bd0..f358cb32 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -40,6 +40,7 @@ onBeforeUnmount(() => {
 
 const hoveredColumn = ref<number | null>(null);
 const hoveredRow = ref<number | null>(null);
+const hoveredAll = ref<boolean>(false);
 
 const size = computed(() =>
     Math.min(
@@ -78,6 +79,15 @@ const handleLabelMouseLeave = () => {
     hoveredColumn.value = null;
     hoveredRow.value = null;
 };
+
+const handleAllMouseOver = () => {
+    hoveredAll.value = true;
+}
+
+const handleAllMouseLeave = () => {
+    hoveredAll.value = false;
+}
+
 </script>
 
 <template>
@@ -87,13 +97,13 @@ const handleLabelMouseLeave = () => {
             :dark="globalSettings.darkMode"
             class="inner-card condition-selector-container"
         >
-            <div class="q-pa-sm items-center justify-center flex y-tag">
+            <div class="items-center justify-center flex y-tag">
                 <div><ConditionSelectorDropDown axis="y-axis" /></div>
             </div>
             <div
-                class="q-pa-sm items-center justify-center flex condition-charts-container"
+                class="items-center justify-center flex condition-charts-container"
             >
-                <div class="q-pa-sm justify-space-around align-center column">
+                <div class="justify-space-around align-center column">
                     <template
                         v-for="(labelY, idy) in conditionSelector.yLabels"
                         :key="idy"
@@ -103,7 +113,7 @@ const handleLabelMouseLeave = () => {
                                 () => handleLabelMouseOver('y-axis', idy)
                             "
                             @mouseleave="() => handleLabelMouseLeave()"
-                            class="row justify-center align-center y-label"
+                            :class="`row justify-center align-center y-label ${hoveredAll ? 'hovered' : ''}`"
                             :style="maxHeight"
                         >
                             <div
@@ -116,7 +126,7 @@ const handleLabelMouseLeave = () => {
                 </div>
                 <div
                     ref="container"
-                    class="q-pa-sm items-center justify-center column chart-area"
+                    class="items-center justify-center column chart-area"
                 >
                     <template
                         v-for="(ely, idy) in conditionSelector.yLabels"
@@ -132,7 +142,7 @@ const handleLabelMouseLeave = () => {
                                 <div
                                     :class="`chart flex justify-center align-center ${
                                         idx === hoveredColumn ||
-                                        idy === hoveredRow
+                                        idy === hoveredRow || hoveredAll
                                             ? 'hovered'
                                             : ''
                                     }`"
@@ -155,8 +165,8 @@ const handleLabelMouseLeave = () => {
                         </div>
                     </template>
                 </div>
-                <div class="q-pa-sm items-center justify-center flex">All</div>
-                <div class="q-pa-sm items-center justify-around row">
+                <div class="items-center justify-center flex all-section" @mouseover="handleAllMouseOver" @mouseleave="handleAllMouseLeave">All</div>
+                <div class="items-center justify-around row">
                     <template
                         v-for="(labelX, idx) in conditionSelector.xLabels"
                         :key="idx"
@@ -166,7 +176,7 @@ const handleLabelMouseLeave = () => {
                                 () => handleLabelMouseOver('x-axis', idx)
                             "
                             @mouseleave="() => handleLabelMouseLeave()"
-                            class="row justify-center align-center flex x-label"
+                            :class="`row justify-center align-center flex x-label ${hoveredAll ? 'hovered' : ''}`"
                         >
                             <div :style="width">
                                 {{ labelX }}
@@ -175,8 +185,8 @@ const handleLabelMouseLeave = () => {
                     </template>
                 </div>
             </div>
-            <div class="q-pa-sm items-center justify-center flex">Legend</div>
-            <div class="q-pa-sm items-center justify-center flex x-tag">
+            <div class="items-center justify-center flex">Legend</div>
+            <div class="items-center justify-center flex x-tag">
                 <ConditionSelectorDropDown axis="x-axis" />
             </div>
         </div>
@@ -185,14 +195,14 @@ const handleLabelMouseLeave = () => {
 
 <style scoped lang="scss">
 .condition-selector-container {
-    grid-template-columns: 80px 1fr;
-    grid-template-rows: 1fr 80px;
+    grid-template-columns: 60px 1fr;
+    grid-template-rows: 1fr 60px;
     font-size: 0.8rem;
     display: grid;
     width: 100%;
     height: 100%;
     & > div:not(.condition-charts-container) {
-        border: 1px solid black;
+        // border: 1px solid black;
         width: 100%;
         height: 100%;
     }
@@ -207,15 +217,15 @@ const handleLabelMouseLeave = () => {
     }
 
     .condition-charts-container {
-        grid-template-columns: 80px 1fr;
-        grid-template-rows: 1fr 80px;
+        grid-template-columns: 60px 1fr;
+        grid-template-rows: 1fr 60px;
         display: grid;
         width: 100%;
         height: 100%;
         & > div {
             width: 100%;
             height: 100%;
-            border: 1px solid black;
+            // border: 1px solid black;
         }
         .y-label {
             // transform:rotate(-90deg) translateY(-15px);
@@ -223,7 +233,7 @@ const handleLabelMouseLeave = () => {
             width: 100%;
             flex: 1;
             .y-label-text {
-                transform: rotate(-90deg);
+                // transform: rotate(-90deg);
             }
         }
         .x-label {
@@ -233,7 +243,8 @@ const handleLabelMouseLeave = () => {
         .x-label {
             cursor: pointer;
             text-align: center;
-            border-radius: 4px;
+            border-radius: 2px;
+            &.hovered,
             &:hover {
                 border: 1px solid black;
             }
@@ -246,19 +257,27 @@ const handleLabelMouseLeave = () => {
             width: 100%;
             .chart {
                 box-sizing: border-box;
-                border-radius: 4px;
+                padding:5px;
+                border-radius: 2px;
                 cursor: pointer;
-                border: 1px solid black;
+                // border: 1px solid black;
                 &:hover,
                 &.hovered {
-                    // border:1px solid black;
-                    background-color: red;
+                    border:1px solid black;
                 }
             }
         }
     }
 }
 
+.all-section{
+    border-radius:2px;
+    &:hover{
+        border:1px solid black;
+    }
+}
+
+
 .inner-card {
     border-radius: 30px;
 }
diff --git a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
index 148ad620..44527fbb 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
@@ -3,8 +3,9 @@ import {
     useConditionSelector,
     type Axis,
 } from '@/stores/componentStores/conditionSelectorStore';
+import { storeToRefs } from 'pinia';
 const conditionSelector = useConditionSelector();
-
+const {currentExperimentTags} = storeToRefs(conditionSelector);
 const props = defineProps({
     axis: {
         type: String,
@@ -25,7 +26,7 @@ const handleTagClick = (item: string) => {
     <q-btn-dropdown flat no-caps :label="conditionSelector[tagVar]">
         <q-list>
             <template
-                v-for="(item, index) in conditionSelector.tags"
+                v-for="(item, index) in Object.keys(currentExperimentTags)"
                 :key="index"
             >
                 <q-item
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index e85dbc39..ca98950c 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -1,29 +1,46 @@
 import { ref, computed } from 'vue';
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
+import { useDatasetSelectionStore, type LocationMetadata } from '../dataStores/datasetSelectionUntrrackedStore';
 
 export type Axis = 'x-axis' | 'y-axis';
 
 export const useConditionSelector = defineStore('conditionSelector', () => {
-    const tags = ref<string[]>([
-        'drug',
-        'concentration',
-        'cancer_concentration',
-    ]);
-    const selectedXTag = ref<string>('drug');
-    const selectedYTag = ref<string>('concentration');
+    const datasetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata } = storeToRefs(datasetSelectionStore)
+
+    const currentExperimentTags = computed((): Record<string, string[]> => {
+        const tempTags: Record<string, string[]> = {};
+        currentExperimentMetadata.value?.locationMetadataList.forEach((locationMetadata: LocationMetadata) => {
+            if (locationMetadata.tags) {
+
+                Object.entries(locationMetadata.tags).forEach((entry: [string, string]) => {
+                    let tempTagKey = entry[0];
+                    let tempTagValue = entry[1];
+
+                    if (!(tempTagKey in tempTags)) {
+                        tempTags[tempTagKey] = [];
+                    }
 
-    const valuesFromTags = ref<Record<string, string[]>>({
-        drug: ['tylenol', 'advil', 'aspirin', 'ibuprofen'],
-        concentration: ['0.3', '0.4', '0.5', '0.6', '0.7'],
-        cancer_concentration: ['0.1', '0.2'],
+                    if (!(tempTags[tempTagKey].includes(tempTagValue))) {
+                        tempTags[tempTagKey].push(tempTagValue)
+                    }
+                })
+
+            }
+        });
+        return tempTags;
     });
 
+
+    const selectedXTag = ref<string>('drug');
+    const selectedYTag = ref<string>('concentration');
+
     const xLabels = computed<string[]>(() => {
-        return valuesFromTags.value[selectedXTag.value];
+        return currentExperimentTags.value[selectedXTag.value];
     });
 
     const yLabels = computed<string[]>(() => {
-        return valuesFromTags.value[selectedYTag.value];
+        return currentExperimentTags.value[selectedYTag.value];
     });
 
     function selectTag(tag: string, axis: Axis) {
@@ -35,11 +52,11 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
     }
 
     return {
-        tags,
         selectedXTag,
         selectedYTag,
         selectTag,
         xLabels,
         yLabels,
+        currentExperimentTags
     };
 });
diff --git a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index 9390b254..c0633f37 100644
--- a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -28,12 +28,15 @@ export interface ExperimentMetadata {
     compositeTabularDataFilename?: string;
 }
 
+export type Tags = Record<string, string>;
+
 export interface LocationMetadata {
     // data related to a single imaging location
     id: string;
     tabularDataFilename: string;
     imageDataFilename?: string;
     segmentationsFolder?: string;
+    tags?: Tags;
     // name?: string; // user friendly name
     // condition?: string; // experimental condition // TODO: - does this need to be an array
     // plate?: string;

From 5286a17562b992607765f5e0277481ef1cb4992a Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 16 Oct 2024 16:29:46 -0600
Subject: [PATCH 20/64] Made vg plot dynamic based on tags

---
 .../conditionSelector/ConditionChart.vue         | 12 ++++++++----
 .../conditionSelector/ConditionSelector.vue      | 16 +++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index bcd31afb..539e6f5b 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -10,7 +10,7 @@ import { storeToRefs } from 'pinia';
 // Props from parent component
 // Accept props from the parent component
 const props = defineProps<{
-    tags: { [key: string]: string | number };
+    tags: [string,string][];
     xAxisName: string;
     yAxisName: string;
     width: number;
@@ -41,7 +41,7 @@ watch(experimentDataInitialized, async (isInitialized) => {
 
 // Styles
 const lineColor = '#ff0000';
-const strokeWidth = 3;
+const strokeWidth = 1;
 
 // These are examples. These should be dynamic, not static values.
 // const chartWidth = 500;
@@ -54,13 +54,14 @@ const strokeWidth = 3;
 
 
 function createChart(
-    tags: { [key: string]: string | number },
+    tags: [string,string][],
     xAxisName: string,
     yAxisName: string,
     width: number,
     height: number
 ) {
     if (chartContainer.value) {
+        console.log(tags);
         // If experiment metadata not initialized, return. Change this??
 
         /*
@@ -75,7 +76,10 @@ function createChart(
         // Set a unique source so we do not chain filters
         const source = 'test_source';
         // Create clause with filter predicate
-        const clause = { source, predicate: "drug = 'tylenol'" };
+
+        let predicate = `${tags[0][0]} = '${tags[0][1]}' AND ${tags[1][0]} = '${tags[1][1]}'`;
+
+        const clause = { source, predicate };
         // Update selection
         tagSelection.value.update(clause);
 
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index f358cb32..fa1b5e21 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -87,7 +87,9 @@ const handleAllMouseOver = () => {
 const handleAllMouseLeave = () => {
     hoveredAll.value = false;
 }
-
+console.log(conditionSelector.currentExperimentTags);
+console.log(conditionSelector.xLabels);
+console.log('test')
 </script>
 
 <template>
@@ -152,10 +154,10 @@ const handleAllMouseLeave = () => {
                                         <ConditionChart
                                             :width="size"
                                             :height="size"
-                                            :tags="{
-                                                drug: 'drug1',
-                                                concentration: 0.5,
-                                            }"
+                                            :tags="[
+                                                [`${conditionSelector.selectedXTag}`,`${elx.toString()}`],
+                                                [`${conditionSelector.selectedYTag}`,`${ely.toString()}`]
+                                            ]"
                                             :xAxisName="'Frame'"
                                             :yAxisName="'Dry Mass (pg)'"
                                         />
@@ -228,13 +230,9 @@ const handleAllMouseLeave = () => {
             // border: 1px solid black;
         }
         .y-label {
-            // transform:rotate(-90deg) translateY(-15px);
             // margin-right:80px;
             width: 100%;
             flex: 1;
-            .y-label-text {
-                // transform: rotate(-90deg);
-            }
         }
         .x-label {
             height: 100%;

From 5fe2c040ec8ac2445e3574626647cab4a871711c Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 16 Oct 2024 16:35:43 -0600
Subject: [PATCH 21/64] Changed predicate to const

---
 apps/client/src/components/conditionSelector/ConditionChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 539e6f5b..051508d4 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -77,7 +77,7 @@ function createChart(
         const source = 'test_source';
         // Create clause with filter predicate
 
-        let predicate = `${tags[0][0]} = '${tags[0][1]}' AND ${tags[1][0]} = '${tags[1][1]}'`;
+        const predicate = `${tags[0][0]} = '${tags[0][1]}' AND ${tags[1][0]} = '${tags[1][1]}'`;
 
         const clause = { source, predicate };
         // Update selection

From 4ab12084d131a181f94f77020e427510fe784f3c Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 16 Oct 2024 16:47:23 -0600
Subject: [PATCH 22/64] Fixed condition selector vue not re-rendering during
 label update.

---
 .../conditionSelector/ConditionSelector.vue   | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index fa1b5e21..70362be8 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -7,8 +7,10 @@ import {
 } from '@/stores/componentStores/conditionSelectorStore';
 import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue';
 import ConditionChart from './ConditionChart.vue';
+import { storeToRefs } from 'pinia';
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelector();
+const {xLabels, yLabels,currentExperimentTags,selectedXTag,selectedYTag } = storeToRefs(conditionSelector)
 
 const container = ref(null);
 const gridWidth = ref(0);
@@ -44,8 +46,8 @@ const hoveredAll = ref<boolean>(false);
 
 const size = computed(() =>
     Math.min(
-        gridWidth.value / conditionSelector.xLabels.length - 20,
-        gridHeight.value / conditionSelector.yLabels.length - 20
+        gridWidth.value / xLabels.value.length - 20,
+        gridHeight.value / yLabels.value.length - 20
     )
 );
 
@@ -87,9 +89,19 @@ const handleAllMouseOver = () => {
 const handleAllMouseLeave = () => {
     hoveredAll.value = false;
 }
-console.log(conditionSelector.currentExperimentTags);
-console.log(conditionSelector.xLabels);
+console.log(currentExperimentTags.value);
+console.log(xLabels.value);
 console.log('test')
+
+
+watch([selectedXTag, selectedYTag], () => {
+  console.log('Selected X Tag changed:', selectedXTag.value);
+  console.log('Selected Y Tag changed:', selectedYTag.value);
+  console.log('Updated xLabels:', xLabels.value);
+  console.log('Updated yLabels:', yLabels.value);
+});
+
+
 </script>
 
 <template>
@@ -107,7 +119,7 @@ console.log('test')
             >
                 <div class="justify-space-around align-center column">
                     <template
-                        v-for="(labelY, idy) in conditionSelector.yLabels"
+                        v-for="(labelY, idy) in yLabels"
                         :key="idy"
                     >
                         <div
@@ -131,15 +143,15 @@ console.log('test')
                     class="items-center justify-center column chart-area"
                 >
                     <template
-                        v-for="(ely, idy) in conditionSelector.yLabels"
-                        :key="idy"
+                        v-for="(ely, idy) in yLabels"
+                        :key="`${idy}-${yLabels.join(',')}`"
                     >
                         <div
                             class="chart-row row justify-space-around align-center"
                         >
                             <template
-                                v-for="(elx, idx) in conditionSelector.xLabels"
-                                :key="idx"
+                                v-for="(elx, idx) in xLabels"
+                                :key="`${idx}-${xLabels.join(',')}`"
                             >
                                 <div
                                     :class="`chart flex justify-center align-center ${
@@ -155,8 +167,8 @@ console.log('test')
                                             :width="size"
                                             :height="size"
                                             :tags="[
-                                                [`${conditionSelector.selectedXTag}`,`${elx.toString()}`],
-                                                [`${conditionSelector.selectedYTag}`,`${ely.toString()}`]
+                                                [`${selectedXTag}`,`${elx.toString()}`],
+                                                [`${selectedYTag}`,`${ely.toString()}`]
                                             ]"
                                             :xAxisName="'Frame'"
                                             :yAxisName="'Dry Mass (pg)'"
@@ -170,7 +182,7 @@ console.log('test')
                 <div class="items-center justify-center flex all-section" @mouseover="handleAllMouseOver" @mouseleave="handleAllMouseLeave">All</div>
                 <div class="items-center justify-around row">
                     <template
-                        v-for="(labelX, idx) in conditionSelector.xLabels"
+                        v-for="(labelX, idx) in xLabels"
                         :key="idx"
                     >
                         <div

From 05dc8da1803c665efbcd1c8d6f2806c0c6fbc33e Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Mon, 21 Oct 2024 17:46:33 -0600
Subject: [PATCH 23/64] Added avg to the Line chart views. Added
 "duckdb_findings.txt" file for temp info

---
 .../conditionSelector/ConditionChart.vue      |  7 +++--
 .../conditionSelector/duckdb_findings.txt     | 27 +++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 apps/client/src/components/conditionSelector/duckdb_findings.txt

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 051508d4..cef52374 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -53,7 +53,7 @@ const strokeWidth = 1;
 // Takes in tag names and values, width, height. Creates chart.
 
 
-function createChart(
+async function createChart(
     tags: [string,string][],
     xAxisName: string,
     yAxisName: string,
@@ -83,7 +83,6 @@ function createChart(
         // Update selection
         tagSelection.value.update(clause);
 
-        // vg.coordinator().exec("CREATE TEMP TABLE test_table_five AS (SELECT * FROM test_new_composite_experiment_cell_metadata)")
         // Creates chart, filtered by the selection that uses the query.
         const chart = vg.plot(
             // Fills in area under line chart grey (optional)
@@ -97,7 +96,7 @@ function createChart(
                 {
                     x: xAxisName,
                     y1: 0,
-                    y2: yAxisName,
+                    y: vg.avg(yAxisName),
                     fill: 'grey',
                     fillOpacity: 0.2,
                     curve: 'basis',
@@ -114,7 +113,7 @@ function createChart(
                 ),
                 {
                     x: xAxisName,
-                    y: yAxisName,
+                    y: vg.avg(yAxisName),
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
diff --git a/apps/client/src/components/conditionSelector/duckdb_findings.txt b/apps/client/src/components/conditionSelector/duckdb_findings.txt
new file mode 100644
index 00000000..fac6e3cb
--- /dev/null
+++ b/apps/client/src/components/conditionSelector/duckdb_findings.txt
@@ -0,0 +1,27 @@
+DuckDB Findings
+
+
+1. Can't use type:json if we have a big int, JSON can't serialize it (this is using coordinator.query())
+2. Can't do generic select by statement and pass data into VG plot
+3. Even if we do use a different plotting structure, cant seem to figure out how to grab results from query functionality
+    -> its using apache arrow -- we can probably install something to parse this if necessary
+
+
+    Queries for quantile:
+
+    
+        const res = await vg.coordinator().query(`
+            WITH cte AS (
+                SELECT approx_quantile("Dry Mass (pg)", 0.5) AS quantile_5
+                FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata
+            )
+            SELECT 
+                CAST("Tracking ID" AS VARCHAR) as tracking_id,
+                cte.quantile_5
+            FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata
+            CROSS JOIN cte
+            ORDER BY ABS("Dry Mass (pg)" - cte.quantile_5)
+            LIMIT 1;`,
+        {'type':'json'})
+        console.log(res);
+

From 5fddef4b0d2384d2d6f93aebf5cd3ec637c3c56f Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 09:47:51 -0600
Subject: [PATCH 24/64] Added mosaic selection store. All mosaic selections now
 pass through said store. Added another test page -- will be removed during PR

---
 apps/client/src/App.vue                       |   5 +
 .../conditionSelector/ConditionChart.vue      |  70 ++++++-----
 .../conditionSelector/duckdb_findings.txt     |  22 +++-
 .../globalSettings/PlotSelector.vue           |  41 +------
 .../globalSettings/UnivariateCellPlot.vue     |  12 +-
 apps/client/src/pages/TestFilterComponent.vue |  77 ++++++++++++
 .../src/pages/TestFilterComponentTwo.vue      |  79 ++++++++++++
 apps/client/src/pages/TestPage.vue            | 112 ++++++++++++++++++
 apps/client/src/router/index.ts               |   5 +
 .../componentStores/conditionSelectorStore.ts |   4 +-
 .../stores/dataStores/mosaicSelectionStore.ts |  72 +++++++++++
 11 files changed, 412 insertions(+), 87 deletions(-)
 create mode 100644 apps/client/src/pages/TestFilterComponent.vue
 create mode 100644 apps/client/src/pages/TestFilterComponentTwo.vue
 create mode 100644 apps/client/src/pages/TestPage.vue
 create mode 100644 apps/client/src/stores/dataStores/mosaicSelectionStore.ts

diff --git a/apps/client/src/App.vue b/apps/client/src/App.vue
index 703eb7d8..f6240db7 100644
--- a/apps/client/src/App.vue
+++ b/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>
diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index cef52374..50a11610 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, nextTick} from 'vue';
+import { ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
-// import { storeToRefs } from 'pinia';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useFilterStore } from '@/stores/componentStores/filterStore';
 import * as vg from '@uwdata/vgplot';
 import { watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 // Props from parent component
 // Accept props from the parent component
@@ -22,10 +24,11 @@ const globalSettings = useGlobalSettings();
 
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+const { addConditionChartSelection } = useMosaicSelectionStore();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
-watch(experimentDataInitialized, async (isInitialized) => {
+watch(experimentDataInitialized, async (isInitialized) => {    
     if(isInitialized){
         await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
         createChart(
@@ -36,21 +39,17 @@ watch(experimentDataInitialized, async (isInitialized) => {
             props.height
         );
     }
-}, {immediate : true})
+}, {immediate : true, deep:true})
 
 
-// Styles
-const lineColor = '#ff0000';
-const strokeWidth = 1;
+// Creates a new set of selections and adds them to an overall list that is updated whenever general mosaicSelection 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. mosaicSelection).
+const {baseSelection, filteredSelection } = addConditionChartSelection(props.tags)
 
-// These are examples. These should be dynamic, not static values.
-// const chartWidth = 500;
-// const chartHeight = 500;
-// const tags = { drug: 'drug1', concentration: 0.5 };
-// const xAxisName = 'Pixel Position Y (pixels)';
-// const yAxisName = 'Frame';
 
-// Takes in tag names and values, width, height. Creates chart.
+// Styles
+const lineColor = '#ff0000';
+const strokeWidth = 3;
 
 
 async function createChart(
@@ -61,27 +60,10 @@ async function createChart(
     height: number
 ) {
     if (chartContainer.value) {
-        console.log(tags);
-        // If experiment metadata not initialized, return. Change this??
-
-        /*
-        
-        Idea is that we want to filter our data for this chart based on the tag values. To do this, we mimic a user selection by first creating the selection, updating the selection clause with the appropriate filter, then filtering the data based on this clause.
-
-        Since no users directly interact with the selection, this will be enough to filter our data.
 
-         */
-        //Create a vg selection
-        const tagSelection = computed(() => vg.Selection.single());
-        // Set a unique source so we do not chain filters
-        const source = 'test_source';
-        // Create clause with filter predicate
-
-        const predicate = `${tags[0][0]} = '${tags[0][1]}' AND ${tags[1][0]} = '${tags[1][1]}'`;
-
-        const clause = { source, predicate };
-        // Update selection
-        tagSelection.value.update(clause);
+        while (chartContainer.value.firstChild) {
+            chartContainer.value.removeChild(chartContainer.value.firstChild);
+        }
 
         // Creates chart, filtered by the selection that uses the query.
         const chart = vg.plot(
@@ -90,7 +72,7 @@ async function createChart(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: tagSelection.value,
+                        filterBy: baseSelection
                     }
                 ),
                 {
@@ -103,12 +85,28 @@ async function createChart(
                     stroke: null,
                 }
             ),
+            vg.lineY(
+                vg.from(
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy: baseSelection,
+                    }
+                ),
+                {
+                    x: xAxisName,
+                    y: vg.avg(yAxisName),
+                    stroke: lineColor,
+                    strokeWidth: strokeWidth,
+                    curve: 'basis',
+                    opacity:0.3
+                }
+            ),
             // Plots Line Chart based on selection.
             vg.lineY(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: tagSelection.value,
+                        filterBy: filteredSelection,
                     }
                 ),
                 {
diff --git a/apps/client/src/components/conditionSelector/duckdb_findings.txt b/apps/client/src/components/conditionSelector/duckdb_findings.txt
index fac6e3cb..3cf20fd6 100644
--- a/apps/client/src/components/conditionSelector/duckdb_findings.txt
+++ b/apps/client/src/components/conditionSelector/duckdb_findings.txt
@@ -7,17 +7,21 @@ DuckDB Findings
     -> its using apache arrow -- we can probably install something to parse this if necessary
 
 
-    Queries for quantile:
+    Queries for quantile -- finds average mass of every tracking id. takes the quantile of the average mass:
 
     
         const res = await vg.coordinator().query(`
-            WITH cte AS (
-                SELECT approx_quantile("Dry Mass (pg)", 0.5) AS quantile_5
+        WITH cte AS (
+            SELECT approx_quantile(avg_mass, 0.5) as quantile_5
+            FROM (
+                SELECT avg("Dry Mass (pg)") as avg_mass
                 FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata
+                GROUP BY tracking_id, "Location"
             )
-            SELECT 
-                CAST("Tracking ID" AS VARCHAR) as tracking_id,
-                cte.quantile_5
+        )
+        SELECT 
+            CAST("Tracking ID" AS VARCHAR),
+            cte.quantile_5
             FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata
             CROSS JOIN cte
             ORDER BY ABS("Dry Mass (pg)" - cte.quantile_5)
@@ -25,3 +29,9 @@ DuckDB Findings
         {'type':'json'})
         console.log(res);
 
+
+
+
+
+    SELECT tracking_id, location, avg("Dry Mass (pg)") from table group by tracking_id, location;
+
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 23911791..85ae7dac 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch } from 'vue';
 import { QBtn, QDialog, QCard, QCardSection, QCardActions } from 'quasar';
-import * as vg from '@uwdata/vgplot';
 import { storeToRefs } from 'pinia';
 import UnivariateCellPlot from './UnivariateCellPlot.vue';
 import {
@@ -11,8 +10,9 @@ import {
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useNotificationStore } from '@/stores/misc/notificationStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 const datasetSelectionStore = useDatasetSelectionStore();
-
+const {mosaicSelection, clearMosaicSource} = useMosaicSelectionStore();
 const globalSettings = useGlobalSettings();
 const notificationStore = useNotificationStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
@@ -75,7 +75,6 @@ const errorPlotName = ref('');
 
 // If there is a plot loading here, a dialog is displayed.
 function handlePlotError(plotName: string) {
-    // console.log('handlePlotError called with:', plotName);
     errorPlotName.value = plotName;
 
     notificationStore.notify({
@@ -86,11 +85,7 @@ function handlePlotError(plotName: string) {
     // Deselect the plot and remove it from the shown plots
     selectionStore.removePlotWithErrors(plotName);
 
-    mosaicSelection.value.update({
-        source: plotName,
-        value: null,
-        predicate: null,
-    });
+    clearMosaicSource(plotName);
 }
 
 // Adds a plot initially when first loading.
@@ -109,33 +104,11 @@ onMounted(() => {
 
 function handlePlotLoaded() {
     loadedPlots.value++;
-    // console.log('Plot loaded');
     if (loadedPlots.value === totalPlots.value) {
         loading.value = false;
     }
 }
 
-// Mosaic selections within plots gets computed
-const mosaicSelection = computed(() => vg.Selection.intersect());
-const plotBrush = computed(() => {
-    // console.log('plotBrush computed');
-
-    for (let selection of dataSelections.value) {
-        const source = selection.plotName;
-        const min = Number(selection.range[0]);
-        const max = Number(selection.range[1]);
-        const value = [min, max];
-
-        // Escape the source name to handle multi-word column names
-        const escapedSource = `"${source.replace(/"/g, '""')}"`;
-
-        const predicate = `${escapedSource} BETWEEN ${min} AND ${max}`;
-        const clause = { source, value, predicate };
-        mosaicSelection.value.update(clause);
-    }
-
-    return mosaicSelection.value;
-});
 
 // Selecting which plots to show
 function isPlotSelected(name: string): boolean {
@@ -153,12 +126,7 @@ function togglePlotSelection(name: string) {
 }
 
 function handleSelectionRemoved(event: CustomEvent) {
-    // console.log('handleSelectionRemoved reached');
-    mosaicSelection.value.update({
-        source: event.detail,
-        value: null,
-        predicate: null,
-    });
+    clearMosaicSource(event.detail);
 }
 
 window.addEventListener(
@@ -213,7 +181,6 @@ window.addEventListener(
                 v-for="dataSelection in displayedPlots"
                 :key="dataSelection.plotName"
                 :plot-name="dataSelection.plotName"
-                :plot-brush="plotBrush"
                 @plot-loaded="handlePlotLoaded"
                 @plot-error="handlePlotError"
             />
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index 947e8d3d..e927eacb 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -11,6 +11,7 @@ import { storeToRefs } from 'pinia';
 import FilterEditMenu from './FilterEditMenu.vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { QItemSection } from 'quasar';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 // Initialise Data
 const datasetSelectionStore = useDatasetSelectionStore();
@@ -18,6 +19,8 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(dat
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
+const { updateMosaicSelection, mosaicSelection } = useMosaicSelectionStore();
+
 
 // Define Plot Emits and Props
 const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
@@ -25,11 +28,7 @@ const props = defineProps({
     plotName: {
         type: String as PropType<string>,
         required: true,
-    },
-    plotBrush: {
-        type: Object as PropType<any>,
-        required: true,
-    },
+    }
 });
 
 // Vg Plot
@@ -46,7 +45,7 @@ function makePlot(column: string) {
             // Currently Selected Data
             vg.rectY(
                 vg.from(`${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`, {
-                    filterBy: props.plotBrush,
+                    filterBy: mosaicSelection,
                 }),
                 {
                     x: vg.bin(column),
@@ -147,6 +146,7 @@ const rangeModel = computed({
         return { min: selection.value.range[0], max: selection.value.range[1] };
     },
     set(newValue) {
+        updateMosaicSelection(selection.value.plotName, selection.value.range);
         selection.value.range[0] = newValue.min;
         selection.value.range[1] = newValue.max;
     },
diff --git a/apps/client/src/pages/TestFilterComponent.vue b/apps/client/src/pages/TestFilterComponent.vue
new file mode 100644
index 00000000..144b2b39
--- /dev/null
+++ b/apps/client/src/pages/TestFilterComponent.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, nextTick} from 'vue';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useFilterStore } from '@/stores/componentStores/filterStore';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { select } from 'd3-selection';
+
+import * as vg from '@uwdata/vgplot';
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+const filterStore = useFilterStore();
+const { filters } = storeToRefs(filterStore);
+const selectionStore = useSelectionStore();
+const { dataSelections} = storeToRefs(selectionStore)
+
+
+const {brush} = defineProps<{
+    brush?:any
+}>()
+
+const chartContainer = ref<HTMLElement | null>(null);
+
+function createChart(){
+    if(chartContainer.value){
+
+            const chartTwo = vg.plot(
+                // Plots Line Chart based on selection.
+                vg.lineY(
+                    vg.from(
+                        `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                        {
+                            filterBy: brush
+                        }
+                    ),
+                    {
+                        x: "Frame",
+                        y: vg.avg("Dry Mass (pg)"),
+                        stroke: 'blue',
+                        strokeWidth: 1,
+                        curve: 'basis',
+                    }
+                ),
+                // General settings.
+                vg.width(200),
+                vg.height(200),
+
+                // Gets rid of axes and margins!
+                vg.axis(false),
+                vg.margin(0)
+            );
+        chartContainer.value.appendChild(chartTwo);
+
+
+    }
+
+}
+
+watch(experimentDataInitialized, async (isInitialized) => {    
+    if(isInitialized){
+        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+        createChart();
+    }
+}, {immediate : true, deep:true})
+
+
+</script>
+<template>
+    <div style="margin:10px; border:1px solid black; height: 300px; width: 300px; padding:10px">
+        Passing Brush through child component
+        <div ref="chartContainer">
+
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/apps/client/src/pages/TestFilterComponentTwo.vue b/apps/client/src/pages/TestFilterComponentTwo.vue
new file mode 100644
index 00000000..489b2f75
--- /dev/null
+++ b/apps/client/src/pages/TestFilterComponentTwo.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, nextTick} from 'vue';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useFilterStore } from '@/stores/componentStores/filterStore';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { select } from 'd3-selection';
+// import { useBrushStore } from '@/stores/dataStores/brushStore';
+
+import * as vg from '@uwdata/vgplot';
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+const filterStore = useFilterStore();
+const { filters } = storeToRefs(filterStore);
+const selectionStore = useSelectionStore();
+const { dataSelections} = storeToRefs(selectionStore)
+
+// const brushStore = useBrushStore();
+
+// brushStore.brush.addEventListener('value',(value:any) => {
+//     // console.log(brushStore.brush);
+// })
+
+const chartContainer = ref<HTMLElement | null>(null);
+
+// function createChart(){
+//     if(chartContainer.value){
+
+//             const chartTwo = vg.plot(
+//                 // Plots Line Chart based on selection.
+//                 vg.lineY(
+//                     vg.from(
+//                         `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+//                         {
+//                             filterBy: brushStore.brush
+//                         }
+//                     ),
+//                     {
+//                         x: "Frame",
+//                         y: vg.avg("Dry Mass (pg)"),
+//                         stroke: 'blue',
+//                         strokeWidth: 1,
+//                         curve: 'basis',
+//                     }
+//                 ),
+//                 // General settings.
+//                 vg.width(200),
+//                 vg.height(200),
+
+//                 // Gets rid of axes and margins!
+//                 vg.axis(false),
+//                 vg.margin(0)
+//             );
+//         chartContainer.value.appendChild(chartTwo);
+
+
+//     }
+
+// }
+
+watch(experimentDataInitialized, async (isInitialized) => {    
+    if(isInitialized){
+        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+        // createChart();
+    }
+}, {immediate : true, deep:true})
+
+
+</script>
+<template>
+    <div style="margin:10px; border:1px solid black; height: 300px; width: 300px; padding:10px">
+        Passing Brush through Store
+        <div ref="chartContainer">
+
+        </div>
+    </div>
+</template>@/stores/dataStores/selectionStore
\ No newline at end of file
diff --git a/apps/client/src/pages/TestPage.vue b/apps/client/src/pages/TestPage.vue
new file mode 100644
index 00000000..f79b0b30
--- /dev/null
+++ b/apps/client/src/pages/TestPage.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, nextTick} from 'vue';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import TestFilterComponent from './TestFilterComponent.vue';
+import TestFilterComponentTwo from './TestFilterComponentTwo.vue';
+// import {useBrushStore} from '@/stores/dataStores/brushStore';
+import LBtn from '@/components/custom/LBtn.vue';
+
+import * as vg from '@uwdata/vgplot';
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+
+// const brushStore = useBrushStore();
+
+const chartContainer = ref<HTMLElement | null>(null);
+
+// let $slider = vg.Param.value(0);
+
+let $brush = vg.Selection.intersect();
+// brushStore.setBrush($brush);
+
+$brush.addEventListener("value", (value:any) => {
+    console.log(value);
+})
+
+const handleClick = () => {
+    // console.log($brush.active.source)
+    console.log($brush.clauses);
+    $brush.active.source.publish([0,100])
+    // $brush.update({source:'test', value:[50,200]})
+    // $brush.update({source:$brush.active.source, value:[x1, x2], predicate: `"Frame" BETWEEN ${x1} AND ${x2}`})
+    // // $brush.active.source.brush.clear();
+    // let selectionRect = document.querySelector('rect.selection');
+    // console.log(selectionRect);
+    // selectionRect?.setAttribute('x', `${y1}`)
+    // selectionRect?.setAttribute('width', `${y2}`)
+    // let selectionRectHandleW = document.querySelector('rect.handle.handle--w');
+    // selectionRectHandleW?.setAttribute('x', `${y2-4}`)
+    // let selectionRectHandleE = document.querySelector('rect.handle.handle--e');
+    // selectionRectHandleE?.setAttribute('x', `${width + y2-4}`)
+
+    // $brush = vg.Selection.intersect();
+    // console.log($brush)
+    // $brush.value = [0, 500]
+    // $brush.update({source: $brush.source, clause:`"Dry Mass (pg) BETWEEN 0 AND 100"`});
+    // console.log($brush)
+    // $brush.update({source:$brush.source, value:[0,100]})
+    // console.log($brush);
+}
+
+
+function createChart(){
+    if(chartContainer.value){
+        const chartOne = vg.vconcat(vg.slider({
+            select:"interval",
+            as:$brush,
+            from:`${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+            column:'Frame'
+        }),vg.plot(
+                // Plots Line Chart based on selection.
+                vg.lineY(
+                    vg.from(
+                        `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                    ),
+                    {
+                        x: "Frame",
+                        y: vg.avg("Dry Mass (pg)"),
+                        stroke: 'red',
+                        strokeWidth: 1,
+                        curve: 'basis',
+                    }
+                ),
+                vg.intervalX({as: $brush, pixelSize:1 }),
+                // General settings.
+                vg.width(400),
+                vg.height(400),
+
+                // Gets rid of axes and margins!
+                vg.axis(false),
+                vg.margin(0)
+            ));
+        chartContainer.value.appendChild(chartOne);
+    }
+
+}
+
+watch(experimentDataInitialized, async (isInitialized) => {    
+    if(isInitialized){
+        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+        createChart();
+    }
+}, {immediate : true, deep:true})
+
+
+</script>
+<template>
+    <div style="margin:100px; display:flex;flex-direction:row; padding:40px">
+        <div style="display:flex;flex-direction: column;">
+            Original Data
+            <div ref="chartContainer">
+            </div>
+            <l-btn @click="handleClick" label="Test"></l-btn>
+        </div>
+        <div style="display:flex;flex-direction:column;">
+            <TestFilterComponent :brush="$brush"/>
+            <TestFilterComponentTwo />
+        </div>
+
+    </div>
+</template>@/stores/dataStores/selectionStore
\ No newline at end of file
diff --git a/apps/client/src/router/index.ts b/apps/client/src/router/index.ts
index bd0ff9f6..fab700d2 100644
--- a/apps/client/src/router/index.ts
+++ b/apps/client/src/router/index.ts
@@ -2,6 +2,7 @@ import { createMemoryHistory, createRouter, createWebHistory, type RouteRecordRa
 
 import IndexPage from '../pages/IndexPage.vue'
 import UploadPage from '../pages/UploadPage.vue'
+import TestPage from '@/pages/TestPage.vue';
 
 
 const routes: RouteRecordRaw[] = [
@@ -13,6 +14,10 @@ const routes: RouteRecordRaw[] = [
     path: "/upload",
     component: UploadPage
   },
+  {
+    path: "/test",
+    component: TestPage
+  },
   // Always leave this as last one,
   // but you can also remove it
   {
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index ca98950c..5a21b0fb 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -32,8 +32,8 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
     });
 
 
-    const selectedXTag = ref<string>('drug');
-    const selectedYTag = ref<string>('concentration');
+    const selectedXTag = ref<string>('start');
+    const selectedYTag = ref<string>('end');
 
     const xLabels = computed<string[]>(() => {
         return currentExperimentTags.value[selectedXTag.value];
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
new file mode 100644
index 00000000..a9e59ce7
--- /dev/null
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia';
+import * as vg from '@uwdata/vgplot';
+
+
+interface Clause {
+    source: string,
+    predicate: string | null
+}
+
+/**
+ * Mosaic Selection: This is the selection that handles the general filtering for the "Filter" sidebar. Any VG plot can filter by this selection to automatically receive updates when the selection is updated.
+ * 
+ * Update Mosaic Selection: This is called by any input that is meant to update the mosaic selection. This will automatically dispatch updates to further selections. If range is null, then the selection will be cleared.
+ * 
+ * Add ConditionChart Selection: Called when we render each condition chart. This sets up the base selection clause. 
+ * 
+ * Clear Mosaic Selection: Helper function to clear by source.
+ */
+
+export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
+    let mosaicSelection = vg.Selection.intersect();
+    const conditionChartSelections: Record<string, any> = {};
+
+    function _escapeSource(source: string) {
+        return `"${source.replace(/"/g, '""')}"`;
+    }
+
+    // Called when a slider input needs to update selection
+    function updateMosaicSelection(plotName: string, range: [number, number] | null = null) {
+        const escapedSource = _escapeSource(plotName)
+        const clause = {
+            source: plotName,
+            predicate: range ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}` : null
+        }
+        mosaicSelection.update(clause);
+        _updateConditionChartSelections(clause)
+    }
+
+    function addConditionChartSelection(tags: [string, string][]) {
+        const conditionChartSelection = vg.Selection.intersect();
+        const source = `${tags[0][0]}-${tags[0][1]}_${tags[1][0]}-${tags[1][1]}`;
+        const clause: Clause = {
+            source,
+            predicate: `"${tags[0][0]}" = '${tags[0][1]}' AND "${tags[1][0]}" = '${tags[1][1]}'`
+        }
+        conditionChartSelection.update(clause)
+        conditionChartSelections[source] = conditionChartSelection;
+        const conditionChartBaseSelection = conditionChartSelection.clone();
+        return {
+            baseSelection: conditionChartBaseSelection,
+            filteredSelection: conditionChartSelection
+        };
+    }
+
+    function _updateConditionChartSelections(clause: Clause) {
+        Object.values(conditionChartSelections).forEach(selection => {
+            selection.update(clause);
+        })
+    }
+
+    function clearMosaicSource(source: string) {
+        updateMosaicSelection(source);
+    }
+
+
+    return {
+        mosaicSelection,
+        updateMosaicSelection,
+        addConditionChartSelection,
+        clearMosaicSource
+    }
+});
\ No newline at end of file

From 0be46d74ff0b29b8807abd9a1363328b613153a1 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 09:50:45 -0600
Subject: [PATCH 25/64] Removed unnecessary imports in PlotSelector.vue

---
 apps/client/src/components/globalSettings/PlotSelector.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 85ae7dac..61253834 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch } from 'vue';
-import { QBtn, QDialog, QCard, QCardSection, QCardActions } from 'quasar';
+import { QBtn } from 'quasar';
 import { storeToRefs } from 'pinia';
 import UnivariateCellPlot from './UnivariateCellPlot.vue';
 import {
@@ -12,7 +12,7 @@ import { useNotificationStore } from '@/stores/misc/notificationStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 const datasetSelectionStore = useDatasetSelectionStore();
-const {mosaicSelection, clearMosaicSource} = useMosaicSelectionStore();
+const { clearMosaicSource } = useMosaicSelectionStore();
 const globalSettings = useGlobalSettings();
 const notificationStore = useNotificationStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(

From f1b41298cd79d7e0bcb178a37f6b71c206c595d3 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 09:52:19 -0600
Subject: [PATCH 26/64] Removed tags from createChart input.

---
 .../src/components/conditionSelector/ConditionChart.vue       | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 50a11610..daf9827a 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -2,11 +2,9 @@
 import { ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import { useFilterStore } from '@/stores/componentStores/filterStore';
 import * as vg from '@uwdata/vgplot';
 import { watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
 import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 // Props from parent component
@@ -32,7 +30,6 @@ watch(experimentDataInitialized, async (isInitialized) => {
     if(isInitialized){
         await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
         createChart(
-            props.tags,
             props.xAxisName,
             props.yAxisName,
             props.width,
@@ -53,7 +50,6 @@ const strokeWidth = 3;
 
 
 async function createChart(
-    tags: [string,string][],
     xAxisName: string,
     yAxisName: string,
     width: number,

From e6f3980b9b3f7e4d06cf0c1b0bdeae3da9b4d145 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 10:07:00 -0600
Subject: [PATCH 27/64] Fixed condition chart not properly rendering dynamic
 tag names.

---
 .../componentStores/conditionSelectorStore.ts  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index 5a21b0fb..d6a86569 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { defineStore, storeToRefs } from 'pinia';
 import { useDatasetSelectionStore, type LocationMetadata } from '../dataStores/datasetSelectionUntrrackedStore';
 
@@ -8,6 +8,12 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
     const datasetSelectionStore = useDatasetSelectionStore();
     const { currentExperimentMetadata } = storeToRefs(datasetSelectionStore)
 
+    // Initialize starting tags as empty strings
+    const selectedXTag = ref<string>('');
+    const selectedYTag = ref<string>('');
+
+
+    // Provides the set of tags
     const currentExperimentTags = computed((): Record<string, string[]> => {
         const tempTags: Record<string, string[]> = {};
         currentExperimentMetadata.value?.locationMetadataList.forEach((locationMetadata: LocationMetadata) => {
@@ -31,9 +37,14 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         return tempTags;
     });
 
+    // When experimentTags change, initialize as values.
+    watch(currentExperimentTags, (newExperimentTags) => {
+        if (Object.keys(newExperimentTags).length > 1) {
+            selectedXTag.value = Object.keys(newExperimentTags)[0];
+            selectedYTag.value = Object.keys(newExperimentTags)[1];
+        }
+    }, { immediate: true })
 
-    const selectedXTag = ref<string>('start');
-    const selectedYTag = ref<string>('end');
 
     const xLabels = computed<string[]>(() => {
         return currentExperimentTags.value[selectedXTag.value];
@@ -51,6 +62,7 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         }
     }
 
+
     return {
         selectedXTag,
         selectedYTag,

From fe0b0b7151ac00a14194f19b11cd69e5980ae34b Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 10:14:03 -0600
Subject: [PATCH 28/64] Added condition chart color scheme based on y-index.
 Remove unnecessary code from ConditionSelector

---
 .../components/conditionSelector/ConditionChart.vue |  9 +++++++--
 .../conditionSelector/ConditionSelector.vue         | 13 +------------
 .../componentStores/conditionSelectorStore.ts       | 12 +++++++++++-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index daf9827a..ed8d8c1a 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -2,10 +2,12 @@
 import { ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
+import { useConditionSelector } from '@/stores/componentStores/conditionSelectorStore';
+
 import * as vg from '@uwdata/vgplot';
 import { watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 // Props from parent component
 // Accept props from the parent component
@@ -15,6 +17,7 @@ const props = defineProps<{
     yAxisName: string;
     width: number;
     height: number;
+    yIndex:number;
 }>();
 
 // Will use soon for dark mode.
@@ -23,6 +26,7 @@ const globalSettings = useGlobalSettings();
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
 const { addConditionChartSelection } = useMosaicSelectionStore();
+const { chartColorScheme } = useConditionSelector();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
@@ -45,7 +49,8 @@ const {baseSelection, filteredSelection } = addConditionChartSelection(props.tag
 
 
 // Styles
-const lineColor = '#ff0000';
+console.log()
+const lineColor = chartColorScheme[props.yIndex % 6]
 const strokeWidth = 3;
 
 
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 70362be8..69c5a7e1 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -89,18 +89,6 @@ const handleAllMouseOver = () => {
 const handleAllMouseLeave = () => {
     hoveredAll.value = false;
 }
-console.log(currentExperimentTags.value);
-console.log(xLabels.value);
-console.log('test')
-
-
-watch([selectedXTag, selectedYTag], () => {
-  console.log('Selected X Tag changed:', selectedXTag.value);
-  console.log('Selected Y Tag changed:', selectedYTag.value);
-  console.log('Updated xLabels:', xLabels.value);
-  console.log('Updated yLabels:', yLabels.value);
-});
-
 
 </script>
 
@@ -164,6 +152,7 @@ watch([selectedXTag, selectedYTag], () => {
                                 >
                                     <div>
                                         <ConditionChart
+                                            :yIndex="idy"
                                             :width="size"
                                             :height="size"
                                             :tags="[
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index d6a86569..84df792e 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -12,6 +12,15 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
     const selectedXTag = ref<string>('');
     const selectedYTag = ref<string>('');
 
+    const chartColorScheme = [
+        "#C026D3", // Fuchsia 600
+        "#0D9488", // teal 600
+        "#2563EB", //blue 600
+        "#65A30D", // lime 600
+        "#0EA5E9", // sky 500
+        "#E11D48", // rose 600
+    ]
+
 
     // Provides the set of tags
     const currentExperimentTags = computed((): Record<string, string[]> => {
@@ -69,6 +78,7 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         selectTag,
         xLabels,
         yLabels,
-        currentExperimentTags
+        currentExperimentTags,
+        chartColorScheme
     };
 });

From 5be4a110313af0ea884176aca881742afe28f40a Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 10:25:56 -0600
Subject: [PATCH 29/64] Adjusted styles and position for condition charts.
 Uncentered and made width and height on chart auto.

---
 .../conditionSelector/ConditionChart.vue      | 13 ++-----------
 .../conditionSelector/ConditionSelector.vue   | 19 +++++++------------
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index ed8d8c1a..0d34618a 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -15,8 +15,6 @@ const props = defineProps<{
     tags: [string,string][];
     xAxisName: string;
     yAxisName: string;
-    width: number;
-    height: number;
     yIndex:number;
 }>();
 
@@ -36,8 +34,6 @@ watch(experimentDataInitialized, async (isInitialized) => {
         createChart(
             props.xAxisName,
             props.yAxisName,
-            props.width,
-            props.height
         );
     }
 }, {immediate : true, deep:true})
@@ -51,14 +47,12 @@ const {baseSelection, filteredSelection } = addConditionChartSelection(props.tag
 // Styles
 console.log()
 const lineColor = chartColorScheme[props.yIndex % 6]
-const strokeWidth = 3;
+const strokeWidth = 5;
 
 
 async function createChart(
     xAxisName: string,
     yAxisName: string,
-    width: number,
-    height: number
 ) {
     if (chartContainer.value) {
 
@@ -118,11 +112,8 @@ async function createChart(
                     curve: 'basis',
                 }
             ),
-            // General settings.
-            vg.width(width),
-            vg.height(height),
 
-            // Gets rid of axes and margins!
+            // Gets rid of axes and margins
             vg.axis(false),
             vg.margin(0)
         );
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 69c5a7e1..2f68f5ed 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -10,7 +10,7 @@ import ConditionChart from './ConditionChart.vue';
 import { storeToRefs } from 'pinia';
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelector();
-const {xLabels, yLabels,currentExperimentTags,selectedXTag,selectedYTag } = storeToRefs(conditionSelector)
+const {xLabels, yLabels, selectedXTag,selectedYTag } = storeToRefs(conditionSelector)
 
 const container = ref(null);
 const gridWidth = ref(0);
@@ -142,7 +142,7 @@ const handleAllMouseLeave = () => {
                                 :key="`${idx}-${xLabels.join(',')}`"
                             >
                                 <div
-                                    :class="`chart flex justify-center align-center ${
+                                    :class="`chart flex justify-center align-end ${
                                         idx === hoveredColumn ||
                                         idy === hoveredRow || hoveredAll
                                             ? 'hovered'
@@ -153,8 +153,6 @@ const handleAllMouseLeave = () => {
                                     <div>
                                         <ConditionChart
                                             :yIndex="idy"
-                                            :width="size"
-                                            :height="size"
                                             :tags="[
                                                 [`${selectedXTag}`,`${elx.toString()}`],
                                                 [`${selectedYTag}`,`${ely.toString()}`]
@@ -197,6 +195,8 @@ const handleAllMouseLeave = () => {
 </template>
 
 <style scoped lang="scss">
+
+$border: 1px solid #9ca3af;
 .condition-selector-container {
     grid-template-columns: 60px 1fr;
     grid-template-rows: 1fr 60px;
@@ -205,7 +205,6 @@ const handleAllMouseLeave = () => {
     width: 100%;
     height: 100%;
     & > div:not(.condition-charts-container) {
-        // border: 1px solid black;
         width: 100%;
         height: 100%;
     }
@@ -228,10 +227,8 @@ const handleAllMouseLeave = () => {
         & > div {
             width: 100%;
             height: 100%;
-            // border: 1px solid black;
         }
         .y-label {
-            // margin-right:80px;
             width: 100%;
             flex: 1;
         }
@@ -245,7 +242,7 @@ const handleAllMouseLeave = () => {
             border-radius: 2px;
             &.hovered,
             &:hover {
-                border: 1px solid black;
+                border: $border;
             }
         }
     }
@@ -256,13 +253,11 @@ const handleAllMouseLeave = () => {
             width: 100%;
             .chart {
                 box-sizing: border-box;
-                padding:5px;
                 border-radius: 2px;
                 cursor: pointer;
-                // border: 1px solid black;
                 &:hover,
                 &.hovered {
-                    border:1px solid black;
+                    border: $border;
                 }
             }
         }
@@ -272,7 +267,7 @@ const handleAllMouseLeave = () => {
 .all-section{
     border-radius:2px;
     &:hover{
-        border:1px solid black;
+        border: $border;
     }
 }
 

From fb2876217b2179919efffdb34cfa7722878bb2dc Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 24 Oct 2024 12:52:14 -0600
Subject: [PATCH 30/64] Added selection styles for condition chart. Added param
 to turn opacity off of "filtered" line when not selected

---
 .../conditionSelector/ConditionChart.vue      |   6 +-
 .../conditionSelector/ConditionSelector.vue   |  31 ++++-
 .../componentStores/conditionSelectorStore.ts | 130 +++++++++++++++++-
 .../stores/dataStores/mosaicSelectionStore.ts |  25 +++-
 4 files changed, 185 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 0d34618a..1d4a1974 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
     xAxisName: string;
     yAxisName: string;
     yIndex:number;
+    selected:boolean;
 }>();
 
 // Will use soon for dark mode.
@@ -41,7 +42,7 @@ watch(experimentDataInitialized, async (isInitialized) => {
 
 // Creates a new set of selections and adds them to an overall list that is updated whenever general mosaicSelection 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. mosaicSelection).
-const {baseSelection, filteredSelection } = addConditionChartSelection(props.tags)
+const {baseSelection, filteredSelection, opacityParam } = addConditionChartSelection(props.tags)
 
 
 // Styles
@@ -49,6 +50,8 @@ console.log()
 const lineColor = chartColorScheme[props.yIndex % 6]
 const strokeWidth = 5;
 
+// const $selected = vg.Param.value(0);
+// $selected.update()
 
 async function createChart(
     xAxisName: string,
@@ -110,6 +113,7 @@ async function createChart(
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
+                    opacity:opacityParam
                 }
             ),
 
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 2f68f5ed..905cede7 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -10,7 +10,14 @@ import ConditionChart from './ConditionChart.vue';
 import { storeToRefs } from 'pinia';
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelector();
-const {xLabels, yLabels, selectedXTag,selectedYTag } = storeToRefs(conditionSelector)
+const {
+    xLabels,
+    yLabels,
+    selectedXTag,
+    selectedYTag,
+    currentExperimentTags,
+    selectedGrid,
+ } = storeToRefs(conditionSelector)
 
 const container = ref(null);
 const gridWidth = ref(0);
@@ -115,6 +122,7 @@ const handleAllMouseLeave = () => {
                                 () => handleLabelMouseOver('y-axis', idy)
                             "
                             @mouseleave="() => handleLabelMouseLeave()"
+                            @click="() => conditionSelector.clickConditionChartRow(idy)"
                             :class="`row justify-center align-center y-label ${hoveredAll ? 'hovered' : ''}`"
                             :style="maxHeight"
                         >
@@ -147,8 +155,9 @@ const handleAllMouseLeave = () => {
                                         idy === hoveredRow || hoveredAll
                                             ? 'hovered'
                                             : ''
-                                    }`"
+                                    } ${selectedGrid[`${elx.toString()}-${ely.toString()}`] || conditionSelector.allSelected() ? 'selected' : 'unselected'}` "
                                     :style="heightWidth"
+                                    @click="() => conditionSelector.clickConditionChart(idx,idy)"
                                 >
                                     <div>
                                         <ConditionChart
@@ -159,6 +168,7 @@ const handleAllMouseLeave = () => {
                                             ]"
                                             :xAxisName="'Frame'"
                                             :yAxisName="'Dry Mass (pg)'"
+                                            :selected="selectedGrid[`${elx.toString()}-${ely.toString()}`] || conditionSelector.allSelected()"
                                         />
                                     </div>
                                 </div>
@@ -166,7 +176,14 @@ const handleAllMouseLeave = () => {
                         </div>
                     </template>
                 </div>
-                <div class="items-center justify-center flex all-section" @mouseover="handleAllMouseOver" @mouseleave="handleAllMouseLeave">All</div>
+                <div 
+                    class="items-center justify-center flex all-section" 
+                    @mouseover="handleAllMouseOver"
+                    @click="() => conditionSelector.clickConditionChartAll()"
+                    @mouseleave="handleAllMouseLeave"
+                >
+                    All
+                </div>
                 <div class="items-center justify-around row">
                     <template
                         v-for="(labelX, idx) in xLabels"
@@ -177,6 +194,8 @@ const handleAllMouseLeave = () => {
                                 () => handleLabelMouseOver('x-axis', idx)
                             "
                             @mouseleave="() => handleLabelMouseLeave()"
+                            @click="() => conditionSelector.clickConditionChartColumn(idx)"
+
                             :class="`row justify-center align-center flex x-label ${hoveredAll ? 'hovered' : ''}`"
                         >
                             <div :style="width">
@@ -259,6 +278,12 @@ $border: 1px solid #9ca3af;
                 &.hovered {
                     border: $border;
                 }
+                &.selected{
+                    // border: 5px solid blue;
+                }
+                &.unselected{
+                    opacity:0.8
+                }
             }
         }
     }
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index 84df792e..093b9267 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -1,16 +1,20 @@
 import { ref, computed, watch } from 'vue';
 import { defineStore, storeToRefs } from 'pinia';
 import { useDatasetSelectionStore, type LocationMetadata } from '../dataStores/datasetSelectionUntrrackedStore';
+import { useMosaicSelectionStore } from '../dataStores/mosaicSelectionStore';
 
 export type Axis = 'x-axis' | 'y-axis';
 
 export const useConditionSelector = defineStore('conditionSelector', () => {
     const datasetSelectionStore = useDatasetSelectionStore();
     const { currentExperimentMetadata } = storeToRefs(datasetSelectionStore)
+    const mosaicSelectionStore = useMosaicSelectionStore();
 
     // Initialize starting tags as empty strings
     const selectedXTag = ref<string>('');
     const selectedYTag = ref<string>('');
+    // Initialize as empty. Used to indicate what is selected.
+    const selectedGrid = ref<Record<string, boolean>>({});
 
     const chartColorScheme = [
         "#C026D3", // Fuchsia 600
@@ -55,6 +59,8 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
     }, { immediate: true })
 
 
+
+
     const xLabels = computed<string[]>(() => {
         return currentExperimentTags.value[selectedXTag.value];
     });
@@ -63,6 +69,7 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         return currentExperimentTags.value[selectedYTag.value];
     });
 
+
     function selectTag(tag: string, axis: Axis) {
         if (axis === 'x-axis') {
             selectedXTag.value = tag;
@@ -72,6 +79,121 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
     }
 
 
+
+    function clickConditionChartColumn(idx: number) {
+
+        const allSelected = _checkAllSelected(idx, 'col');
+
+        currentExperimentTags.value[selectedYTag.value].forEach((value: string, idy: number) => {
+            clickConditionChart(idx, idy, allSelected)
+        })
+    }
+
+    function clickConditionChartRow(idy: number) {
+
+        const allSelected = _checkAllSelected(idy, 'row');
+
+        currentExperimentTags.value[selectedXTag.value].forEach((value: string, idx: number) => {
+            clickConditionChart(idx, idy, allSelected)
+        })
+    }
+
+    function clickConditionChartAll() {
+
+        const allSelected = _checkAllSelected(null, 'all');
+
+        currentExperimentTags.value[selectedXTag.value].forEach((xValue: string, idx: number) => {
+            currentExperimentTags.value[selectedYTag.value].forEach((yValue: string, idy: number) => {
+                clickConditionChart(idx, idy, allSelected)
+            })
+        })
+    }
+
+    function allSelected() {
+        return Object.keys(selectedGrid.value).length === 0;
+    }
+
+    function clickConditionChart(idx: number, idy: number, allSelected: boolean | null = null) {
+        const currentColumnVal = currentExperimentTags.value[selectedXTag.value][idx]
+        const currentRowVal = currentExperimentTags.value[selectedYTag.value][idy]
+
+        const currentValue = selectedGrid.value[`${currentColumnVal}-${currentRowVal}`];
+
+        // If currently selected, new opacity will be 0 because we are 'de-selecting'.
+        let newOpacity = currentValue ? 0 : 1;
+        let newValue = !currentValue;
+        if (allSelected !== null) {
+            newOpacity = allSelected ? 0 : 1;
+            newValue = allSelected ? false : true;
+        }
+
+
+        if (!(`${currentColumnVal}-${currentRowVal}` in selectedGrid.value)) {
+            // If nothing has been selected, update all opacities to 0
+            if (Object.keys(selectedGrid.value).length === 0) {
+                mosaicSelectionStore.updateOpacityParamAll(0)
+            }
+        }
+
+        // Get Current Selection ID
+        const source = `${selectedXTag.value}-${currentColumnVal}_${selectedYTag.value}-${currentRowVal}`
+
+        // Update opacity to 1
+        mosaicSelectionStore.updateOpacityParam(source, newOpacity);
+
+        // Set 'Selected' on current selection
+        selectedGrid.value[`${currentColumnVal}-${currentRowVal}`] = newValue;
+
+    }
+    type allSelectedType = 'row' | 'col' | 'all'
+
+    //Helper function to determine if all objects in a row or column are selected (or if all are selected)
+    function _checkAllSelected(index: number | null, type: allSelectedType = 'all') {
+        if (type === 'col') {
+            if (index !== null) {
+                const currentColumnVal: string = currentExperimentTags.value[selectedXTag.value][index]
+                let allSelected = true;
+
+                currentExperimentTags.value[selectedYTag.value].forEach((value: string) => {
+                    const currentRowVal: string = value;
+                    const selected = selectedGrid.value[`${currentColumnVal}-${currentRowVal}`] ?? false;
+                    allSelected = allSelected && selected;
+                })
+                return allSelected
+            }
+            return false
+
+        } else if (type === 'row') {
+            if (index !== null) {
+
+                const currentRowVal: string = currentExperimentTags.value[selectedYTag.value][index]
+                let allSelected = true;
+
+                currentExperimentTags.value[selectedXTag.value].forEach((value: string) => {
+                    const currentColumnVal: string = value;
+                    const selected = selectedGrid.value[`${currentColumnVal}-${currentRowVal}`] ?? false;
+                    allSelected = allSelected && selected;
+                })
+                return allSelected
+            }
+            return false
+        } else {
+            let allSelected = true;
+            currentExperimentTags.value[selectedXTag.value].forEach((xValue: string) => {
+                const currentColumnVal: string = xValue;
+                currentExperimentTags.value[selectedYTag.value].forEach((yValue: string) => {
+                    const currentRowVal: string = yValue;
+                    const selected = selectedGrid.value[`${currentColumnVal}-${currentRowVal}`] ?? false;
+                    allSelected = allSelected && selected;
+                })
+            })
+            return allSelected;
+        }
+
+    }
+
+
+
     return {
         selectedXTag,
         selectedYTag,
@@ -79,6 +201,12 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         xLabels,
         yLabels,
         currentExperimentTags,
-        chartColorScheme
+        chartColorScheme,
+        clickConditionChart,
+        clickConditionChartAll,
+        clickConditionChartColumn,
+        clickConditionChartRow,
+        selectedGrid,
+        allSelected
     };
 });
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index a9e59ce7..05c3aa33 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -20,6 +20,7 @@ interface Clause {
 export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     let mosaicSelection = vg.Selection.intersect();
     const conditionChartSelections: Record<string, any> = {};
+    const conditionChartSelectedParams: Record<string, any> = {}
 
     function _escapeSource(source: string) {
         return `"${source.replace(/"/g, '""')}"`;
@@ -38,17 +39,24 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
 
     function addConditionChartSelection(tags: [string, string][]) {
         const conditionChartSelection = vg.Selection.intersect();
+        // Creates an opacity param
+        const conditionChartSelectedParam = vg.Param.value(1);
         const source = `${tags[0][0]}-${tags[0][1]}_${tags[1][0]}-${tags[1][1]}`;
         const clause: Clause = {
             source,
             predicate: `"${tags[0][0]}" = '${tags[0][1]}' AND "${tags[1][0]}" = '${tags[1][1]}'`
         }
         conditionChartSelection.update(clause)
+        // Add selection to record
         conditionChartSelections[source] = conditionChartSelection;
+        // Add parameter to record
+        conditionChartSelectedParams[source] = conditionChartSelectedParam;
+
         const conditionChartBaseSelection = conditionChartSelection.clone();
         return {
             baseSelection: conditionChartBaseSelection,
-            filteredSelection: conditionChartSelection
+            filteredSelection: conditionChartSelection,
+            opacityParam: conditionChartSelectedParam
         };
     }
 
@@ -62,11 +70,24 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
         updateMosaicSelection(source);
     }
 
+    function updateOpacityParam(source: string, value: number) {
+        conditionChartSelectedParams[source].update(value)
+    }
+
+    function updateOpacityParamAll(value: number) {
+        console.log(conditionChartSelectedParams);
+        Object.values(conditionChartSelectedParams).forEach((param: any) => {
+            param.update(value);
+        })
+    }
+
 
     return {
         mosaicSelection,
         updateMosaicSelection,
         addConditionChartSelection,
-        clearMosaicSource
+        clearMosaicSource,
+        updateOpacityParam,
+        updateOpacityParamAll
     }
 });
\ No newline at end of file

From 89877ad833dc824eed5525c492abafc68917b28e Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 25 Oct 2024 16:47:08 -0600
Subject: [PATCH 31/64] Moved mosaic selection interactions to watching
 variables

---
 .../conditionSelector/ConditionChart.vue      |  35 +++--
 .../conditionSelector/ConditionSelector.vue   |  12 +-
 .../ConditionSelectorDropdown.vue             |   4 +-
 .../components/exemplarView/ExemplarView.vue  |  69 ++++++++++
 .../globalSettings/UnivariateCellPlot.vue     |   5 +-
 apps/client/src/main.ts                       |   2 +
 .../componentStores/conditionSelectorStore.ts |  13 +-
 .../stores/dataStores/mosaicSelectionStore.ts | 126 +++++++++++++++++-
 .../interactionStores/gridstackLayoutStore.ts |   7 +
 9 files changed, 231 insertions(+), 42 deletions(-)
 create mode 100644 apps/client/src/components/exemplarView/ExemplarView.vue

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 1d4a1974..10de4df4 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -3,7 +3,7 @@ import { ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
-import { useConditionSelector } from '@/stores/componentStores/conditionSelectorStore';
+import { useConditionSelectorStore } from '@/stores/componentStores/conditionSelectorStore';
 
 import * as vg from '@uwdata/vgplot';
 import { watch } from 'vue';
@@ -24,13 +24,14 @@ const globalSettings = useGlobalSettings();
 
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
-const { addConditionChartSelection } = useMosaicSelectionStore();
-const { chartColorScheme } = useConditionSelector();
+const { conditionChartSelections  } = useMosaicSelectionStore();
+const { conditionChartSelectionsInitialized} = storeToRefs(useMosaicSelectionStore());
+const { chartColorScheme } = useConditionSelectorStore();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
-watch(experimentDataInitialized, async (isInitialized) => {    
-    if(isInitialized){
+watch([experimentDataInitialized, conditionChartSelectionsInitialized], async ([isInitialized, isChartInitialized]) => {    
+    if(isInitialized && isChartInitialized){
         await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
         createChart(
             props.xAxisName,
@@ -42,27 +43,21 @@ watch(experimentDataInitialized, async (isInitialized) => {
 
 // Creates a new set of selections and adds them to an overall list that is updated whenever general mosaicSelection 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. mosaicSelection).
-const {baseSelection, filteredSelection, opacityParam } = addConditionChartSelection(props.tags)
-
 
 // Styles
-console.log()
 const lineColor = chartColorScheme[props.yIndex % 6]
 const strokeWidth = 5;
 
-// const $selected = vg.Param.value(0);
-// $selected.update()
-
 async function createChart(
     xAxisName: string,
     yAxisName: string,
 ) {
-    if (chartContainer.value) {
 
-        while (chartContainer.value.firstChild) {
-            chartContainer.value.removeChild(chartContainer.value.firstChild);
-        }
 
+    if (chartContainer.value ) {
+
+        const source = `${props.tags[0][0]}-${props.tags[0][1]}_${props.tags[1][0]}-${props.tags[1][1]}`
+        console.log(conditionChartSelections)
         // Creates chart, filtered by the selection that uses the query.
         const chart = vg.plot(
             // Fills in area under line chart grey (optional)
@@ -70,7 +65,7 @@ async function createChart(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: baseSelection
+                        filterBy: conditionChartSelections[source].baseSelection
                     }
                 ),
                 {
@@ -87,7 +82,7 @@ async function createChart(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: baseSelection,
+                        filterBy: conditionChartSelections[source].baseSelection
                     }
                 ),
                 {
@@ -96,7 +91,7 @@ async function createChart(
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
-                    opacity:0.3
+                    opacity:0.5
                 }
             ),
             // Plots Line Chart based on selection.
@@ -104,7 +99,7 @@ async function createChart(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: filteredSelection,
+                        filterBy: conditionChartSelections[source].filteredSelection
                     }
                 ),
                 {
@@ -113,7 +108,7 @@ async function createChart(
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
-                    opacity:opacityParam
+                    opacity:1
                 }
             ),
 
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 905cede7..8e913ac1 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {
-    useConditionSelector,
+    useConditionSelectorStore,
     type Axis,
 } from '@/stores/componentStores/conditionSelectorStore';
 import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue';
 import ConditionChart from './ConditionChart.vue';
 import { storeToRefs } from 'pinia';
 const globalSettings = useGlobalSettings();
-const conditionSelector = useConditionSelector();
+const conditionSelector = useConditionSelectorStore();
 const {
     xLabels,
     yLabels,
     selectedXTag,
     selectedYTag,
-    currentExperimentTags,
     selectedGrid,
  } = storeToRefs(conditionSelector)
 
@@ -278,11 +277,8 @@ $border: 1px solid #9ca3af;
                 &.hovered {
                     border: $border;
                 }
-                &.selected{
-                    // border: 5px solid blue;
-                }
                 &.unselected{
-                    opacity:0.8
+                    opacity:0.5
                 }
             }
         }
diff --git a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
index 44527fbb..d7642ad0 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelectorDropdown.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
-    useConditionSelector,
+    useConditionSelectorStore,
     type Axis,
 } from '@/stores/componentStores/conditionSelectorStore';
 import { storeToRefs } from 'pinia';
-const conditionSelector = useConditionSelector();
+const conditionSelector = useConditionSelectorStore();
 const {currentExperimentTags} = storeToRefs(conditionSelector);
 const props = defineProps({
     axis: {
diff --git a/apps/client/src/components/exemplarView/ExemplarView.vue b/apps/client/src/components/exemplarView/ExemplarView.vue
new file mode 100644
index 00000000..c134001b
--- /dev/null
+++ b/apps/client/src/components/exemplarView/ExemplarView.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {ref, watch, nextTick} from 'vue';
+import * as vg from '@uwdata/vgplot';
+// import { ref, nextTick} from 'vue';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useConditionSelectorStore } from '@/stores/componentStores/conditionSelectorStore';
+import { storeToRefs } from 'pinia';
+
+
+
+// // Will use soon for dark mode.
+// const globalSettings = useGlobalSettings();
+
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+const { chartColorScheme } = useConditionSelectorStore();
+
+
+const chartContainer = ref<HTMLElement | null>(null);
+watch(experimentDataInitialized, async (isInitialized) => {    
+    if(isInitialized){
+        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+        createChart();
+    }
+}, {immediate : true, deep:true})
+
+
+
+
+async function createChart(){
+
+    // await vg.coordinator().exec([`
+    //     CREATE TEMP TABLE IF NOT EXISTS my_testing_table_density_two AS
+    //     SELECT AVG("Dry Mass (pg)") as avg_mass, "Tracking ID" as tracking_id
+    //     FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata
+    //     GROUP BY "Tracking ID"
+    // `]);
+
+
+
+    // if(chartContainer.value){
+    //     const chart = vg.plot(
+    //     vg.densityY(
+    //         vg.from(
+    //             `my_testing_table_density`),
+    //             {
+    //                 x: "avg_mass",
+    //                 fill: 'grey',
+    //                 fillOpacity:0.2,
+    //                 curve: 'basis',
+    //                 stroke:'black'
+    //             }
+    //     ),
+    //     vg.width(300),
+    //     vg.height(300)
+    // )
+    // chartContainer.value.appendChild(chart);
+    // }
+
+}
+
+
+</script>
+<template>
+    <div style="width:100%;height:100%;" ref="chartContainer"></div>
+</template>
+<style scoped lang="scss">
+</style>
\ No newline at end of file
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index e927eacb..a0b568ef 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -19,7 +19,7 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(dat
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
-const { updateMosaicSelection, mosaicSelection } = useMosaicSelectionStore();
+const { mosaicSelection, updateMosaicSelection } = useMosaicSelectionStore();
 
 
 // Define Plot Emits and Props
@@ -141,12 +141,13 @@ const selection = computed<DataSelection>(() => {
     return s;
 });
 
+// watch(selection, (newSelection) => updateMosaicSelection(newSelection.plotName, newSelection.range), {deep:true, immediate:true});
+
 const rangeModel = computed({
     get() {
         return { min: selection.value.range[0], max: selection.value.range[1] };
     },
     set(newValue) {
-        updateMosaicSelection(selection.value.plotName, selection.value.range);
         selection.value.range[0] = newValue.min;
         selection.value.range[1] = newValue.max;
     },
diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
index c3ec4d5f..d04adfbc 100644
--- a/apps/client/src/main.ts
+++ b/apps/client/src/main.ts
@@ -23,6 +23,7 @@ import AggregateLineChartSettingsToolbar from './components/AggregateLineChartSe
 import TrrackVisWrapper from './components/TrrackVisWrapper.vue';
 import NoDataSplash from './components/NoDataSplash.vue';
 import ConditionSelector from './components/conditionSelector/ConditionSelector.vue';
+import ExemplarView from './components/exemplarView/ExemplarView.vue';
 import { router } from './router';
 
 import { Quasar, Loading, Notify } from 'quasar';
@@ -105,4 +106,5 @@ createApp(App)
     .component('StubView', StubView)
     .component('FilterSelector', FilterSelector)
     .component('ConditionSelector', ConditionSelector)
+    .component('ExemplarView', ExemplarView)
     .mount('#app');
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index 093b9267..edb29510 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -1,14 +1,14 @@
 import { ref, computed, watch } from 'vue';
 import { defineStore, storeToRefs } from 'pinia';
 import { useDatasetSelectionStore, type LocationMetadata } from '../dataStores/datasetSelectionUntrrackedStore';
-import { useMosaicSelectionStore } from '../dataStores/mosaicSelectionStore';
+// import { useMosaicSelectionStore } from '../dataStores/mosaicSelectionStore';
 
 export type Axis = 'x-axis' | 'y-axis';
 
-export const useConditionSelector = defineStore('conditionSelector', () => {
+export const useConditionSelectorStore = defineStore('conditionSelector', () => {
     const datasetSelectionStore = useDatasetSelectionStore();
     const { currentExperimentMetadata } = storeToRefs(datasetSelectionStore)
-    const mosaicSelectionStore = useMosaicSelectionStore();
+    // const mosaicSelectionStore = useMosaicSelectionStore();
 
     // Initialize starting tags as empty strings
     const selectedXTag = ref<string>('');
@@ -52,6 +52,7 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
 
     // When experimentTags change, initialize as values.
     watch(currentExperimentTags, (newExperimentTags) => {
+        console.log(newExperimentTags);
         if (Object.keys(newExperimentTags).length > 1) {
             selectedXTag.value = Object.keys(newExperimentTags)[0];
             selectedYTag.value = Object.keys(newExperimentTags)[1];
@@ -61,6 +62,8 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
 
 
 
+
+
     const xLabels = computed<string[]>(() => {
         return currentExperimentTags.value[selectedXTag.value];
     });
@@ -131,7 +134,7 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         if (!(`${currentColumnVal}-${currentRowVal}` in selectedGrid.value)) {
             // If nothing has been selected, update all opacities to 0
             if (Object.keys(selectedGrid.value).length === 0) {
-                mosaicSelectionStore.updateOpacityParamAll(0)
+                // mosaicSelectionStore.updateOpacityParamAll(0)
             }
         }
 
@@ -139,7 +142,7 @@ export const useConditionSelector = defineStore('conditionSelector', () => {
         const source = `${selectedXTag.value}-${currentColumnVal}_${selectedYTag.value}-${currentRowVal}`
 
         // Update opacity to 1
-        mosaicSelectionStore.updateOpacityParam(source, newOpacity);
+        // mosaicSelectionStore.updateOpacityParam(source, newOpacity);
 
         // Set 'Selected' on current selection
         selectedGrid.value[`${currentColumnVal}-${currentRowVal}`] = newValue;
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 05c3aa33..4fe01bef 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -1,5 +1,10 @@
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
+import { watch, ref } from 'vue';
+import { useSelectionStore, type DataSelection } from '@/stores/interactionStores/selectionStore';
+
+import _ from 'lodash-es'
+import { useConditionSelectorStore } from '../componentStores/conditionSelectorStore';
 
 
 interface Clause {
@@ -7,6 +12,11 @@ interface Clause {
     predicate: string | null
 }
 
+interface ConditionChartSelection {
+    baseSelection: any,
+    filteredSelection: any
+}
+
 /**
  * Mosaic Selection: This is the selection that handles the general filtering for the "Filter" sidebar. Any VG plot can filter by this selection to automatically receive updates when the selection is updated.
  * 
@@ -18,9 +28,114 @@ interface Clause {
  */
 
 export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
+
     let mosaicSelection = vg.Selection.intersect();
-    const conditionChartSelections: Record<string, any> = {};
+    const conditionChartSelections: Record<string, ConditionChartSelection> = {};
     const conditionChartSelectedParams: Record<string, any> = {}
+    const conditionChartSelectionsInitialized = ref<boolean>(false);
+
+    const selectionStore = useSelectionStore();
+    const { dataSelections } = storeToRefs(selectionStore);
+    const conditionSelectorStore = useConditionSelectorStore();
+
+    // let previousDataSelections = _.cloneDeep(dataSelections.value);
+    let previousDataSelections: DataSelection[] = []
+
+    // Subscribe to DataSelections
+    watch(dataSelections, (newDataSelections) => {
+        // Track Changes in number of plots
+        let previousPlots = previousDataSelections.map(entry => entry.plotName);
+
+        // In shared plots, get different ranges
+        newDataSelections.forEach((entry) => {
+            const currPlotName = entry.plotName;
+            if (entry.range[0] !== -Infinity && entry.range[1] !== -Infinity) {
+                if (previousPlots.includes(currPlotName)) {
+                    const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === currPlotName);
+                    if (previousSelection && !_.isEqual(previousSelection.range, entry.range)) {
+                        // Call update with new range
+                        updateMosaicSelection(currPlotName, entry.range)
+                    }
+                    // Remove Name from previousPlots
+                    previousPlots = previousPlots.filter(plotName => plotName !== currPlotName)
+                } else {
+                    // Update with new plot source
+                    updateMosaicSelection(currPlotName, entry.range)
+                }
+            }
+        })
+
+        // If greater than 0, means previous dataSelections has a selection no longer around.
+        if (previousPlots.length > 0) {
+            previousPlots.forEach(prevPlotName => {
+                const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === prevPlotName);
+
+                // Update mosaic with the given max range
+                if (previousSelection) {
+
+                    updateMosaicSelection(previousSelection.plotName, previousSelection.maxRange);
+                }
+            })
+        }
+
+        previousDataSelections = _.cloneDeep(newDataSelections);
+    }, { deep: true, immediate: true })
+
+
+    // Initialize Condition Chart Selections
+    watch(() => JSON.stringify(conditionSelectorStore.currentExperimentTags), (newTagsString, oldTagsString) => {
+        if (newTagsString !== oldTagsString) {
+            const newExperimentTags = JSON.parse(newTagsString);
+            const keysList = Object.keys(newExperimentTags);
+            for (let i = 0; i < keysList.length; i++) {
+                const currKey = keysList[i];
+                const currValues = newExperimentTags[currKey];
+
+                for (let j = i + 1; j < keysList.length; j++) {
+                    //Compare currValues with all other lists
+                    const compareKey = keysList[j];
+                    const compareValues = newExperimentTags[compareKey];
+
+                    currValues.forEach((currValue: string) => {
+                        compareValues.forEach((compareValue: string) => {
+
+                            // Create new selection based on comparison
+                            const newSelection = vg.Selection.intersect();
+                            const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`
+                            const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`
+                            const clause: Clause = {
+                                source: newSource,
+                                predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`
+                            }
+
+                            newSelection.update(clause);
+                            const conditionChartSelection: ConditionChartSelection = {
+                                baseSelection: newSelection,
+                                filteredSelection: newSelection.clone()
+                            }
+
+                            conditionChartSelections[newSource] = conditionChartSelection;
+                            conditionChartSelections[reversedSource] = conditionChartSelection;
+                        })
+                    })
+                }
+
+            }
+            conditionChartSelectionsInitialized.value = true;
+        }
+    }, { immediate: true, deep: true })
+
+
+    // Used to watch when selectedGrid changes
+    watch(conditionSelectorStore.selectedGrid, (newSelectedGrid) => {
+        console.log(newSelectedGrid);
+
+        // Whenever selected Grid Changes, change
+
+
+    })
+
+
 
     function _escapeSource(source: string) {
         return `"${source.replace(/"/g, '""')}"`;
@@ -61,8 +176,8 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     function _updateConditionChartSelections(clause: Clause) {
-        Object.values(conditionChartSelections).forEach(selection => {
-            selection.update(clause);
+        Object.values(conditionChartSelections).forEach((selectionObject: ConditionChartSelection) => {
+            selectionObject.filteredSelection.update(clause);
         })
     }
 
@@ -75,7 +190,6 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     function updateOpacityParamAll(value: number) {
-        console.log(conditionChartSelectedParams);
         Object.values(conditionChartSelectedParams).forEach((param: any) => {
             param.update(value);
         })
@@ -84,6 +198,8 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
 
     return {
         mosaicSelection,
+        conditionChartSelections,
+        conditionChartSelectionsInitialized,
         updateMosaicSelection,
         addConditionChartSelection,
         clearMosaicSource,
diff --git a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
index a1837b36..ab6bd26d 100644
--- a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
+++ b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
@@ -291,6 +291,13 @@ export const useGridstackLayoutStore = defineStore(
                 icon: 'table_chart',
                 noPadding: true,
             },
+            {
+                component: 'ExemplarView',
+                displayName: 'Exemplar View',
+                id: 'ExemplarView',
+                icon: 'table_chart',
+                noPadding: true,
+            },
             {
                 component: 'LooneageViewGL',
                 displayName: 'Looneage',

From eb6e41b74e92cc8c3e8d8b92438e21e64074e8f0 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 25 Oct 2024 17:13:19 -0600
Subject: [PATCH 32/64] Changed initialization of condition selector to
 computed variable

---
 .../conditionSelector/ConditionChart.vue      |   8 +-
 .../stores/dataStores/mosaicSelectionStore.ts | 157 +++++++++---------
 2 files changed, 84 insertions(+), 81 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 10de4df4..ccbc778d 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -30,15 +30,16 @@ const { chartColorScheme } = useConditionSelectorStore();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
-watch([experimentDataInitialized, conditionChartSelectionsInitialized], async ([isInitialized, isChartInitialized]) => {    
-    if(isInitialized && isChartInitialized){
+watch([experimentDataInitialized, conditionChartSelections], async ([isInitialized, newConditionChartSelections]) => {    
+    if(isInitialized){
         await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+        console.log('Im here to make the chart')
         createChart(
             props.xAxisName,
             props.yAxisName,
         );
     }
-}, {immediate : true, deep:true})
+}, {immediate : true, deep : true })
 
 
 // Creates a new set of selections and adds them to an overall list that is updated whenever general mosaicSelection is updated.
@@ -57,7 +58,6 @@ async function createChart(
     if (chartContainer.value ) {
 
         const source = `${props.tags[0][0]}-${props.tags[0][1]}_${props.tags[1][0]}-${props.tags[1][1]}`
-        console.log(conditionChartSelections)
         // Creates chart, filtered by the selection that uses the query.
         const chart = vg.plot(
             // Fills in area under line chart grey (optional)
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 4fe01bef..5ba82c9c 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -1,6 +1,6 @@
 import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
-import { watch, ref } from 'vue';
+import { watch, ref, computed } from 'vue';
 import { useSelectionStore, type DataSelection } from '@/stores/interactionStores/selectionStore';
 
 import _ from 'lodash-es'
@@ -30,7 +30,7 @@ interface ConditionChartSelection {
 export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
 
     let mosaicSelection = vg.Selection.intersect();
-    const conditionChartSelections: Record<string, ConditionChartSelection> = {};
+    // const conditionChartSelections: Record<string, ConditionChartSelection> = {};
     const conditionChartSelectedParams: Record<string, any> = {}
     const conditionChartSelectionsInitialized = ref<boolean>(false);
 
@@ -41,89 +41,92 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     // let previousDataSelections = _.cloneDeep(dataSelections.value);
     let previousDataSelections: DataSelection[] = []
 
-    // Subscribe to DataSelections
-    watch(dataSelections, (newDataSelections) => {
-        // Track Changes in number of plots
-        let previousPlots = previousDataSelections.map(entry => entry.plotName);
-
-        // In shared plots, get different ranges
-        newDataSelections.forEach((entry) => {
-            const currPlotName = entry.plotName;
-            if (entry.range[0] !== -Infinity && entry.range[1] !== -Infinity) {
-                if (previousPlots.includes(currPlotName)) {
-                    const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === currPlotName);
-                    if (previousSelection && !_.isEqual(previousSelection.range, entry.range)) {
-                        // Call update with new range
-                        updateMosaicSelection(currPlotName, entry.range)
-                    }
-                    // Remove Name from previousPlots
-                    previousPlots = previousPlots.filter(plotName => plotName !== currPlotName)
-                } else {
-                    // Update with new plot source
-                    updateMosaicSelection(currPlotName, entry.range)
-                }
+    const conditionChartSelections = computed((): Record<string, ConditionChartSelection> => {
+        const keysList = Object.keys(conditionSelectorStore.currentExperimentTags);
+        let tempConditionChartSelections: Record<string, ConditionChartSelection> = {};
+        for (let i = 0; i < keysList.length; i++) {
+            const currKey = keysList[i];
+            const currValues = conditionSelectorStore.currentExperimentTags[currKey];
+
+            for (let j = i + 1; j < keysList.length; j++) {
+                //Compare currValues with all other lists
+                const compareKey = keysList[j];
+                const compareValues = conditionSelectorStore.currentExperimentTags[compareKey];
+
+                currValues.forEach((currValue: string) => {
+                    compareValues.forEach((compareValue: string) => {
+
+                        // Create new selection based on comparison
+                        const newSelection = vg.Selection.intersect();
+                        const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`
+                        const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`
+                        const clause: Clause = {
+                            source: newSource,
+                            predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`
+                        }
+
+                        newSelection.update(clause);
+                        const conditionChartSelection: ConditionChartSelection = {
+                            baseSelection: newSelection,
+                            filteredSelection: newSelection.clone()
+                        }
+
+                        tempConditionChartSelections[newSource] = conditionChartSelection;
+                        tempConditionChartSelections[reversedSource] = conditionChartSelection;
+                    })
+                })
             }
-        })
-
-        // If greater than 0, means previous dataSelections has a selection no longer around.
-        if (previousPlots.length > 0) {
-            previousPlots.forEach(prevPlotName => {
-                const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === prevPlotName);
+        }
 
-                // Update mosaic with the given max range
-                if (previousSelection) {
+        return tempConditionChartSelections;
+
+    });
+
+    // Subscribe to DataSelections. Waits for Condition Chart selections to be initialized.
+    watch([dataSelections, conditionChartSelections], ([newDataSelections, newConditionChartSelections]) => {
+        if (Object.keys(newConditionChartSelections).length > 0) {
+            // Track Changes in number of plots
+            let previousPlots = previousDataSelections.map(entry => entry.plotName);
+
+            // In shared plots, get different ranges
+            newDataSelections.forEach((entry) => {
+                const currPlotName = entry.plotName;
+                if (entry.range[0] !== -Infinity && entry.range[1] !== -Infinity) {
+                    if (previousPlots.includes(currPlotName)) {
+                        const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === currPlotName);
+                        if (previousSelection && !_.isEqual(previousSelection.range, entry.range)) {
+                            // Call update with new range
+                            updateMosaicSelection(currPlotName, entry.range)
+                        }
+                        // Remove Name from previousPlots
+                        previousPlots = previousPlots.filter(plotName => plotName !== currPlotName)
+                    } else {
+                        // Update with new plot source
 
-                    updateMosaicSelection(previousSelection.plotName, previousSelection.maxRange);
+                        updateMosaicSelection(currPlotName, entry.range)
+                    }
                 }
             })
-        }
 
-        previousDataSelections = _.cloneDeep(newDataSelections);
-    }, { deep: true, immediate: true })
+            // If greater than 0, means previous dataSelections has a selection no longer around.
+            if (previousPlots.length > 0) {
+                previousPlots.forEach(prevPlotName => {
+                    const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === prevPlotName);
 
+                    // Update mosaic with the given max range
+                    if (previousSelection) {
 
-    // Initialize Condition Chart Selections
-    watch(() => JSON.stringify(conditionSelectorStore.currentExperimentTags), (newTagsString, oldTagsString) => {
-        if (newTagsString !== oldTagsString) {
-            const newExperimentTags = JSON.parse(newTagsString);
-            const keysList = Object.keys(newExperimentTags);
-            for (let i = 0; i < keysList.length; i++) {
-                const currKey = keysList[i];
-                const currValues = newExperimentTags[currKey];
-
-                for (let j = i + 1; j < keysList.length; j++) {
-                    //Compare currValues with all other lists
-                    const compareKey = keysList[j];
-                    const compareValues = newExperimentTags[compareKey];
-
-                    currValues.forEach((currValue: string) => {
-                        compareValues.forEach((compareValue: string) => {
-
-                            // Create new selection based on comparison
-                            const newSelection = vg.Selection.intersect();
-                            const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`
-                            const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`
-                            const clause: Clause = {
-                                source: newSource,
-                                predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`
-                            }
-
-                            newSelection.update(clause);
-                            const conditionChartSelection: ConditionChartSelection = {
-                                baseSelection: newSelection,
-                                filteredSelection: newSelection.clone()
-                            }
-
-                            conditionChartSelections[newSource] = conditionChartSelection;
-                            conditionChartSelections[reversedSource] = conditionChartSelection;
-                        })
-                    })
-                }
-
+                        updateMosaicSelection(previousSelection.plotName, previousSelection.maxRange);
+                    }
+                })
             }
-            conditionChartSelectionsInitialized.value = true;
+
+            previousDataSelections = _.cloneDeep(newDataSelections);
         }
-    }, { immediate: true, deep: true })
+
+        console.log('finished')
+    }, { deep: true, immediate: true })
+
 
 
     // Used to watch when selectedGrid changes
@@ -163,7 +166,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
         }
         conditionChartSelection.update(clause)
         // Add selection to record
-        conditionChartSelections[source] = conditionChartSelection;
+        conditionChartSelections.value[source] = conditionChartSelection;
         // Add parameter to record
         conditionChartSelectedParams[source] = conditionChartSelectedParam;
 
@@ -176,7 +179,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     function _updateConditionChartSelections(clause: Clause) {
-        Object.values(conditionChartSelections).forEach((selectionObject: ConditionChartSelection) => {
+        Object.values(conditionChartSelections.value).forEach((selectionObject: ConditionChartSelection) => {
             selectionObject.filteredSelection.update(clause);
         })
     }

From 00c41b13a80103f939c6aec1e5435e0b3e2faf91 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Mon, 28 Oct 2024 08:52:28 -0600
Subject: [PATCH 33/64] Revmoed unnecessary logs

---
 apps/client/src/components/conditionSelector/ConditionChart.vue | 2 --
 apps/client/src/stores/dataStores/mosaicSelectionStore.ts       | 1 -
 2 files changed, 3 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index ccbc778d..ed8fbd5d 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -25,7 +25,6 @@ const globalSettings = useGlobalSettings();
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
 const { conditionChartSelections  } = useMosaicSelectionStore();
-const { conditionChartSelectionsInitialized} = storeToRefs(useMosaicSelectionStore());
 const { chartColorScheme } = useConditionSelectorStore();
 
 // Container for chart.
@@ -33,7 +32,6 @@ const chartContainer = ref<HTMLElement | null>(null);
 watch([experimentDataInitialized, conditionChartSelections], async ([isInitialized, newConditionChartSelections]) => {    
     if(isInitialized){
         await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
-        console.log('Im here to make the chart')
         createChart(
             props.xAxisName,
             props.yAxisName,
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 5ba82c9c..fc033148 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -135,7 +135,6 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
 
         // Whenever selected Grid Changes, change
 
-
     })
 
 

From 7fb1fef2778523aa2f554eacc231dc9ec5717a86 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:46:20 -0600
Subject: [PATCH 34/64] Shaded area of chart colors altered

---
 .../conditionSelector/ConditionChart.vue      | 83 +++++++++++--------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index ed8fbd5d..4d781431 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, nextTick} from 'vue';
+import { ref, nextTick } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
@@ -12,50 +12,46 @@ import { storeToRefs } from 'pinia';
 // Props from parent component
 // Accept props from the parent component
 const props = defineProps<{
-    tags: [string,string][];
+    tags: [string, string][];
     xAxisName: string;
     yAxisName: string;
-    yIndex:number;
-    selected:boolean;
+    yIndex: number;
+    selected: boolean;
 }>();
 
 // Will use soon for dark mode.
 const globalSettings = useGlobalSettings();
 
 const datasetSelectionStore = useDatasetSelectionStore();
-const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
-const { conditionChartSelections  } = useMosaicSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
+    datasetSelectionStore
+);
+const { conditionChartSelections } = useMosaicSelectionStore();
 const { chartColorScheme } = useConditionSelectorStore();
 
 // Container for chart.
 const chartContainer = ref<HTMLElement | null>(null);
-watch([experimentDataInitialized, conditionChartSelections], async ([isInitialized, newConditionChartSelections]) => {    
-    if(isInitialized){
-        await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
-        createChart(
-            props.xAxisName,
-            props.yAxisName,
-        );
-    }
-}, {immediate : true, deep : true })
-
+watch(
+    [experimentDataInitialized, conditionChartSelections],
+    async ([isInitialized, newConditionChartSelections]) => {
+        if (isInitialized) {
+            await nextTick(); // Helps with hot reloading. On save, html ref will be temporarily none. This will wait until html has a ref.
+            createChart(props.xAxisName, props.yAxisName);
+        }
+    },
+    { immediate: true, deep: true }
+);
 
 // Creates a new set of selections and adds them to an overall list that is updated whenever general mosaicSelection 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. mosaicSelection).
 
 // Styles
-const lineColor = chartColorScheme[props.yIndex % 6]
+const lineColor = chartColorScheme[props.yIndex % 6];
 const strokeWidth = 5;
 
-async 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]}`
+async 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)
@@ -63,15 +59,16 @@ async function createChart(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: conditionChartSelections[source].baseSelection
+                        filterBy:
+                            conditionChartSelections[source].baseSelection,
                     }
                 ),
                 {
                     x: xAxisName,
                     y1: 0,
                     y: vg.avg(yAxisName),
-                    fill: 'grey',
-                    fillOpacity: 0.2,
+                    fill: '#f8f8f8',
+                    fillOpacity: 1,
                     curve: 'basis',
                     stroke: null,
                 }
@@ -80,7 +77,8 @@ async function createChart(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: conditionChartSelections[source].baseSelection
+                        filterBy:
+                            conditionChartSelections[source].baseSelection,
                     }
                 ),
                 {
@@ -89,15 +87,34 @@ async function createChart(
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
-                    opacity:0.5
+                    opacity: 0.2,
                 }
             ),
             // Plots Line Chart based on selection.
+            vg.areaY(
+                vg.from(
+                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
+                    {
+                        filterBy:
+                            conditionChartSelections[source].filteredSelection,
+                    }
+                ),
+                {
+                    x: xAxisName,
+                    y1: 0,
+                    y: vg.avg(yAxisName),
+                    fill: 'grey',
+                    fillOpacity: 0.2,
+                    curve: 'basis',
+                    stroke: null,
+                }
+            ),
             vg.lineY(
                 vg.from(
                     `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
                     {
-                        filterBy: conditionChartSelections[source].filteredSelection
+                        filterBy:
+                            conditionChartSelections[source].filteredSelection,
                     }
                 ),
                 {
@@ -106,7 +123,7 @@ async function createChart(
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
-                    opacity:1
+                    opacity: 1,
                 }
             ),
 

From 80ce2d35a5270d34f3d8ea9b6ba67901a9b756c6 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 28 Oct 2024 20:59:19 -0600
Subject: [PATCH 35/64] Track Attributes UI (empty, non-functional yet)

---
 .../globalSettings/FilterSelector.vue         |  15 ++-
 .../globalSettings/PlotSelector.vue           | 104 ++++++++++++++++--
 2 files changed, 107 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index 39231c48..977e1323 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -33,6 +33,7 @@ function addFilter() {
 }
 
 const cellAttributesOpen = ref(true);
+const trackAttributesOpen = ref(true);
 
 const mutedTextClass = computed(() =>
     globalSettings.darkMode ? 'text-grey-5' : 'text-grey-8'
@@ -184,11 +185,21 @@ const mutedTextClass = computed(() =>
             label="Cell Attributes"
         >
             <q-card :dark="globalSettings.darkMode">
-                <PlotSelector></PlotSelector>
+                <PlotSelector selector-type="Cell"></PlotSelector>
             </q-card>
         </q-expansion-item>
 
-        <q-separator />
+        <q-separator class="q-my-sm" />
+
+        <q-expansion-item
+            v-model="trackAttributesOpen"
+            icon="linear_scale"
+            label="Track Attributes"
+        >
+            <q-card :dark="globalSettings.darkMode">
+                <PlotSelector selector-type="Track"></PlotSelector>
+            </q-card>
+        </q-expansion-item>
     </q-list>
 </template>
 
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 61253834..46db8e27 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -19,7 +19,18 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
 
-const menuOpen = ref(false);
+const props = defineProps({
+    selectorType: {
+        type: String,
+        required: true,
+        validator: (value: string) => ['Track', 'Cell'].includes(value),
+    },
+});
+
+const cellPlotMenuOpen = ref(false);
+const trackPlotDialogOpen = ref(false);
+const selectedAttribute = ref('');
+const selectedAggregation = ref('');
 const loading = ref(true);
 const loadedPlots = ref(0);
 const displayedPlots = computed(() =>
@@ -27,6 +38,14 @@ const displayedPlots = computed(() =>
 );
 const totalPlots = computed(() => displayedPlots.value.length);
 
+const aggregationOptions = [
+    { label: 'Sum', value: 'sum' },
+    { label: 'Average', value: 'average' },
+    { label: 'Count', value: 'count' },
+    { label: 'Minimum', value: 'min' },
+    { label: 'Maximum', value: 'max' },
+];
+
 // On any update, computes the plots to be shown.
 
 // Checks if specifically experiment metadata is already loaded.
@@ -109,7 +128,6 @@ function handlePlotLoaded() {
     }
 }
 
-
 // Selecting which plots to show
 function isPlotSelected(name: string): boolean {
     const selection = selectionStore.getSelection(name);
@@ -125,6 +143,14 @@ function togglePlotSelection(name: string) {
     selection.displayChart = !selection.displayChart;
 }
 
+function onMenuButtonClick() {
+    trackPlotDialogOpen.value = true;
+}
+
+function onSubmit() {
+    trackPlotDialogOpen.value = false;
+}
+
 function handleSelectionRemoved(event: CustomEvent) {
     clearMosaicSource(event.detail);
 }
@@ -149,9 +175,12 @@ window.addEventListener(
                     round
                     icon="menu"
                     color="grey-7"
+                    @click="onMenuButtonClick"
                 >
+                    <!-- Q-Menu for 'Cell' Selector -->
                     <q-menu
-                        v-model="menuOpen"
+                        v-if="props.selectorType === 'Cell'"
+                        v-model="cellPlotMenuOpen"
                         fit
                         :dark="globalSettings.darkMode"
                     >
@@ -175,15 +204,70 @@ window.addEventListener(
                             </q-item>
                         </q-list>
                     </q-menu>
+
+                    <!-- Q-Dialog for 'Track' Selector -->
+                    <q-dialog
+                        v-if="props.selectorType === 'Track'"
+                        v-model="trackPlotDialogOpen"
+                        persistent
+                    >
+                        <q-card :dark="globalSettings.darkMode">
+                            <q-card-section>
+                                <div class="text-h6">
+                                    Add Track Attribute to Display
+                                </div>
+                                <q-separator class="q-my-sm" />
+                                <q-form
+                                    @submit="onSubmit"
+                                    class="q-gutter-md"
+                                    :dark="globalSettings.darkMode"
+                                >
+                                    <q-select
+                                        label="Select Attribute"
+                                        :options="allPlotNames"
+                                        v-model="selectedAttribute"
+                                        clickable
+                                    >
+                                    </q-select>
+                                    <q-select
+                                        label="Select Aggregation"
+                                        :options="aggregationOptions"
+                                        v-model="selectedAggregation"
+                                        clickable
+                                    >
+                                    </q-select>
+
+                                    <div>
+                                        <q-btn
+                                            label="Add"
+                                            type="submit"
+                                            color="primary"
+                                            :dark="globalSettings.darkMode"
+                                        />
+                                        <q-btn
+                                            label="Cancel"
+                                            color="primary"
+                                            flat
+                                            @click="trackPlotDialogOpen = false"
+                                            class="q-ml-sm"
+                                            :dark="globalSettings.darkMode"
+                                        />
+                                    </div>
+                                </q-form>
+                            </q-card-section>
+                        </q-card>
+                    </q-dialog>
                 </q-btn>
             </div>
-            <UnivariateCellPlot
-                v-for="dataSelection in displayedPlots"
-                :key="dataSelection.plotName"
-                :plot-name="dataSelection.plotName"
-                @plot-loaded="handlePlotLoaded"
-                @plot-error="handlePlotError"
-            />
+            <template v-if="props.selectorType === 'Cell'">
+                <UnivariateCellPlot
+                    v-for="dataSelection in displayedPlots"
+                    :key="dataSelection.plotName"
+                    :plot-name="dataSelection.plotName"
+                    @plot-loaded="handlePlotLoaded"
+                    @plot-error="handlePlotError"
+                />
+            </template>
         </div>
     </div>
 </template>

From 49fc4f9cd909590bfe9014c87da69488a9a91305 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 29 Oct 2024 11:35:42 -0600
Subject: [PATCH 36/64] Removed clearMosaicSource from plot selector vue since
 unnecessary. Removed opacity stuff from conditionSelector store.

---
 .../components/globalSettings/PlotSelector.vue  |  3 +--
 .../componentStores/conditionSelectorStore.ts   | 17 -----------------
 .../stores/dataStores/mosaicSelectionStore.ts   |  1 -
 3 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 46db8e27..24b7c98a 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -104,7 +104,6 @@ function handlePlotError(plotName: string) {
     // Deselect the plot and remove it from the shown plots
     selectionStore.removePlotWithErrors(plotName);
 
-    clearMosaicSource(plotName);
 }
 
 // Adds a plot initially when first loading.
@@ -152,7 +151,7 @@ function onSubmit() {
 }
 
 function handleSelectionRemoved(event: CustomEvent) {
-    clearMosaicSource(event.detail);
+    // clearMosaicSource(event.detail);
 }
 
 window.addEventListener(
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index edb29510..96719c27 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -122,28 +122,11 @@ export const useConditionSelectorStore = defineStore('conditionSelector', () =>
 
         const currentValue = selectedGrid.value[`${currentColumnVal}-${currentRowVal}`];
 
-        // If currently selected, new opacity will be 0 because we are 'de-selecting'.
-        let newOpacity = currentValue ? 0 : 1;
         let newValue = !currentValue;
         if (allSelected !== null) {
-            newOpacity = allSelected ? 0 : 1;
             newValue = allSelected ? false : true;
         }
 
-
-        if (!(`${currentColumnVal}-${currentRowVal}` in selectedGrid.value)) {
-            // If nothing has been selected, update all opacities to 0
-            if (Object.keys(selectedGrid.value).length === 0) {
-                // mosaicSelectionStore.updateOpacityParamAll(0)
-            }
-        }
-
-        // Get Current Selection ID
-        const source = `${selectedXTag.value}-${currentColumnVal}_${selectedYTag.value}-${currentRowVal}`
-
-        // Update opacity to 1
-        // mosaicSelectionStore.updateOpacityParam(source, newOpacity);
-
         // Set 'Selected' on current selection
         selectedGrid.value[`${currentColumnVal}-${currentRowVal}`] = newValue;
 
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index fc033148..86f754f1 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -38,7 +38,6 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     const { dataSelections } = storeToRefs(selectionStore);
     const conditionSelectorStore = useConditionSelectorStore();
 
-    // let previousDataSelections = _.cloneDeep(dataSelections.value);
     let previousDataSelections: DataSelection[] = []
 
     const conditionChartSelections = computed((): Record<string, ConditionChartSelection> => {

From 489073c7e4df865b4550d35b79f34d7c9c8d4aa7 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 29 Oct 2024 16:57:25 -0600
Subject: [PATCH 37/64] Added aggregate table creation

---
 .../components/conditionSelector/duckdb_findings.txt   |  7 +++++++
 .../src/components/globalSettings/PlotSelector.vue     |  8 ++++----
 .../dataStores/datasetSelectionUntrrackedStore.ts      |  2 ++
 apps/client/src/util/datasetLoader.ts                  | 10 ++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/duckdb_findings.txt b/apps/client/src/components/conditionSelector/duckdb_findings.txt
index 3cf20fd6..af78beb5 100644
--- a/apps/client/src/components/conditionSelector/duckdb_findings.txt
+++ b/apps/client/src/components/conditionSelector/duckdb_findings.txt
@@ -35,3 +35,10 @@ DuckDB Findings
 
     SELECT tracking_id, location, avg("Dry Mass (pg)") from table group by tracking_id, location;
 
+
+
+const $test_selection = vg.Selection.intersect();
+$test_selection.update({
+    source:'test_source',
+    predicate:`"Tracking ID" IN (SELECT tracking_id FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata_aggregate WHERE track_length between 0 and 100 )`
+})
\ No newline at end of file
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 24b7c98a..cd8d10a4 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -154,10 +154,10 @@ function handleSelectionRemoved(event: CustomEvent) {
     // clearMosaicSource(event.detail);
 }
 
-window.addEventListener(
-    'selectionRemoved',
-    handleSelectionRemoved as EventListener
-);
+// window.addEventListener(
+//     'selectionRemoved',
+//     handleSelectionRemoved as EventListener
+// );
 </script>
 <template>
     <div>
diff --git a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index c0633f37..9ddd1433 100644
--- a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -13,6 +13,7 @@ import {
     type CsvParserResults,
     loadCsv,
     loadFileIntoDuckDb,
+    createAggregateTable,
 } from '@/util/datasetLoader';
 import { useNotificationStore } from '../misc/notificationStore';
 
@@ -142,6 +143,7 @@ export const useDatasetSelectionStore = defineStore(
                         `${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`,
                         'parquet'
                     );
+                    await createAggregateTable(`${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`)
                     notify({
                         type: 'success',
                         message: `Created DuckDb Table for ${duckDbFileUrl}.`,
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 1c024941..02baa95a 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -80,3 +80,13 @@ export async function loadFileIntoDuckDb(
         throw new Error(message);
     }
 }
+
+
+export async function createAggregateTable(tableName: string) {
+    await vg.coordinator().exec([`
+        CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
+        SELECT AVG("Dry Mass (pg)") as avg_mass, COUNT("Tracking ID") as track_length, "Tracking ID" as tracking_id
+        FROM ${tableName}
+        GROUP BY "Tracking ID"
+    `]);
+}

From 89af3587f8adb5f2ab1a77c02dc73e4db88a4941 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Wed, 30 Oct 2024 14:28:10 -0600
Subject: [PATCH 38/64] Added typing for data selections -- defaults to cell.
 Updated mosaic selection store to use aggregate track level attributes

---
 .../components/exemplarView/ExemplarView.vue  | 17 +++++++-
 .../stores/dataStores/mosaicSelectionStore.ts | 42 ++++++++++++++++---
 .../interactionStores/selectionStore.ts       |  4 +-
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/components/exemplarView/ExemplarView.vue b/apps/client/src/components/exemplarView/ExemplarView.vue
index c134001b..fa99eeda 100644
--- a/apps/client/src/components/exemplarView/ExemplarView.vue
+++ b/apps/client/src/components/exemplarView/ExemplarView.vue
@@ -6,6 +6,8 @@ import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore'
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import { useConditionSelectorStore } from '@/stores/componentStores/conditionSelectorStore';
 import { storeToRefs } from 'pinia';
+import LBtn from '../custom/LBtn.vue';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
 
 
 
@@ -15,6 +17,10 @@ import { storeToRefs } from 'pinia';
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
 const { chartColorScheme } = useConditionSelectorStore();
+const selectionStore = useSelectionStore();
+
+const { dataSelections } = storeToRefs(selectionStore);
+
 
 
 const chartContainer = ref<HTMLElement | null>(null);
@@ -26,6 +32,13 @@ watch(experimentDataInitialized, async (isInitialized) => {
 }, {immediate : true, deep:true})
 
 
+const handleOnClick = () => {
+    console.log('hello')
+    const plotName = "avg_mass"
+    // const range = [0,100];
+    selectionStore.updateSelection(plotName, [0,500], "track");
+    console.log(dataSelections.value);
+}
 
 
 async function createChart(){
@@ -63,7 +76,9 @@ async function createChart(){
 
 </script>
 <template>
-    <div style="width:100%;height:100%;" ref="chartContainer"></div>
+    <!-- <div style="width:100%;height:100%;" ref="chartContainer"></div> -->
+    <l-btn @click="handleOnClick" style="margin-left:20px" label="Click me!">Test</l-btn>
+    <div></div>
 </template>
 <style scoped lang="scss">
 </style>
\ No newline at end of file
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 86f754f1..76969f9b 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -2,6 +2,7 @@ import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
 import { watch, ref, computed } from 'vue';
 import { useSelectionStore, type DataSelection } from '@/stores/interactionStores/selectionStore';
+import { useDatasetSelectionStore } from './datasetSelectionUntrrackedStore';
 
 import _ from 'lodash-es'
 import { useConditionSelectorStore } from '../componentStores/conditionSelectorStore';
@@ -38,6 +39,11 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     const { dataSelections } = storeToRefs(selectionStore);
     const conditionSelectorStore = useConditionSelectorStore();
 
+    const datasetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata } = storeToRefs(
+        datasetSelectionStore
+    );
+
     let previousDataSelections: DataSelection[] = []
 
     const conditionChartSelections = computed((): Record<string, ConditionChartSelection> => {
@@ -95,14 +101,14 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
                         const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === currPlotName);
                         if (previousSelection && !_.isEqual(previousSelection.range, entry.range)) {
                             // Call update with new range
-                            updateMosaicSelection(currPlotName, entry.range)
+                            updateMosaicSelection(currPlotName, entry.range, entry.type)
                         }
                         // Remove Name from previousPlots
                         previousPlots = previousPlots.filter(plotName => plotName !== currPlotName)
                     } else {
                         // Update with new plot source
 
-                        updateMosaicSelection(currPlotName, entry.range)
+                        updateMosaicSelection(currPlotName, entry.range, entry.type)
                     }
                 }
             })
@@ -115,7 +121,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
                     // Update mosaic with the given max range
                     if (previousSelection) {
 
-                        updateMosaicSelection(previousSelection.plotName, previousSelection.maxRange);
+                        updateMosaicSelection(previousSelection.plotName, previousSelection.maxRange, previousSelection.type);
                     }
                 })
             }
@@ -143,11 +149,35 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     // Called when a slider input needs to update selection
-    function updateMosaicSelection(plotName: string, range: [number, number] | null = null) {
+    function updateMosaicSelection(plotName: string, range: [number, number] | null = null, type: DataSelection['type']) {
+
+        //
+
+
         const escapedSource = _escapeSource(plotName)
+        let predicate;
+
+        if (type === 'cell') {
+            // If cell, base only on range
+            predicate = range ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}` : null
+        } else if (type == 'track') {
+            // If track, we filter by tracking IDs
+
+            // Get ID Column
+            const id_column = currentExperimentMetadata.value?.headerTransforms?.['id']
+
+            // Aggregate Table Name
+            const table_name = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`
+
+            // Predicate has a subquery to pull IDs from aggregate table fitting the range
+            predicate = range ? `"${id_column}" IN (SELECT tracking_id FROM ${table_name} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )` : null
+        } else {
+            predicate = null;
+        }
+
         const clause = {
             source: plotName,
-            predicate: range ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}` : null
+            predicate
         }
         mosaicSelection.update(clause);
         _updateConditionChartSelections(clause)
@@ -183,7 +213,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     function clearMosaicSource(source: string) {
-        updateMosaicSelection(source);
+        updateMosaicSelection(source, null, 'cell');
     }
 
     function updateOpacityParam(source: string, value: number) {
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index 10e2425b..84bb4e84 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -50,7 +50,7 @@ export const useSelectionStore = defineStore('Selection', {
                 ...this.dataSelections[index].maxRange,
             ];
         },
-        updateSelection(plotName: string, range: [number, number]) {
+        updateSelection(plotName: string, range: [number, number], type?: DataSelection['type']) {
             const existingIndex = this.dataSelections.findIndex(
                 (s) => s.plotName === plotName
             );
@@ -60,7 +60,7 @@ export const useSelectionStore = defineStore('Selection', {
                 this.addSelection({
                     plotName,
                     range,
-                    type: 'cell', // Default value
+                    type: type ?? 'cell', // Default value
                     maxRange: [...range], // Using the provided range as maxRange
                     displayChart: true, // Default value
                 });

From 1bfdecc244b72a477efd5c5fe524f002062bf372 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Wed, 30 Oct 2024 18:00:36 -0600
Subject: [PATCH 39/64] Track Attributes Displays 'avg_mass'

---
 .../globalSettings/PlotSelector.vue           | 13 ++++-
 .../globalSettings/UnivariateCellPlot.vue     | 51 ++++++++++++-------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index cd8d10a4..bcaf6b2e 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -98,12 +98,11 @@ function handlePlotError(plotName: string) {
 
     notificationStore.notify({
         type: 'problem',
-        message: `An Error occured while loading the plot ${errorPlotName}`,
+        message: `An Error occured while loading the plot ${errorPlotName.value}`,
     });
 
     // Deselect the plot and remove it from the shown plots
     selectionStore.removePlotWithErrors(plotName);
-
 }
 
 // Adds a plot initially when first loading.
@@ -263,6 +262,16 @@ function handleSelectionRemoved(event: CustomEvent) {
                     v-for="dataSelection in displayedPlots"
                     :key="dataSelection.plotName"
                     :plot-name="dataSelection.plotName"
+                    :attribute-type="'Cell'"
+                    @plot-loaded="handlePlotLoaded"
+                    @plot-error="handlePlotError"
+                />
+            </template>
+            <template v-if="props.selectorType === 'Track'">
+                <UnivariateCellPlot
+                    :key="'avg_mass'"
+                    :plot-name="'avg_mass'"
+                    :attribute-type="'Track'"
                     @plot-loaded="handlePlotLoaded"
                     @plot-error="handlePlotError"
                 />
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index a0b568ef..23d96d5c 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -15,46 +15,63 @@ import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStor
 
 // Initialise Data
 const datasetSelectionStore = useDatasetSelectionStore();
-const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
+    datasetSelectionStore
+);
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
 const { mosaicSelection, updateMosaicSelection } = useMosaicSelectionStore();
 
-
 // Define Plot Emits and Props
 const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
 const props = defineProps({
     plotName: {
         type: String as PropType<string>,
         required: true,
+    },
+    attributeType: {
+        type: String,
+        required: true,
+        validator: (value: string) => ['Track', 'Cell'].includes(value),
+    },
+});
+
+const datasetName = computed(() => {
+    const baseName = currentExperimentMetadata?.value?.name;
+    if (props.attributeType === 'Cell') {
+        return `${baseName}_composite_experiment_cell_metadata`;
+    } else {
+        return `${baseName}_composite_experiment_cell_metadata_aggregate`;
     }
 });
 
+let selectedDataOptions = {};
+
+// Conditionally add filterBy property when attributeType is 'Cell'
+if (props.attributeType === 'Cell') {
+    selectedDataOptions = { filterBy: mosaicSelection };
+}
+
 // Vg Plot
 function makePlot(column: string) {
-        try {
+    try {
         return vg.plot(
             // Background grey data
-            vg.rectY(vg.from(`${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`), {
+            vg.rectY(vg.from(datasetName.value), {
                 x: vg.bin(column),
                 y: vg.count(),
                 fill: '#cccccc',
                 inset: 1,
             }),
             // Currently Selected Data
-            vg.rectY(
-                vg.from(`${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`, {
-                    filterBy: mosaicSelection,
-                }),
-                {
-                    x: vg.bin(column),
-                    y: vg.count(),
-                    fill: '#377eb8',
-                    opacity: 1,
-                    inset: 1,
-                }
-            ),
+            vg.rectY(vg.from(datasetName.value, selectedDataOptions), {
+                x: vg.bin(column),
+                y: vg.count(),
+                fill: '#377eb8',
+                opacity: 1,
+                inset: 1,
+            }),
             vg.marginBottom(45),
             vg.marginTop(5),
             vg.marginLeft(20),
@@ -76,8 +93,6 @@ function makePlot(column: string) {
     } catch (error) {
         emit('plot-error', props.plotName);
     }
-
-
 }
 
 // Handle Loading of Everything

From 8976fb2a7ce3b64a2a226e529a3ff56bee995b48 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 31 Oct 2024 12:41:29 -0600
Subject: [PATCH 40/64] Added error checking for creating aggregate table.
 Using header transform values in creation of aggregate table.

---
 .../datasetSelectionUntrrackedStore.ts        | 15 +++++-
 apps/client/src/util/datasetLoader.ts         | 46 ++++++++++++++++---
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index 9ddd1433..81a987d5 100644
--- a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -143,11 +143,24 @@ export const useDatasetSelectionStore = defineStore(
                         `${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`,
                         'parquet'
                     );
-                    await createAggregateTable(`${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`)
+                    try {
+                        await createAggregateTable(`${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`, currentExperimentMetadata.value.headerTransforms)
+                        notify({
+                            type: 'success',
+                            message: `Created Aggregate DuckDB Table for ${duckDbFileUrl}.`,
+                        });
+                    } catch (error) {
+                        const typedError = error as Error
+                        notify({
+                            type: 'problem',
+                            message: typedError.message
+                        })
+                    }
                     notify({
                         type: 'success',
                         message: `Created DuckDb Table for ${duckDbFileUrl}.`,
                     });
+
                 } catch (error) {
                     const typedError = error as Error;
                     notify({
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 02baa95a..f2dd5447 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -1,5 +1,7 @@
 import { parse, type ParseResult } from 'papaparse';
 import * as vg from '@uwdata/vgplot';
+// import type {ExperimentMetadata}
+import type { ExperimentMetadata } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 
 export type CsvParserResults = ParseResult<AnyAttributes>;
 
@@ -19,8 +21,16 @@ export interface AnyAttributes {
     [index: string]: any;
 }
 
+// Any reason these shouldn't be specifically typed?
 export interface TextTransforms {
     [index: string]: string;
+    // frame:string,
+    // id:string,
+    // mass:string,
+    // parent:string,
+    // time: string,
+    // x:string,
+    // y:string
 }
 
 // Parses CSV file. Accepts callback for additional processing.
@@ -82,11 +92,33 @@ export async function loadFileIntoDuckDb(
 }
 
 
-export async function createAggregateTable(tableName: string) {
-    await vg.coordinator().exec([`
-        CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
-        SELECT AVG("Dry Mass (pg)") as avg_mass, COUNT("Tracking ID") as track_length, "Tracking ID" as tracking_id
-        FROM ${tableName}
-        GROUP BY "Tracking ID"
-    `]);
+export async function createAggregateTable(tableName: string, headerTransforms: ExperimentMetadata['headerTransforms']) {
+    if (headerTransforms) {
+        const { frame, id, mass, parent, time, x, y } = headerTransforms
+
+
+        try {
+            // Only for testing. Uncomment this to refresh table in cache
+            // try {
+            //     await vg.coordinator().exec([`
+            //     DROP TABLE IF EXISTS ${tableName}_aggregate
+            //     `]);
+            // } catch (error) {
+            //     console.error(error);
+            // }
+            await vg.coordinator().exec([`
+                CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
+                SELECT AVG("${mass}") as avg_mass, COUNT("${id}") as track_length, "${id}" as tracking_id
+                FROM ${tableName}
+                GROUP BY "${id}"
+            `]);
+        } catch (error) {
+            const message = `Unexpected error when creating aggregate table.`
+            console.error(message);
+            throw new Error(message);
+        }
+    }
+
+
+
 }

From 7c42e19607f44b94a4bfa8271698846b74305383 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:10:21 -0600
Subject: [PATCH 41/64] creates track level attributes

---
 .../globalSettings/PlotSelector.vue           |  24 +-
 .../globalSettings/UnivariateCellPlot.vue     |  25 +-
 .../stores/dataStores/mosaicSelectionStore.ts | 295 ++++++++++--------
 .../interactionStores/selectionStore.ts       |  59 +++-
 4 files changed, 254 insertions(+), 149 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index bcaf6b2e..be7a0de6 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -33,10 +33,15 @@ const selectedAttribute = ref('');
 const selectedAggregation = ref('');
 const loading = ref(true);
 const loadedPlots = ref(0);
-const displayedPlots = computed(() =>
-    dataSelections.value.filter((d) => d.displayChart)
-);
-const totalPlots = computed(() => displayedPlots.value.length);
+const displayedCellPlots = computed(() => {
+    const filtered = dataSelections.value.filter(
+        (d) => d.displayChart && d.type === 'cell'
+    );
+    console.log('Filtered Cell Plots:', filtered);
+    return filtered;
+});
+
+const totalCellPlots = computed(() => displayedCellPlots.value.length);
 
 const aggregationOptions = [
     { label: 'Sum', value: 'sum' },
@@ -112,7 +117,10 @@ onMounted(() => {
         experimentDataInitialized,
         (isInitialized) => {
             if (isInitialized && firstPlotName.value) {
-                selectionStore.addPlot(firstPlotName.value);
+                selectionStore.addPlot(firstPlotName.value, 'cell');
+
+                // For testing track attributes
+                selectionStore.addPlot('avg_mass', 'track');
             }
         },
         { immediate: true }
@@ -121,7 +129,7 @@ onMounted(() => {
 
 function handlePlotLoaded() {
     loadedPlots.value++;
-    if (loadedPlots.value === totalPlots.value) {
+    if (loadedPlots.value === totalCellPlots.value) {
         loading.value = false;
     }
 }
@@ -135,7 +143,7 @@ function isPlotSelected(name: string): boolean {
 function togglePlotSelection(name: string) {
     const selection = selectionStore.getSelection(name);
     if (selection === null) {
-        selectionStore.addPlot(name);
+        selectionStore.addPlot(name, 'cell');
         return;
     }
     selection.displayChart = !selection.displayChart;
@@ -259,7 +267,7 @@ function handleSelectionRemoved(event: CustomEvent) {
             </div>
             <template v-if="props.selectorType === 'Cell'">
                 <UnivariateCellPlot
-                    v-for="dataSelection in displayedPlots"
+                    v-for="dataSelection in displayedCellPlots"
                     :key="dataSelection.plotName"
                     :plot-name="dataSelection.plotName"
                     :attribute-type="'Cell'"
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index 23d96d5c..aa93b6d5 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -40,8 +40,10 @@ const props = defineProps({
 const datasetName = computed(() => {
     const baseName = currentExperimentMetadata?.value?.name;
     if (props.attributeType === 'Cell') {
+        console.log('using normal table');
         return `${baseName}_composite_experiment_cell_metadata`;
     } else {
+        console.log('using aggregate');
         return `${baseName}_composite_experiment_cell_metadata_aggregate`;
     }
 });
@@ -53,6 +55,10 @@ if (props.attributeType === 'Cell') {
     selectedDataOptions = { filterBy: mosaicSelection };
 }
 
+console.log(
+    props.plotName + ' ' + props.attributeType + ' ' + datasetName.value
+);
+
 // Vg Plot
 function makePlot(column: string) {
     try {
@@ -147,12 +153,13 @@ const selection = computed<DataSelection>(() => {
     if (!s) {
         return {
             plotName: 'not found',
-            type: 'cell',
+            type: props.attributeType.toLowerCase() as DataSelection['type'],
             range: [0, 0],
             maxRange: [0, 0],
             displayChart: true,
         };
     }
+    console.log(s.plotName);
     return s;
 });
 
@@ -160,9 +167,25 @@ const selection = computed<DataSelection>(() => {
 
 const rangeModel = computed({
     get() {
+        console.log(selection.value.range[1]);
         return { min: selection.value.range[0], max: selection.value.range[1] };
     },
+
     set(newValue) {
+        // if (props.attributeType === 'cell') {
+        //     selectionStore.updateSelection(
+        //         props.plotName,
+        //         [newValue.min, newValue.max],
+        //         'cell'
+        //     );
+        // }
+        // if (props.attributeType === 'track') {
+        //     selectionStore.updateSelection(
+        //         props.plotName,
+        //         [newValue.min, newValue.max],
+        //         'track'
+        //     );
+        // }
         selection.value.range[0] = newValue.min;
         selection.value.range[1] = newValue.max;
     },
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 76969f9b..99a145b7 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -1,38 +1,39 @@
 import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
 import { watch, ref, computed } from 'vue';
-import { useSelectionStore, type DataSelection } from '@/stores/interactionStores/selectionStore';
+import {
+    useSelectionStore,
+    type DataSelection,
+} from '@/stores/interactionStores/selectionStore';
 import { useDatasetSelectionStore } from './datasetSelectionUntrrackedStore';
 
-import _ from 'lodash-es'
+import _ from 'lodash-es';
 import { useConditionSelectorStore } from '../componentStores/conditionSelectorStore';
 
-
 interface Clause {
-    source: string,
-    predicate: string | null
+    source: string;
+    predicate: string | null;
 }
 
 interface ConditionChartSelection {
-    baseSelection: any,
-    filteredSelection: any
+    baseSelection: any;
+    filteredSelection: any;
 }
 
 /**
  * Mosaic Selection: This is the selection that handles the general filtering for the "Filter" sidebar. Any VG plot can filter by this selection to automatically receive updates when the selection is updated.
- * 
+ *
  * Update Mosaic Selection: This is called by any input that is meant to update the mosaic selection. This will automatically dispatch updates to further selections. If range is null, then the selection will be cleared.
- * 
- * Add ConditionChart Selection: Called when we render each condition chart. This sets up the base selection clause. 
- * 
+ *
+ * Add ConditionChart Selection: Called when we render each condition chart. This sets up the base selection clause.
+ *
  * Clear Mosaic Selection: Helper function to clear by source.
  */
 
 export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
-
     let mosaicSelection = vg.Selection.intersect();
     // const conditionChartSelections: Record<string, ConditionChartSelection> = {};
-    const conditionChartSelectedParams: Record<string, any> = {}
+    const conditionChartSelectedParams: Record<string, any> = {};
     const conditionChartSelectionsInitialized = ref<boolean>(false);
 
     const selectionStore = useSelectionStore();
@@ -40,147 +41,192 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     const conditionSelectorStore = useConditionSelectorStore();
 
     const datasetSelectionStore = useDatasetSelectionStore();
-    const { currentExperimentMetadata } = storeToRefs(
-        datasetSelectionStore
-    );
-
-    let previousDataSelections: DataSelection[] = []
-
-    const conditionChartSelections = computed((): Record<string, ConditionChartSelection> => {
-        const keysList = Object.keys(conditionSelectorStore.currentExperimentTags);
-        let tempConditionChartSelections: Record<string, ConditionChartSelection> = {};
-        for (let i = 0; i < keysList.length; i++) {
-            const currKey = keysList[i];
-            const currValues = conditionSelectorStore.currentExperimentTags[currKey];
-
-            for (let j = i + 1; j < keysList.length; j++) {
-                //Compare currValues with all other lists
-                const compareKey = keysList[j];
-                const compareValues = conditionSelectorStore.currentExperimentTags[compareKey];
-
-                currValues.forEach((currValue: string) => {
-                    compareValues.forEach((compareValue: string) => {
-
-                        // Create new selection based on comparison
-                        const newSelection = vg.Selection.intersect();
-                        const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`
-                        const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`
-                        const clause: Clause = {
-                            source: newSource,
-                            predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`
-                        }
-
-                        newSelection.update(clause);
-                        const conditionChartSelection: ConditionChartSelection = {
-                            baseSelection: newSelection,
-                            filteredSelection: newSelection.clone()
-                        }
-
-                        tempConditionChartSelections[newSource] = conditionChartSelection;
-                        tempConditionChartSelections[reversedSource] = conditionChartSelection;
-                    })
-                })
+    const { currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+
+    let previousDataSelections: DataSelection[] = [];
+
+    const conditionChartSelections = computed(
+        (): Record<string, ConditionChartSelection> => {
+            const keysList = Object.keys(
+                conditionSelectorStore.currentExperimentTags
+            );
+            let tempConditionChartSelections: Record<
+                string,
+                ConditionChartSelection
+            > = {};
+            for (let i = 0; i < keysList.length; i++) {
+                const currKey = keysList[i];
+                const currValues =
+                    conditionSelectorStore.currentExperimentTags[currKey];
+
+                for (let j = i + 1; j < keysList.length; j++) {
+                    //Compare currValues with all other lists
+                    const compareKey = keysList[j];
+                    const compareValues =
+                        conditionSelectorStore.currentExperimentTags[
+                            compareKey
+                        ];
+
+                    currValues.forEach((currValue: string) => {
+                        compareValues.forEach((compareValue: string) => {
+                            // Create new selection based on comparison
+                            const newSelection = vg.Selection.intersect();
+                            const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`;
+                            const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`;
+                            const clause: Clause = {
+                                source: newSource,
+                                predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`,
+                            };
+
+                            newSelection.update(clause);
+                            const conditionChartSelection: ConditionChartSelection =
+                                {
+                                    baseSelection: newSelection,
+                                    filteredSelection: newSelection.clone(),
+                                };
+
+                            tempConditionChartSelections[newSource] =
+                                conditionChartSelection;
+                            tempConditionChartSelections[reversedSource] =
+                                conditionChartSelection;
+                        });
+                    });
+                }
             }
-        }
 
-        return tempConditionChartSelections;
-
-    });
+            return tempConditionChartSelections;
+        }
+    );
 
     // Subscribe to DataSelections. Waits for Condition Chart selections to be initialized.
-    watch([dataSelections, conditionChartSelections], ([newDataSelections, newConditionChartSelections]) => {
-        if (Object.keys(newConditionChartSelections).length > 0) {
-            // Track Changes in number of plots
-            let previousPlots = previousDataSelections.map(entry => entry.plotName);
-
-            // In shared plots, get different ranges
-            newDataSelections.forEach((entry) => {
-                const currPlotName = entry.plotName;
-                if (entry.range[0] !== -Infinity && entry.range[1] !== -Infinity) {
-                    if (previousPlots.includes(currPlotName)) {
-                        const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === currPlotName);
-                        if (previousSelection && !_.isEqual(previousSelection.range, entry.range)) {
-                            // Call update with new range
-                            updateMosaicSelection(currPlotName, entry.range, entry.type)
+    watch(
+        [dataSelections, conditionChartSelections],
+        ([newDataSelections, newConditionChartSelections]) => {
+            if (Object.keys(newConditionChartSelections).length > 0) {
+                // Track Changes in number of plots
+                let previousPlots = previousDataSelections.map(
+                    (entry) => entry.plotName
+                );
+
+                // In shared plots, get different ranges
+                newDataSelections.forEach((entry) => {
+                    const currPlotName = entry.plotName;
+                    if (
+                        entry.range[0] !== -Infinity &&
+                        entry.range[1] !== -Infinity
+                    ) {
+                        if (previousPlots.includes(currPlotName)) {
+                            const previousSelection =
+                                previousDataSelections.find(
+                                    (tempPrevSelection) =>
+                                        tempPrevSelection.plotName ===
+                                        currPlotName
+                                );
+                            if (
+                                previousSelection &&
+                                !_.isEqual(previousSelection.range, entry.range)
+                            ) {
+                                // Call update with new range
+                                updateMosaicSelection(
+                                    currPlotName,
+                                    entry.range,
+                                    entry.type
+                                );
+                            }
+                            // Remove Name from previousPlots
+                            previousPlots = previousPlots.filter(
+                                (plotName) => plotName !== currPlotName
+                            );
+                        } else {
+                            // Update with new plot source
+
+                            updateMosaicSelection(
+                                currPlotName,
+                                entry.range,
+                                entry.type
+                            );
                         }
-                        // Remove Name from previousPlots
-                        previousPlots = previousPlots.filter(plotName => plotName !== currPlotName)
-                    } else {
-                        // Update with new plot source
-
-                        updateMosaicSelection(currPlotName, entry.range, entry.type)
                     }
+                });
+
+                // If greater than 0, means previous dataSelections has a selection no longer around.
+                if (previousPlots.length > 0) {
+                    previousPlots.forEach((prevPlotName) => {
+                        const previousSelection = previousDataSelections.find(
+                            (tempPrevSelection) =>
+                                tempPrevSelection.plotName === prevPlotName
+                        );
+
+                        // Update mosaic with the given max range
+                        if (previousSelection) {
+                            updateMosaicSelection(
+                                previousSelection.plotName,
+                                previousSelection.maxRange,
+                                previousSelection.type
+                            );
+                        }
+                    });
                 }
-            })
-
-            // If greater than 0, means previous dataSelections has a selection no longer around.
-            if (previousPlots.length > 0) {
-                previousPlots.forEach(prevPlotName => {
-                    const previousSelection = previousDataSelections.find(tempPrevSelection => tempPrevSelection.plotName === prevPlotName);
 
-                    // Update mosaic with the given max range
-                    if (previousSelection) {
-
-                        updateMosaicSelection(previousSelection.plotName, previousSelection.maxRange, previousSelection.type);
-                    }
-                })
+                previousDataSelections = _.cloneDeep(newDataSelections);
             }
 
-            previousDataSelections = _.cloneDeep(newDataSelections);
-        }
-
-        console.log('finished')
-    }, { deep: true, immediate: true })
-
-
+            console.log('finished');
+        },
+        { deep: true, immediate: true }
+    );
 
     // Used to watch when selectedGrid changes
     watch(conditionSelectorStore.selectedGrid, (newSelectedGrid) => {
         console.log(newSelectedGrid);
 
         // Whenever selected Grid Changes, change
-
-    })
-
-
+    });
 
     function _escapeSource(source: string) {
         return `"${source.replace(/"/g, '""')}"`;
     }
 
     // Called when a slider input needs to update selection
-    function updateMosaicSelection(plotName: string, range: [number, number] | null = null, type: DataSelection['type']) {
-
+    function updateMosaicSelection(
+        plotName: string,
+        range: [number, number] | null = null,
+        type: DataSelection['type']
+    ) {
         //
 
-
-        const escapedSource = _escapeSource(plotName)
+        const escapedSource = _escapeSource(plotName);
         let predicate;
 
         if (type === 'cell') {
             // If cell, base only on range
-            predicate = range ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}` : null
+            predicate = range
+                ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}`
+                : null;
         } else if (type == 'track') {
             // If track, we filter by tracking IDs
 
             // Get ID Column
-            const id_column = currentExperimentMetadata.value?.headerTransforms?.['id']
+            const id_column =
+                currentExperimentMetadata.value?.headerTransforms?.['id'];
 
             // Aggregate Table Name
-            const table_name = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`
+            const table_name = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`;
 
             // Predicate has a subquery to pull IDs from aggregate table fitting the range
-            predicate = range ? `"${id_column}" IN (SELECT tracking_id FROM ${table_name} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )` : null
+            predicate = range
+                ? `"${id_column}" IN (SELECT tracking_id FROM ${table_name} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )`
+                : null;
         } else {
             predicate = null;
         }
 
         const clause = {
             source: plotName,
-            predicate
-        }
+            predicate,
+        };
         mosaicSelection.update(clause);
-        _updateConditionChartSelections(clause)
+        _updateConditionChartSelections(clause);
     }
 
     function addConditionChartSelection(tags: [string, string][]) {
@@ -190,9 +236,9 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
         const source = `${tags[0][0]}-${tags[0][1]}_${tags[1][0]}-${tags[1][1]}`;
         const clause: Clause = {
             source,
-            predicate: `"${tags[0][0]}" = '${tags[0][1]}' AND "${tags[1][0]}" = '${tags[1][1]}'`
-        }
-        conditionChartSelection.update(clause)
+            predicate: `"${tags[0][0]}" = '${tags[0][1]}' AND "${tags[1][0]}" = '${tags[1][1]}'`,
+        };
+        conditionChartSelection.update(clause);
         // Add selection to record
         conditionChartSelections.value[source] = conditionChartSelection;
         // Add parameter to record
@@ -202,14 +248,16 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
         return {
             baseSelection: conditionChartBaseSelection,
             filteredSelection: conditionChartSelection,
-            opacityParam: conditionChartSelectedParam
+            opacityParam: conditionChartSelectedParam,
         };
     }
 
     function _updateConditionChartSelections(clause: Clause) {
-        Object.values(conditionChartSelections.value).forEach((selectionObject: ConditionChartSelection) => {
-            selectionObject.filteredSelection.update(clause);
-        })
+        Object.values(conditionChartSelections.value).forEach(
+            (selectionObject: ConditionChartSelection) => {
+                selectionObject.filteredSelection.update(clause);
+            }
+        );
     }
 
     function clearMosaicSource(source: string) {
@@ -217,16 +265,15 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     function updateOpacityParam(source: string, value: number) {
-        conditionChartSelectedParams[source].update(value)
+        conditionChartSelectedParams[source].update(value);
     }
 
     function updateOpacityParamAll(value: number) {
         Object.values(conditionChartSelectedParams).forEach((param: any) => {
             param.update(value);
-        })
+        });
     }
 
-
     return {
         mosaicSelection,
         conditionChartSelections,
@@ -235,6 +282,6 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
         addConditionChartSelection,
         clearMosaicSource,
         updateOpacityParam,
-        updateOpacityParamAll
-    }
-});
\ No newline at end of file
+        updateOpacityParamAll,
+    };
+});
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index 84bb4e84..e1898f1f 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -3,7 +3,6 @@ import * as vg from '@uwdata/vgplot';
 import mitt from 'mitt';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 
-
 export interface DataSelection {
     plotName: string;
     type: 'cell' | 'track' | 'lineage'; // Unused, but will be needed if we have track-level and lineage-level attributes here
@@ -50,7 +49,11 @@ export const useSelectionStore = defineStore('Selection', {
                 ...this.dataSelections[index].maxRange,
             ];
         },
-        updateSelection(plotName: string, range: [number, number], type?: DataSelection['type']) {
+        updateSelection(
+            plotName: string,
+            range: [number, number],
+            type?: DataSelection['type']
+        ) {
             const existingIndex = this.dataSelections.findIndex(
                 (s) => s.plotName === plotName
             );
@@ -90,26 +93,36 @@ export const useSelectionStore = defineStore('Selection', {
             if (typeof s === 'undefined') return null;
             return s;
         },
-        addPlot(name: string) {
-            if (
-                this.dataSelections.some(
-                    (s: DataSelection) => s.plotName === name
-                )
-            ) {
-                // plot is already here, do not add again
+        addPlot(name: string, type: DataSelection['type']) {
+            const existingIndex = this.dataSelections.findIndex(
+                (s) => s.plotName === name
+            );
+            if (existingIndex !== -1) {
+                const existingPlot = this.dataSelections[existingIndex];
+                if (existingPlot.type !== type) {
+                    console.warn(
+                        `Changing type of plot "${name}" from "${existingPlot.type}" to "${type}"`
+                    );
+                    existingPlot.type = type;
+                    this.setMaxRange(name);
+                }
                 return;
             }
             const selection: DataSelection = {
                 plotName: name,
                 range: [-Infinity, Infinity],
                 maxRange: [-Infinity, Infinity],
-                type: 'cell',
+                type: type,
                 displayChart: true,
             };
             this.dataSelections.push(selection);
             this.setMaxRange(name);
         },
         async getMaxRange(plotName: string): Promise<[number, number]> {
+            const selection = this.getSelection(plotName);
+            if (!selection) {
+                throw new Error(`Selection "${plotName}" does not exist.`);
+            }
             const { currentExperimentMetadata } = useDatasetSelectionStore();
 
             try {
@@ -124,12 +137,26 @@ export const useSelectionStore = defineStore('Selection', {
                 // Escape the column name to handle spaces and special characters
                 const escapedPlotName = `${plotName.replace(/"/g, '""')}`;
 
-                const query = `
-                    SELECT
-                        MIN("${escapedPlotName}") AS min_value,
-                        MAX("${escapedPlotName}") AS max_value
-                    FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata
-                `;
+                let query = '';
+                if (selection.type === 'cell') {
+                    query = `
+                SELECT
+                    MIN("${escapedPlotName}") AS min_value,
+                    MAX("${escapedPlotName}") AS max_value
+                FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata
+            `;
+                } else if (selection.type === 'track') {
+                    query = `
+                SELECT
+                    MIN("${escapedPlotName}") AS min_value,
+                    MAX("${escapedPlotName}") AS max_value
+                FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata_aggregate
+            `;
+                } else {
+                    throw new Error(
+                        `Unknown type "${selection.type}" for plot "${plotName}"`
+                    );
+                }
 
                 console.log('Constructed query:', query);
 

From 624b7bcb525a44eb4d1169affde629b51e535b5e Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 31 Oct 2024 13:26:42 -0600
Subject: [PATCH 42/64] Added track level selection

---
 .../globalSettings/UnivariateCellPlot.vue      |  4 +++-
 .../stores/dataStores/mosaicSelectionStore.ts  | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index aa93b6d5..cf81c02a 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -21,7 +21,7 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
-const { mosaicSelection, updateMosaicSelection } = useMosaicSelectionStore();
+const { mosaicSelection,  trackLevelSelection } = useMosaicSelectionStore();
 
 // Define Plot Emits and Props
 const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
@@ -53,6 +53,8 @@ let selectedDataOptions = {};
 // Conditionally add filterBy property when attributeType is 'Cell'
 if (props.attributeType === 'Cell') {
     selectedDataOptions = { filterBy: mosaicSelection };
+} else {
+    selectedDataOptions = {filterBy: trackLevelSelection}
 }
 
 console.log(
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 99a145b7..ad038cc8 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -32,6 +32,7 @@ interface ConditionChartSelection {
 
 export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     let mosaicSelection = vg.Selection.intersect();
+    let trackLevelSelection = vg.Selection.intersect();
     // const conditionChartSelections: Record<string, ConditionChartSelection> = {};
     const conditionChartSelectedParams: Record<string, any> = {};
     const conditionChartSelectionsInitialized = ref<boolean>(false);
@@ -64,7 +65,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
                     const compareKey = keysList[j];
                     const compareValues =
                         conditionSelectorStore.currentExperimentTags[
-                            compareKey
+                        compareKey
                         ];
 
                     currValues.forEach((currValue: string) => {
@@ -78,12 +79,13 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
                                 predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`,
                             };
 
+                            // Update this for new track level attributes
                             newSelection.update(clause);
                             const conditionChartSelection: ConditionChartSelection =
-                                {
-                                    baseSelection: newSelection,
-                                    filteredSelection: newSelection.clone(),
-                                };
+                            {
+                                baseSelection: newSelection,
+                                filteredSelection: newSelection.clone(),
+                            };
 
                             tempConditionChartSelections[newSource] =
                                 conditionChartSelection;
@@ -217,6 +219,11 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
             predicate = range
                 ? `"${id_column}" IN (SELECT tracking_id FROM ${table_name} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )`
                 : null;
+            const trackLevelClause = {
+                source: plotName,
+                predicate: range ? `${escapedSource} between ${range[0]} and ${range[1]}` : null
+            }
+            trackLevelSelection.update(trackLevelClause);
         } else {
             predicate = null;
         }
@@ -276,6 +283,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
 
     return {
         mosaicSelection,
+        trackLevelSelection,
         conditionChartSelections,
         conditionChartSelectionsInitialized,
         updateMosaicSelection,

From e2beceda26768775a4c92c7192c83ee2568d0b72 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Thu, 31 Oct 2024 13:29:48 -0600
Subject: [PATCH 43/64] Removed mosaic selection store from plotSelector

---
 apps/client/src/components/globalSettings/PlotSelector.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index be7a0de6..39001048 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -10,9 +10,7 @@ import {
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useNotificationStore } from '@/stores/misc/notificationStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 const datasetSelectionStore = useDatasetSelectionStore();
-const { clearMosaicSource } = useMosaicSelectionStore();
 const globalSettings = useGlobalSettings();
 const notificationStore = useNotificationStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(

From 2ed2f488e9f771621d29dcf46d32af72ab77dfa9 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 1 Nov 2024 11:33:07 -0600
Subject: [PATCH 44/64] Changed "mosaicSelection" to "cellLevelSelection".
 Still using "mosaicSelection" as a general term. Updated to filter track
 level attribute (only dry mass) based on cell plot

---
 .../conditionSelector/ConditionChart.vue      |  4 +-
 .../components/exemplarView/ExemplarView.vue  |  4 +-
 .../globalSettings/PlotSelector.vue           |  2 +-
 .../globalSettings/UnivariateCellPlot.vue     | 18 +++----
 .../stores/dataStores/mosaicSelectionStore.ts | 48 ++++++++++++-------
 apps/client/src/util/datasetLoader.ts         | 27 ++++++-----
 6 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 4d781431..20c04159 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -42,8 +42,8 @@ watch(
     { immediate: true, deep: true }
 );
 
-// Creates a new set of selections and adds them to an overall list that is updated whenever general mosaicSelection 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. mosaicSelection).
+// 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];
diff --git a/apps/client/src/components/exemplarView/ExemplarView.vue b/apps/client/src/components/exemplarView/ExemplarView.vue
index fa99eeda..2ff8d731 100644
--- a/apps/client/src/components/exemplarView/ExemplarView.vue
+++ b/apps/client/src/components/exemplarView/ExemplarView.vue
@@ -33,11 +33,11 @@ watch(experimentDataInitialized, async (isInitialized) => {
 
 
 const handleOnClick = () => {
-    console.log('hello')
+    // console.log('hello')
     const plotName = "avg_mass"
     // const range = [0,100];
     selectionStore.updateSelection(plotName, [0,500], "track");
-    console.log(dataSelections.value);
+    // console.log(dataSelections.value);
 }
 
 
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 39001048..792696e4 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -35,7 +35,7 @@ const displayedCellPlots = computed(() => {
     const filtered = dataSelections.value.filter(
         (d) => d.displayChart && d.type === 'cell'
     );
-    console.log('Filtered Cell Plots:', filtered);
+    // console.log('Filtered Cell Plots:', filtered);
     return filtered;
 });
 
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index cf81c02a..06c6d5ca 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -21,7 +21,7 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
-const { mosaicSelection,  trackLevelSelection } = useMosaicSelectionStore();
+const { cellLevelSelection,  trackLevelSelection } = useMosaicSelectionStore();
 
 // Define Plot Emits and Props
 const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
@@ -40,10 +40,10 @@ const props = defineProps({
 const datasetName = computed(() => {
     const baseName = currentExperimentMetadata?.value?.name;
     if (props.attributeType === 'Cell') {
-        console.log('using normal table');
+        // console.log('using normal table');
         return `${baseName}_composite_experiment_cell_metadata`;
     } else {
-        console.log('using aggregate');
+        // console.log('using aggregate');
         return `${baseName}_composite_experiment_cell_metadata_aggregate`;
     }
 });
@@ -52,14 +52,14 @@ let selectedDataOptions = {};
 
 // Conditionally add filterBy property when attributeType is 'Cell'
 if (props.attributeType === 'Cell') {
-    selectedDataOptions = { filterBy: mosaicSelection };
+    selectedDataOptions = { filterBy: cellLevelSelection };
 } else {
     selectedDataOptions = {filterBy: trackLevelSelection}
 }
 
-console.log(
-    props.plotName + ' ' + props.attributeType + ' ' + datasetName.value
-);
+// console.log(
+//     props.plotName + ' ' + props.attributeType + ' ' + datasetName.value
+// );
 
 // Vg Plot
 function makePlot(column: string) {
@@ -161,7 +161,7 @@ const selection = computed<DataSelection>(() => {
             displayChart: true,
         };
     }
-    console.log(s.plotName);
+    // console.log(s.plotName);
     return s;
 });
 
@@ -169,7 +169,7 @@ const selection = computed<DataSelection>(() => {
 
 const rangeModel = computed({
     get() {
-        console.log(selection.value.range[1]);
+        // console.log(selection.value.range[1]);
         return { min: selection.value.range[0], max: selection.value.range[1] };
     },
 
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index ad038cc8..b7daa664 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -30,8 +30,8 @@ interface ConditionChartSelection {
  * Clear Mosaic Selection: Helper function to clear by source.
  */
 
-export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
-    let mosaicSelection = vg.Selection.intersect();
+export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
+    let cellLevelSelection = vg.Selection.intersect();
     let trackLevelSelection = vg.Selection.intersect();
     // const conditionChartSelections: Record<string, ConditionChartSelection> = {};
     const conditionChartSelectedParams: Record<string, any> = {};
@@ -173,7 +173,6 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
                 previousDataSelections = _.cloneDeep(newDataSelections);
             }
 
-            console.log('finished');
         },
         { deep: true, immediate: true }
     );
@@ -198,13 +197,24 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
         //
 
         const escapedSource = _escapeSource(plotName);
-        let predicate;
+        let cellPredicate;
+        let trackPredicate;
+
 
         if (type === 'cell') {
             // If cell, base only on range
-            predicate = range
+            cellPredicate = range
                 ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}`
                 : null;
+
+            trackPredicate = null;
+
+            // This filters out any data that DOESN'T have a max or min of the current value falling into the band.
+            console.log(escapedSource);
+            trackPredicate = range
+                ? `NOT ( "MAX ${plotName}" <= ${range[0]} OR "MIN ${plotName}" >= ${range[1]} )`
+                : null;
+
         } else if (type == 'track') {
             // If track, we filter by tracking IDs
 
@@ -216,24 +226,28 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
             const table_name = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`;
 
             // Predicate has a subquery to pull IDs from aggregate table fitting the range
-            predicate = range
+            cellPredicate = range
                 ? `"${id_column}" IN (SELECT tracking_id FROM ${table_name} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )`
                 : null;
-            const trackLevelClause = {
-                source: plotName,
-                predicate: range ? `${escapedSource} between ${range[0]} and ${range[1]}` : null
-            }
-            trackLevelSelection.update(trackLevelClause);
+
+            trackPredicate = range ? `${escapedSource} between ${range[0]} and ${range[1]}` : null;
         } else {
-            predicate = null;
+            cellPredicate = null;
+            trackPredicate = null;
         }
 
-        const clause = {
+        const cellClause = {
             source: plotName,
-            predicate,
+            predicate: cellPredicate,
         };
-        mosaicSelection.update(clause);
-        _updateConditionChartSelections(clause);
+
+        const trackClause = {
+            source: plotName,
+            predicate: trackPredicate
+        }
+        trackLevelSelection.update(trackClause);
+        cellLevelSelection.update(cellClause);
+        _updateConditionChartSelections(cellClause);
     }
 
     function addConditionChartSelection(tags: [string, string][]) {
@@ -282,7 +296,7 @@ export const useMosaicSelectionStore = defineStore('mosaicSelection', () => {
     }
 
     return {
-        mosaicSelection,
+        cellLevelSelection,
         trackLevelSelection,
         conditionChartSelections,
         conditionChartSelectionsInitialized,
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index f2dd5447..88b2ace9 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -98,19 +98,24 @@ export async function createAggregateTable(tableName: string, headerTransforms:
 
 
         try {
-            // Only for testing. Uncomment this to refresh table in cache
-            // try {
-            //     await vg.coordinator().exec([`
-            //     DROP TABLE IF EXISTS ${tableName}_aggregate
-            //     `]);
-            // } catch (error) {
-            //     console.error(error);
-            // }
+            // Only for testing.Uncomment this to refresh table in cache
+            try {
+                await vg.coordinator().exec([`
+                DROP TABLE IF EXISTS ${tableName}_aggregate
+                `]);
+            } catch (error) {
+                console.error(error);
+            }
             await vg.coordinator().exec([`
                 CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
-                SELECT AVG("${mass}") as avg_mass, COUNT("${id}") as track_length, "${id}" as tracking_id
-                FROM ${tableName}
-                GROUP BY "${id}"
+                    SELECT 
+                        AVG("${mass}") as avg_mass,
+                        MAX("${mass}") as "MAX ${mass}",
+                        MIN("${mass}") as "MIN ${mass}",
+                        COUNT("${id}") as track_length,
+                        "${id}" as tracking_id
+                    FROM ${tableName}
+                    GROUP BY "${id}"
             `]);
         } catch (error) {
             const message = `Unexpected error when creating aggregate table.`

From 96c8487cd604beeb05952342bccf851ca0e2ff55 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 1 Nov 2024 11:49:58 -0600
Subject: [PATCH 45/64] Changed "avg_mass" column to "AVG ${mass}". Made plot
 selector generalized so that we can automatically create plots

---
 .../globalSettings/PlotSelector.vue           | 20 +++++++++++++++----
 .../stores/dataStores/mosaicSelectionStore.ts |  1 +
 apps/client/src/util/datasetLoader.ts         |  4 +++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 792696e4..5a466c48 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -39,7 +39,18 @@ const displayedCellPlots = computed(() => {
     return filtered;
 });
 
+const displayedTrackPlots = computed(() => {
+    const filtered = dataSelections.value.filter(
+        (d) => d.displayChart && d.type === 'track'
+    );
+    // console.log('Filtered Track Plots:', filtered);
+    return filtered;
+});
+
+
+
 const totalCellPlots = computed(() => displayedCellPlots.value.length);
+const totalTrackPlots = computed(() => displayedTrackPlots.value.length);
 
 const aggregationOptions = [
     { label: 'Sum', value: 'sum' },
@@ -118,7 +129,7 @@ onMounted(() => {
                 selectionStore.addPlot(firstPlotName.value, 'cell');
 
                 // For testing track attributes
-                selectionStore.addPlot('avg_mass', 'track');
+                selectionStore.addPlot(`AVG ${firstPlotName.value}`, 'track');
             }
         },
         { immediate: true }
@@ -127,7 +138,7 @@ onMounted(() => {
 
 function handlePlotLoaded() {
     loadedPlots.value++;
-    if (loadedPlots.value === totalCellPlots.value) {
+    if (loadedPlots.value === (totalCellPlots.value + totalTrackPlots.value)) {
         loading.value = false;
     }
 }
@@ -275,8 +286,9 @@ function handleSelectionRemoved(event: CustomEvent) {
             </template>
             <template v-if="props.selectorType === 'Track'">
                 <UnivariateCellPlot
-                    :key="'avg_mass'"
-                    :plot-name="'avg_mass'"
+                    v-for="dataSelection in displayedTrackPlots"
+                    :key="dataSelection.plotName"
+                    :plot-name="dataSelection.plotName"
                     :attribute-type="'Track'"
                     @plot-loaded="handlePlotLoaded"
                     @plot-error="handlePlotError"
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index b7daa664..4292658f 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -211,6 +211,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
 
             // This filters out any data that DOESN'T have a max or min of the current value falling into the band.
             console.log(escapedSource);
+            // Need to make sure plotName is generated in aggregate
             trackPredicate = range
                 ? `NOT ( "MAX ${plotName}" <= ${range[0]} OR "MIN ${plotName}" >= ${range[1]} )`
                 : null;
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 88b2ace9..f0c8e821 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -109,10 +109,12 @@ export async function createAggregateTable(tableName: string, headerTransforms:
             await vg.coordinator().exec([`
                 CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
                     SELECT 
-                        AVG("${mass}") as avg_mass,
+                        AVG("${mass}") as "AVG ${mass}",
                         MAX("${mass}") as "MAX ${mass}",
                         MIN("${mass}") as "MIN ${mass}",
                         COUNT("${id}") as track_length,
+                        MAX("${id}") as "MAX ${id}",
+                        MIN("${id}") as "MIN ${id}",
                         "${id}" as tracking_id
                     FROM ${tableName}
                     GROUP BY "${id}"

From 85e41cf61035b6376580aae9dcaf647ee25e2a5a Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 1 Nov 2024 15:54:10 -0600
Subject: [PATCH 46/64] Added AVG, SUM, COUNT, MAX, MIN of all headers to
 aggregate table.

---
 .../datasetSelectionUntrrackedStore.ts        |  2 +-
 apps/client/src/util/datasetLoader.ts         | 37 ++++++++++++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index 81a987d5..85ad0feb 100644
--- a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -144,7 +144,7 @@ export const useDatasetSelectionStore = defineStore(
                         'parquet'
                     );
                     try {
-                        await createAggregateTable(`${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`, currentExperimentMetadata.value.headerTransforms)
+                        await createAggregateTable(`${currentExperimentMetadata.value.name}_composite_experiment_cell_metadata`, currentExperimentMetadata.value.headers, currentExperimentMetadata.value.headerTransforms)
                         notify({
                             type: 'success',
                             message: `Created Aggregate DuckDB Table for ${duckDbFileUrl}.`,
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index f0c8e821..43a85f96 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -2,6 +2,7 @@ import { parse, type ParseResult } from 'papaparse';
 import * as vg from '@uwdata/vgplot';
 // import type {ExperimentMetadata}
 import type { ExperimentMetadata } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import type { DataSelection } from '@/stores/interactionStores/selectionStore';
 
 export type CsvParserResults = ParseResult<AnyAttributes>;
 
@@ -92,9 +93,31 @@ export async function loadFileIntoDuckDb(
 }
 
 
-export async function createAggregateTable(tableName: string, headerTransforms: ExperimentMetadata['headerTransforms']) {
-    if (headerTransforms) {
-        const { frame, id, mass, parent, time, x, y } = headerTransforms
+export async function createAggregateTable(tableName: string, headers: string[], headerTransforms: ExperimentMetadata['headerTransforms']) {
+    if (headers && headerTransforms) {
+
+        const { mass, id } = headerTransforms
+
+        let selectString = ``;
+
+        headers.forEach((header: string) => {
+            selectString = `
+            ${selectString}
+            AVG("${header}") AS "AVG ${header}",
+            SUM("${header}") AS "SUM ${header}",
+            COUNT("${header}") AS "COUNT ${header}",
+            MAX("${header}") AS "MAX ${header}",
+            MIN("${header}") AS "MIN ${header}",
+            `
+        })
+
+        console.log(selectString)
+        const query = `
+                CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS SELECT ${selectString} "${id}" as tracking_id
+                    FROM ${tableName}
+                    GROUP BY "${id}"
+        `
+        console.log(query)
 
 
         try {
@@ -109,17 +132,13 @@ export async function createAggregateTable(tableName: string, headerTransforms:
             await vg.coordinator().exec([`
                 CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
                     SELECT 
-                        AVG("${mass}") as "AVG ${mass}",
-                        MAX("${mass}") as "MAX ${mass}",
-                        MIN("${mass}") as "MIN ${mass}",
-                        COUNT("${id}") as track_length,
-                        MAX("${id}") as "MAX ${id}",
-                        MIN("${id}") as "MIN ${id}",
+                        ${selectString}
                         "${id}" as tracking_id
                     FROM ${tableName}
                     GROUP BY "${id}"
             `]);
         } catch (error) {
+            console.error(error);
             const message = `Unexpected error when creating aggregate table.`
             console.error(message);
             throw new Error(message);

From 2e3e0c9ab7f0617d8e0e13cd0a54e568a2093a3b Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 1 Nov 2024 15:57:43 -0600
Subject: [PATCH 47/64] Added median

---
 apps/client/src/util/datasetLoader.ts | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 43a85f96..789b0a1c 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -96,7 +96,7 @@ export async function loadFileIntoDuckDb(
 export async function createAggregateTable(tableName: string, headers: string[], headerTransforms: ExperimentMetadata['headerTransforms']) {
     if (headers && headerTransforms) {
 
-        const { mass, id } = headerTransforms
+        const { id } = headerTransforms
 
         let selectString = ``;
 
@@ -106,20 +106,12 @@ export async function createAggregateTable(tableName: string, headers: string[],
             AVG("${header}") AS "AVG ${header}",
             SUM("${header}") AS "SUM ${header}",
             COUNT("${header}") AS "COUNT ${header}",
+            MEDIAN("${header}") AS "MEDIAN ${header}",
             MAX("${header}") AS "MAX ${header}",
             MIN("${header}") AS "MIN ${header}",
             `
         })
 
-        console.log(selectString)
-        const query = `
-                CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS SELECT ${selectString} "${id}" as tracking_id
-                    FROM ${tableName}
-                    GROUP BY "${id}"
-        `
-        console.log(query)
-
-
         try {
             // Only for testing.Uncomment this to refresh table in cache
             try {
@@ -140,7 +132,6 @@ export async function createAggregateTable(tableName: string, headers: string[],
         } catch (error) {
             console.error(error);
             const message = `Unexpected error when creating aggregate table.`
-            console.error(message);
             throw new Error(message);
         }
     }

From 711c8485bbc5319270c4822cab8c27e2ad6bcbba Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:29:59 -0700
Subject: [PATCH 48/64] Track Level Attribute Plots are created based on user
 specified 'attribute' and 'aggregation'

---
 .../globalSettings/PlotSelector.vue           | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 5a466c48..fc3b342a 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -47,17 +47,16 @@ const displayedTrackPlots = computed(() => {
     return filtered;
 });
 
-
-
 const totalCellPlots = computed(() => displayedCellPlots.value.length);
 const totalTrackPlots = computed(() => displayedTrackPlots.value.length);
 
 const aggregationOptions = [
-    { label: 'Sum', value: 'sum' },
-    { label: 'Average', value: 'average' },
-    { label: 'Count', value: 'count' },
-    { label: 'Minimum', value: 'min' },
-    { label: 'Maximum', value: 'max' },
+    { label: 'Sum', value: 'SUM' },
+    { label: 'Average', value: 'AVG' },
+    { label: 'Count', value: 'COUNT' },
+    { label: 'Minimum', value: 'MIN' },
+    { label: 'Maximum', value: 'MAX' },
+    { label: 'Median', value: 'MEDIAN' },
 ];
 
 // On any update, computes the plots to be shown.
@@ -138,7 +137,7 @@ onMounted(() => {
 
 function handlePlotLoaded() {
     loadedPlots.value++;
-    if (loadedPlots.value === (totalCellPlots.value + totalTrackPlots.value)) {
+    if (loadedPlots.value === totalCellPlots.value + totalTrackPlots.value) {
         loading.value = false;
     }
 }
@@ -162,8 +161,15 @@ function onMenuButtonClick() {
     trackPlotDialogOpen.value = true;
 }
 
-function onSubmit() {
+function addTrackPlotFromMenu(atr: string, agg: string) {
     trackPlotDialogOpen.value = false;
+    // Add plot of "selected attribute" and "selected aggregation" to displayedTrackPlots
+    //const selection = selectionStore.getSelection(selectedAttribute);
+    //if (selection === null) {
+    //selectionStore.addPlot(`${agg} ${atr}`, 'track');
+    selectionStore.addPlot(`${agg} ${atr}`, 'track');
+    return;
+    //}
 }
 
 function handleSelectionRemoved(event: CustomEvent) {
@@ -233,8 +239,13 @@ function handleSelectionRemoved(event: CustomEvent) {
                                 </div>
                                 <q-separator class="q-my-sm" />
                                 <q-form
-                                    @submit="onSubmit"
                                     class="q-gutter-md"
+                                    @submit="
+                                        addTrackPlotFromMenu(
+                                            selectedAttribute,
+                                            selectedAggregation
+                                        )
+                                    "
                                     :dark="globalSettings.darkMode"
                                 >
                                     <q-select
@@ -247,7 +258,10 @@ function handleSelectionRemoved(event: CustomEvent) {
                                     <q-select
                                         label="Select Aggregation"
                                         :options="aggregationOptions"
+                                        option-value="value"
+                                        option-label="label"
                                         v-model="selectedAggregation"
+                                        emit-value
                                         clickable
                                     >
                                     </q-select>

From 3336f1471029bd15d3ee2bfd0467ca69852ebe7a Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Fri, 8 Nov 2024 10:04:51 -0700
Subject: [PATCH 49/64] fixed condition chart and filters not rendering when
 switching experiments, updated condition chart styling, added basic filtering
 for agg line chart, added reset state for mosaic selections, auto load frame
 and mass for condition chart

---
 .../src/components/AggregateLineChart.vue     |  11 +-
 .../conditionSelector/ConditionChart.vue      |  29 +----
 .../conditionSelector/ConditionSelector.vue   |   8 +-
 .../globalSettings/PlotSelector.vue           |   5 -
 .../globalSettings/UnivariateCellPlot.vue     |  93 +++++-----------
 .../aggregateLineChartStore.ts                |  59 +++++++++-
 .../datasetSelectionUntrrackedStore.ts        |   4 +-
 .../stores/dataStores/mosaicSelectionStore.ts | 105 ++++++++++--------
 .../interactionStores/selectionStore.ts       |   1 -
 apps/client/src/util/datasetLoader.ts         |   9 ++
 10 files changed, 174 insertions(+), 150 deletions(-)

diff --git a/apps/client/src/components/AggregateLineChart.vue b/apps/client/src/components/AggregateLineChart.vue
index ee22a67c..11c1915a 100644
--- a/apps/client/src/components/AggregateLineChart.vue
+++ b/apps/client/src/components/AggregateLineChart.vue
@@ -522,7 +522,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.selected ? 'highlighted' : ''} ${aggLine.filtered ? 'filtered' : ''}`"
                         v-for="(
                             aggLine, index
                         ) in aggregateLineChartStore.aggLineDataList.filter(
@@ -646,6 +646,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/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 20c04159..1ad107a2 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -47,7 +47,7 @@ watch(
 
 // Styles
 const lineColor = chartColorScheme[props.yIndex % 6];
-const strokeWidth = 5;
+const strokeWidth = 15;
 
 async function createChart(xAxisName: string, yAxisName: string) {
     if (chartContainer.value) {
@@ -67,8 +67,8 @@ async function createChart(xAxisName: string, yAxisName: string) {
                     x: xAxisName,
                     y1: 0,
                     y: vg.avg(yAxisName),
-                    fill: '#f8f8f8',
-                    fillOpacity: 1,
+                    fill: 'grey',
+                    fillOpacity: 0.3,
                     curve: 'basis',
                     stroke: null,
                 }
@@ -87,26 +87,7 @@ async function createChart(xAxisName: string, yAxisName: string) {
                     stroke: lineColor,
                     strokeWidth: strokeWidth,
                     curve: 'basis',
-                    opacity: 0.2,
-                }
-            ),
-            // Plots Line Chart based on selection.
-            vg.areaY(
-                vg.from(
-                    `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`,
-                    {
-                        filterBy:
-                            conditionChartSelections[source].filteredSelection,
-                    }
-                ),
-                {
-                    x: xAxisName,
-                    y1: 0,
-                    y: vg.avg(yAxisName),
-                    fill: 'grey',
-                    fillOpacity: 0.2,
-                    curve: 'basis',
-                    stroke: null,
+                    opacity: 0.6,
                 }
             ),
             vg.lineY(
@@ -121,7 +102,7 @@ async function createChart(xAxisName: string, yAxisName: string) {
                     x: xAxisName,
                     y: vg.avg(yAxisName),
                     stroke: lineColor,
-                    strokeWidth: strokeWidth,
+                    strokeWidth: 30,
                     curve: 'basis',
                     opacity: 1,
                 }
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 8e913ac1..f315d0bc 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -8,8 +8,12 @@ import {
 import ConditionSelectorDropDown from './ConditionSelectorDropdown.vue';
 import ConditionChart from './ConditionChart.vue';
 import { storeToRefs } from 'pinia';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelectorStore();
+const datasetSelectionUntrrackedStore = useDatasetSelectionStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionUntrrackedStore)
+
 const {
     xLabels,
     yLabels,
@@ -165,8 +169,8 @@ const handleAllMouseLeave = () => {
                                                 [`${selectedXTag}`,`${elx.toString()}`],
                                                 [`${selectedYTag}`,`${ely.toString()}`]
                                             ]"
-                                            :xAxisName="'Frame'"
-                                            :yAxisName="'Dry Mass (pg)'"
+                                            :xAxisName="`${currentExperimentMetadata?.headerTransforms?.frame ?? 'Test'}`"
+                                            :yAxisName="`${currentExperimentMetadata?.headerTransforms?.mass ?? 'Test'}`"
                                             :selected="selectedGrid[`${elx.toString()}-${ely.toString()}`] || conditionSelector.allSelected()"
                                         />
                                     </div>
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index fc3b342a..1e2d4ae6 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -173,13 +173,8 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
 }
 
 function handleSelectionRemoved(event: CustomEvent) {
-    // clearMosaicSource(event.detail);
 }
 
-// window.addEventListener(
-//     'selectionRemoved',
-//     handleSelectionRemoved as EventListener
-// );
 </script>
 <template>
     <div>
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index 06c6d5ca..165a3a04 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -37,43 +37,45 @@ const props = defineProps({
     },
 });
 
-const datasetName = computed(() => {
-    const baseName = currentExperimentMetadata?.value?.name;
-    if (props.attributeType === 'Cell') {
-        // console.log('using normal table');
-        return `${baseName}_composite_experiment_cell_metadata`;
-    } else {
-        // console.log('using aggregate');
-        return `${baseName}_composite_experiment_cell_metadata_aggregate`;
-    }
-});
+const plotContainer = ref<HTMLDivElement | null>(null);
+const charts = ref<null | HTMLElement>(null);
+const loaded = ref(false);
 
-let selectedDataOptions = {};
+// Creates charts when data initialized.
+watch([experimentDataInitialized, plotContainer], ([isInitialized,newPlotContainer]) => {
+    if(isInitialized && newPlotContainer) {
+        // Determine which selection to use
+        const mosaicSelection = props.attributeType === 'Cell' ? cellLevelSelection : trackLevelSelection;
+        // Determine which dataset to use
+        let dataSetName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`
+        if(props.attributeType === 'Track'){
+            dataSetName = `${dataSetName}_aggregate`
+        }
 
-// Conditionally add filterBy property when attributeType is 'Cell'
-if (props.attributeType === 'Cell') {
-    selectedDataOptions = { filterBy: cellLevelSelection };
-} else {
-    selectedDataOptions = {filterBy: trackLevelSelection}
-}
+        // Create the plot
+        charts.value = makePlot(props.plotName, mosaicSelection, dataSetName);
 
-// console.log(
-//     props.plotName + ' ' + props.attributeType + ' ' + datasetName.value
-// );
+        if(charts.value){
+            plotContainer.value?.appendChild(charts.value);
+            loaded.value = true;
+        }
+
+    }
+}, {immediate:true});
 
 // Vg Plot
-function makePlot(column: string) {
+function makePlot(column: string, mosaicSelection:any, datasetName:string) {
     try {
         return vg.plot(
             // Background grey data
-            vg.rectY(vg.from(datasetName.value), {
+            vg.rectY(vg.from(datasetName), {
                 x: vg.bin(column),
                 y: vg.count(),
                 fill: '#cccccc',
                 inset: 1,
             }),
             // Currently Selected Data
-            vg.rectY(vg.from(datasetName.value, selectedDataOptions), {
+            vg.rectY(vg.from(datasetName, {filterBy: mosaicSelection}), {
                 x: vg.bin(column),
                 y: vg.count(),
                 fill: '#377eb8',
@@ -103,23 +105,7 @@ function makePlot(column: string) {
     }
 }
 
-// Handle Loading of Everything
-const charts = ref<null | HTMLElement>(null);
-const loaded = ref(false);
 
-// Creates the Plots.
-async function createCharts() {
-    try {
-        charts.value = makePlot(props.plotName);
-        if (plotContainer.value) {
-            plotContainer.value.appendChild(charts.value!);
-            loaded.value = true;
-        }
-    } catch (error) {
-        console.error('Error creating charts:', error);
-        emit('plot-error', props.plotName);
-    }
-}
 
 // Checks when everything has loaded
 watch(loaded, () => {
@@ -138,18 +124,6 @@ async function handlePlotLoading() {
     }
 }
 
-// Handle Rendering
-onMounted(() => {
-    if (experimentDataInitialized.value) {
-        createCharts();
-    }
-});
-
-// Waits for data to be initialized before creating charts
-watch(experimentDataInitialized, createCharts);
-
-const plotContainer = ref<HTMLDivElement | null>(null);
-
 const selection = computed<DataSelection>(() => {
     const s = selectionStore.getSelection(props.plotName);
     if (!s) {
@@ -161,33 +135,16 @@ const selection = computed<DataSelection>(() => {
             displayChart: true,
         };
     }
-    // console.log(s.plotName);
     return s;
 });
 
-// watch(selection, (newSelection) => updateMosaicSelection(newSelection.plotName, newSelection.range), {deep:true, immediate:true});
 
 const rangeModel = computed({
     get() {
-        // console.log(selection.value.range[1]);
         return { min: selection.value.range[0], max: selection.value.range[1] };
     },
 
     set(newValue) {
-        // if (props.attributeType === 'cell') {
-        //     selectionStore.updateSelection(
-        //         props.plotName,
-        //         [newValue.min, newValue.max],
-        //         'cell'
-        //     );
-        // }
-        // if (props.attributeType === 'track') {
-        //     selectionStore.updateSelection(
-        //         props.plotName,
-        //         [newValue.min, newValue.max],
-        //         'track'
-        //     );
-        // }
         selection.value.range[0] = newValue.min;
         selection.value.range[1] = newValue.max;
     },
diff --git a/apps/client/src/stores/componentStores/aggregateLineChartStore.ts b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
index 5410446b..e341657a 100644
--- a/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
+++ b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
@@ -1,5 +1,5 @@
 import { ref, computed, watch } from 'vue';
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import {
     useCellMetaData,
     type Cell,
@@ -11,14 +11,18 @@ import { useLooneageViewStore } from './looneageViewStore';
 
 import { min, max, mean, sum, median, quantile, deviation } from 'd3-array';
 import { useDataPointSelectionUntrracked } from '../interactionStores/dataPointSelectionUntrrackedStore';
+import { useSelectionStore } from '../interactionStores/selectionStore';
+import { useFilterStore } from './filterStore';
 
 export interface AggLine {
     data: AggLineData;
     muted: boolean;
     relation: 'ancestor' | 'left' | 'right' | 'other';
     trackId: string;
+    selected?: boolean;
+    filtered?: boolean;
 }
-export interface AggLineData extends Array<AggDataPoint> {}
+export interface AggLineData extends Array<AggDataPoint> { }
 export interface AggDataPoint {
     time: number;
     value: number; // avg or total or median or ...
@@ -34,6 +38,12 @@ function storeSetup() {
     const looneageViewStore = useLooneageViewStore();
     const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
 
+    const selectionStore = useSelectionStore();
+    const { dataSelections } = storeToRefs(selectionStore);
+
+    const filterStore = useFilterStore();
+    const { filters } = storeToRefs(filterStore);
+
     const aggregatorKey = ref<string>('average');
     const aggregatorOptions = ['average', 'total', 'min', 'median', 'max'];
 
@@ -290,6 +300,42 @@ function storeSetup() {
         };
     }
 
+    // Currently only for individual cell tracks
+    function _determineSelectedOrFiltered(track: Track) {
+        //Determine if selected.
+        let selected = true;
+        let filtered = false;
+        dataSelections.value.forEach(selection => {
+            if (selection.type === 'cell') {
+
+                // Below is a bit inefficient -- can just iterate once
+                const valuesForPlotName = track.cells.map(cell => cell.attrNum[selection.plotName])
+                const max_value = Math.max(...valuesForPlotName);
+                const min_value = Math.min(...valuesForPlotName);
+
+                // Intersects with selected
+                // Checks if max value and min value make track fall outside of range
+                selected = selected && !(max_value <= selection.range[0] || min_value >= selection.range[1])
+            }
+        })
+
+        filters.value.forEach(filter => {
+
+            // Below is a bit inefficient -- can just iterate once
+            const valuesForPlotName = track.cells.map(cell => cell.attrNum[filter.plotName])
+            const max_value = Math.max(...valuesForPlotName);
+            const min_value = Math.min(...valuesForPlotName);
+
+            // Essentially, you're doing the opposite of selected. However, since selections and filters come from different data (i.e. you have ot consciously change to a filter), this needs to be done separately.
+            filtered = filtered || (max_value <= filter.range[0] || min_value >= filter.range[1])
+        }
+        )
+
+        return {
+            selected, filtered
+        }
+    }
+
     const hoveredLineData = computed<{ data: AggLineData; trackId: string }>(
         () => {
             // if (targetKey.value !== 'selected lineage') {
@@ -447,17 +493,26 @@ function storeSetup() {
                 const result: AggLine[] = [];
                 for (const track of cellMetaData.trackArray) {
                     const aggLineData: AggLineData = [];
+
                     for (const cell of track.cells) {
                         const time = cellMetaData.getTime(cell);
                         const value = accessor.value(cell);
                         const count = 1;
                         aggLineData.push({ time, value, count });
                     }
+
+                    // Currently only for individual cell tracks
+                    const { selected, filtered } = _determineSelectedOrFiltered(track)
+
+
+
                     result.push({
                         data: medianFilterSmooth(aggLineData),
                         muted: true,
                         trackId: track.trackId,
                         relation: 'other',
+                        selected,
+                        filtered
                     });
                 }
                 return result;
diff --git a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index 85ad0feb..c8d3885f 100644
--- a/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -24,7 +24,6 @@ export interface ExperimentMetadata {
     headerTransforms?: TextTransforms; // maps things like "Time (h)" to "time"
     // valueRanges?: { string: { min: number; max: number } };
     // can precompute min/max for each column across experiments
-    // conditions?: string[]; // TODO: - does this need to be 2d?
     locationMetadataList: LocationMetadata[];
     compositeTabularDataFilename?: string;
 }
@@ -114,6 +113,8 @@ export const useDatasetSelectionStore = defineStore(
         // Sets location Metadata
         const currentExperimentMetadata =
             computedAsync<ExperimentMetadata | null>(async () => {
+                // If experiment data has changed, need to ensure that we set 'loaded' to false.
+                experimentDataLoaded.value = false;
                 if (
                     datasetSelectionTrrackedStore.currentExperimentFilename ==
                     null
@@ -124,7 +125,6 @@ export const useDatasetSelectionStore = defineStore(
                 );
                 const response = await fetch(fullURL, {});
                 const data = await response.json();
-                console.log(data);
                 return data;
             });
 
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 4292658f..8b6ce786 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -1,6 +1,6 @@
 import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
-import { watch, ref, computed } from 'vue';
+import { watch, ref, type Ref, computed } from 'vue';
 import {
     useSelectionStore,
     type DataSelection,
@@ -9,6 +9,7 @@ import { useDatasetSelectionStore } from './datasetSelectionUntrrackedStore';
 
 import _ from 'lodash-es';
 import { useConditionSelectorStore } from '../componentStores/conditionSelectorStore';
+import { debounce } from 'lodash-es';
 
 interface Clause {
     source: string;
@@ -30,21 +31,65 @@ interface ConditionChartSelection {
  * Clear Mosaic Selection: Helper function to clear by source.
  */
 
+
+interface MosaicSelectionState {
+    cellLevelSelection: Ref<any>,
+    trackLevelSelection: Ref<any>,
+    conditionChartSelectedParams: Record<string, any>,
+    previousDataSelections: DataSelection[],
+    conditionChartSelectionsInitialized: Ref<boolean>
+
+
+}
+
+const initialState = (): MosaicSelectionState => ({
+    cellLevelSelection: ref<any>(vg.Selection.intersect()),
+    trackLevelSelection: ref<any>(vg.Selection.intersect()),
+    conditionChartSelectedParams: {},
+    conditionChartSelectionsInitialized: ref<boolean>(false),
+    previousDataSelections: []
+})
+
+
 export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
-    let cellLevelSelection = vg.Selection.intersect();
-    let trackLevelSelection = vg.Selection.intersect();
-    // const conditionChartSelections: Record<string, ConditionChartSelection> = {};
-    const conditionChartSelectedParams: Record<string, any> = {};
-    const conditionChartSelectionsInitialized = ref<boolean>(false);
+
+
+    // const cellLevelSelection = ref<any>(vg.Selection.intersect());
+    // const trackLevelSelection = ref<any>(vg.Selection.intersect());
+
+    // Initial state
+    let {
+        cellLevelSelection,
+        trackLevelSelection,
+        conditionChartSelectedParams,
+        conditionChartSelectionsInitialized,
+        previousDataSelections
+    } = initialState()
+
+    function resetState(): void {
+        let newState = initialState();
+        cellLevelSelection.value = newState.cellLevelSelection.value;
+        trackLevelSelection.value = newState.trackLevelSelection.value;
+        conditionChartSelectedParams = newState.conditionChartSelectedParams;
+        conditionChartSelectionsInitialized.value = newState.conditionChartSelectionsInitialized.value
+        previousDataSelections = newState.previousDataSelections
+    }
 
     const selectionStore = useSelectionStore();
     const { dataSelections } = storeToRefs(selectionStore);
     const conditionSelectorStore = useConditionSelectorStore();
 
     const datasetSelectionStore = useDatasetSelectionStore();
-    const { currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+    const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+
+    watch(experimentDataInitialized, () => {
+        console.log('changed!!')
 
-    let previousDataSelections: DataSelection[] = [];
+        resetState();
+    })
+
+
+    // let previousDataSelections: DataSelection[] = [];
 
     const conditionChartSelections = computed(
         (): Record<string, ConditionChartSelection> => {
@@ -76,7 +121,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                             const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`;
                             const clause: Clause = {
                                 source: newSource,
-                                predicate: `"${currKey}" = '${currValue}' AND "${currKey}" = '${currValue}'`,
+                                predicate: `"${currKey}" = '${currValue}' AND "${compareKey}" = '${compareValue}'`,
                             };
 
                             // Update this for new track level attributes
@@ -103,7 +148,8 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
     // Subscribe to DataSelections. Waits for Condition Chart selections to be initialized.
     watch(
         [dataSelections, conditionChartSelections],
-        ([newDataSelections, newConditionChartSelections]) => {
+
+        debounce(([newDataSelections, newConditionChartSelections]) => {
             if (Object.keys(newConditionChartSelections).length > 0) {
                 // Track Changes in number of plots
                 let previousPlots = previousDataSelections.map(
@@ -111,7 +157,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                 );
 
                 // In shared plots, get different ranges
-                newDataSelections.forEach((entry) => {
+                newDataSelections.forEach((entry: any) => {
                     const currPlotName = entry.plotName;
                     if (
                         entry.range[0] !== -Infinity &&
@@ -173,13 +219,12 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                 previousDataSelections = _.cloneDeep(newDataSelections);
             }
 
-        },
+        }, 0),
         { deep: true, immediate: true }
     );
 
     // Used to watch when selectedGrid changes
     watch(conditionSelectorStore.selectedGrid, (newSelectedGrid) => {
-        console.log(newSelectedGrid);
 
         // Whenever selected Grid Changes, change
     });
@@ -210,7 +255,6 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
             trackPredicate = null;
 
             // This filters out any data that DOESN'T have a max or min of the current value falling into the band.
-            console.log(escapedSource);
             // Need to make sure plotName is generated in aggregate
             trackPredicate = range
                 ? `NOT ( "MAX ${plotName}" <= ${range[0]} OR "MIN ${plotName}" >= ${range[1]} )`
@@ -246,34 +290,11 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
             source: plotName,
             predicate: trackPredicate
         }
-        trackLevelSelection.update(trackClause);
-        cellLevelSelection.update(cellClause);
+        trackLevelSelection.value.update(trackClause);
+        cellLevelSelection.value.update(cellClause);
         _updateConditionChartSelections(cellClause);
     }
 
-    function addConditionChartSelection(tags: [string, string][]) {
-        const conditionChartSelection = vg.Selection.intersect();
-        // Creates an opacity param
-        const conditionChartSelectedParam = vg.Param.value(1);
-        const source = `${tags[0][0]}-${tags[0][1]}_${tags[1][0]}-${tags[1][1]}`;
-        const clause: Clause = {
-            source,
-            predicate: `"${tags[0][0]}" = '${tags[0][1]}' AND "${tags[1][0]}" = '${tags[1][1]}'`,
-        };
-        conditionChartSelection.update(clause);
-        // Add selection to record
-        conditionChartSelections.value[source] = conditionChartSelection;
-        // Add parameter to record
-        conditionChartSelectedParams[source] = conditionChartSelectedParam;
-
-        const conditionChartBaseSelection = conditionChartSelection.clone();
-        return {
-            baseSelection: conditionChartBaseSelection,
-            filteredSelection: conditionChartSelection,
-            opacityParam: conditionChartSelectedParam,
-        };
-    }
-
     function _updateConditionChartSelections(clause: Clause) {
         Object.values(conditionChartSelections.value).forEach(
             (selectionObject: ConditionChartSelection) => {
@@ -282,10 +303,6 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
         );
     }
 
-    function clearMosaicSource(source: string) {
-        updateMosaicSelection(source, null, 'cell');
-    }
-
     function updateOpacityParam(source: string, value: number) {
         conditionChartSelectedParams[source].update(value);
     }
@@ -302,8 +319,6 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
         conditionChartSelections,
         conditionChartSelectionsInitialized,
         updateMosaicSelection,
-        addConditionChartSelection,
-        clearMosaicSource,
         updateOpacityParam,
         updateOpacityParamAll,
     };
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index e1898f1f..c6dda867 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -158,7 +158,6 @@ export const useSelectionStore = defineStore('Selection', {
                     );
                 }
 
-                console.log('Constructed query:', query);
 
                 const result = await vg.coordinator().query(query);
 
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 789b0a1c..86503ec8 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -78,6 +78,15 @@ export async function loadFileIntoDuckDb(
     } else if (type === 'parquet') {
         console.log('im here')
         try {
+            // Only for testing.Uncomment this to refresh table in cache
+            console.log('dropping')
+            try {
+                await vg.coordinator().exec([`
+                DROP TABLE IF EXISTS ${tableName}
+                `]);
+            } catch (error) {
+                console.error(error);
+            }
             await vg.coordinator().exec([vg.loadParquet(tableName, url)]);
             console.log(`Got DuckDb file: ${url}`);
         } catch (error) {

From bff2f0d05e5acd446227bf13ed4073fc2805d907 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Sat, 9 Nov 2024 10:26:10 -0700
Subject: [PATCH 50/64] Fixed same label condition chart issue, added proper
 loading to univariate cell plot views (for long render times), added
 selection and filtering to image view, moved filtering logic to selection
 store, removed filter store

---
 apps/client/src/components/ImageViewer.vue    |  58 ++++++--
 .../conditionSelector/ConditionChart.vue      |  48 +++++--
 .../conditionSelector/ConditionSelector.vue   |   9 +-
 .../components/exemplarView/ExemplarView.vue  |  34 ++++-
 .../globalSettings/DatasetSelector.vue        |   7 +-
 .../globalSettings/FilterEditMenu.vue         |   4 +-
 .../globalSettings/FilterSelector.vue         |  19 ++-
 .../globalSettings/PlotSelector.vue           |   2 +-
 .../globalSettings/UnivariateCellPlot.vue     |  41 ++++--
 apps/client/src/pages/TestFilterComponent.vue |   3 -
 .../src/pages/TestFilterComponentTwo.vue      |   3 -
 .../aggregateLineChartStore.ts                |  39 +----
 .../componentStores/conditionSelectorStore.ts |   1 -
 .../src/stores/componentStores/filterStore.ts |  40 ------
 .../stores/dataStores/cellMetaDataStore.ts    |   8 +-
 .../stores/dataStores/mosaicSelectionStore.ts |  14 +-
 .../interactionStores/selectionStore.ts       | 133 ++++++++++++++++++
 .../client/src/stores/misc/provenanceStore.ts |   2 -
 apps/client/src/util/datasetLoader.ts         |  18 ---
 19 files changed, 317 insertions(+), 166 deletions(-)
 delete mode 100644 apps/client/src/stores/componentStores/filterStore.ts

diff --git a/apps/client/src/components/ImageViewer.vue b/apps/client/src/components/ImageViewer.vue
index 0bffb2ab..5170e568 100644
--- a/apps/client/src/components/ImageViewer.vue
+++ b/apps/client/src/components/ImageViewer.vue
@@ -42,6 +42,8 @@ import { TripsLayer } from '@deck.gl/geo-layers';
 import { format } from 'd3-format';
 import colors from '@/util/colors';
 import { useConfigStore } from '@/stores/misc/configStore';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { select } from 'd3-selection';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
@@ -57,6 +59,9 @@ const { currentLocationMetadata } = storeToRefs(datasetSelectionStore);
 const { contrastLimitSlider } = storeToRefs(imageViewerStoreUntrracked);
 const eventBusStore = useEventBusStore();
 const looneageViewStore = useLooneageViewStore();
+const selectionStore = useSelectionStore();
+const { selectedTrackingIds, unfilteredTrackingIds } = storeToRefs(selectionStore);
+
 const deckGlContainer = ref(null);
 const { width: containerWidth, height: containerHeight } =
     useElementSize(deckGlContainer);
@@ -66,6 +71,13 @@ const contrastLimit = computed<[number, number][]>(() => {
     return [[contrastLimitSlider.value.min, contrastLimitSlider.value.max]];
 });
 
+const _determineSelectedOrFiltered = (trackId:string) => {
+    return {
+        selected: selectedTrackingIds.value ? selectedTrackingIds.value.includes(trackId) : false,
+        filtered: unfilteredTrackingIds.value ? !(unfilteredTrackingIds.value.includes(trackId)) : false
+    }
+}
+
 let deckgl: any | null = null;
 onMounted(() => {
     deckgl = new Deck({
@@ -121,7 +133,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 +163,8 @@ onMounted(() => {
     eventBusStore.emitter.on('resetImageView', resetView);
 });
 
+
+
 const loader = ref<any | null>(null);
 const pixelSource = ref<any | null>(null);
 watch(currentLocationMetadata, async () => {
@@ -228,6 +241,13 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return hoverColorWithAlpha;
             }
+            // if(!isSelected(info.properties?.id?.toString())){
+            //     return[0,0,0,255];
+            // }
+            const { filtered } = _determineSelectedOrFiltered(info.properties?.id?.toString())
+            if(filtered){
+                return[0,0,0,255];
+            }
             return [0, 0, 0, 0];
         },
         getLineColor: (info) => {
@@ -242,6 +262,18 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return colors.hovered.rgb;
             }
+            // if(!isSelected(info.properties?.id?.toString())){
+            //     return[0,0,0,255];
+            // }
+
+            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 +289,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 +485,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 +691,9 @@ watch(currentTrackArray, renderDeckGL);
 watch(dataPointSelection.$state, renderDeckGL);
 watch(imageViewerStore.$state, renderDeckGL);
 watch(contrastLimitSlider, renderDeckGL);
+watch(selectedTrackingIds, renderDeckGL);
+watch(unfilteredTrackingIds, renderDeckGL);
+
 
 function clearSelection() {
     dataPointSelection.selectedTrackId = null;
diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 1ad107a2..13859f55 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
     yAxisName: string;
     yIndex: number;
     selected: boolean;
+    chartLineWidth:number;
 }>();
 
 // Will use soon for dark mode.
@@ -26,17 +27,34 @@ const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
-const { conditionChartSelections } = useMosaicSelectionStore();
+const { conditionChartSelections, $yAxisParam } = 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],
-    async ([isInitialized, newConditionChartSelections]) => {
-        if (isInitialized) {
+    [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.
-            createChart(props.xAxisName, props.yAxisName);
+            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 }
@@ -47,9 +65,12 @@ watch(
 
 // Styles
 const lineColor = chartColorScheme[props.yIndex % 6];
-const strokeWidth = 15;
+const strokeWidth = props.chartLineWidth/2;
+const strokeWidthSelected = props.chartLineWidth;
+
+// const $param = vg.Param.value([0,2000])
 
-async function createChart(xAxisName: string, yAxisName: string) {
+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.
@@ -102,7 +123,7 @@ async function createChart(xAxisName: string, yAxisName: string) {
                     x: xAxisName,
                     y: vg.avg(yAxisName),
                     stroke: lineColor,
-                    strokeWidth: 30,
+                    strokeWidth: strokeWidthSelected,
                     curve: 'basis',
                     opacity: 1,
                 }
@@ -110,14 +131,23 @@ async function createChart(xAxisName: string, yAxisName: string) {
 
             // Gets rid of axes and margins
             vg.axis(false),
+            // Below would allow us to adjust the yAxis based on all the charts
+            // vg.yDomain($yAxisParam),
             vg.margin(0)
         );
-        chartContainer.value.appendChild(chart);
+        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>
 
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index f315d0bc..42060d9e 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -12,7 +12,7 @@ import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUn
 const globalSettings = useGlobalSettings();
 const conditionSelector = useConditionSelectorStore();
 const datasetSelectionUntrrackedStore = useDatasetSelectionStore();
-const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionUntrrackedStore)
+const { currentExperimentMetadata } = storeToRefs(datasetSelectionUntrrackedStore)
 
 const {
     xLabels,
@@ -100,6 +100,11 @@ const handleAllMouseLeave = () => {
     hoveredAll.value = false;
 }
 
+// Basic function to just adjust stroke width of the charts based on the number of charts rendered.
+const chartLineWidth = computed(() => {
+    return Math.round(Math.max(yLabels.value.length,xLabels.value.length)*4);
+})
+
 </script>
 
 <template>
@@ -160,6 +165,7 @@ const handleAllMouseLeave = () => {
                                             : ''
                                     } ${selectedGrid[`${elx.toString()}-${ely.toString()}`] || conditionSelector.allSelected() ? 'selected' : 'unselected'}` "
                                     :style="heightWidth"
+                                    style="position: relative;"
                                     @click="() => conditionSelector.clickConditionChart(idx,idy)"
                                 >
                                     <div>
@@ -172,6 +178,7 @@ const handleAllMouseLeave = () => {
                                             :xAxisName="`${currentExperimentMetadata?.headerTransforms?.frame ?? 'Test'}`"
                                             :yAxisName="`${currentExperimentMetadata?.headerTransforms?.mass ?? 'Test'}`"
                                             :selected="selectedGrid[`${elx.toString()}-${ely.toString()}`] || conditionSelector.allSelected()"
+                                            :chartLineWidth="chartLineWidth"
                                         />
                                     </div>
                                 </div>
diff --git a/apps/client/src/components/exemplarView/ExemplarView.vue b/apps/client/src/components/exemplarView/ExemplarView.vue
index 2ff8d731..c2cdceed 100644
--- a/apps/client/src/components/exemplarView/ExemplarView.vue
+++ b/apps/client/src/components/exemplarView/ExemplarView.vue
@@ -8,6 +8,7 @@ import { useConditionSelectorStore } from '@/stores/componentStores/conditionSel
 import { storeToRefs } from 'pinia';
 import LBtn from '../custom/LBtn.vue';
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 
 
@@ -19,6 +20,9 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(dat
 const { chartColorScheme } = useConditionSelectorStore();
 const selectionStore = useSelectionStore();
 
+const mosaicSelectionStore = useMosaicSelectionStore();
+const { $yAxisParam } = storeToRefs(mosaicSelectionStore);
+
 const { dataSelections } = storeToRefs(selectionStore);
 
 
@@ -34,10 +38,12 @@ watch(experimentDataInitialized, async (isInitialized) => {
 
 const handleOnClick = () => {
     // console.log('hello')
-    const plotName = "avg_mass"
+    // const plotName = "avg_mass"
     // const range = [0,100];
-    selectionStore.updateSelection(plotName, [0,500], "track");
+    // selectionStore.updateSelection(plotName, [0,500], "track");
+    
     // console.log(dataSelections.value);
+    mosaicSelectionStore.$yAxisParam.update([0,1000])
 }
 
 
@@ -71,6 +77,30 @@ async function createChart(){
     // chartContainer.value.appendChild(chart);
     // }
 
+    // For univariate cell plot if we want to switch to density plot
+
+            // vg.densityY(
+            //     vg.from(
+            //         datasetName
+            //     ),{
+            //         x:`${column}`,
+            //         fill:'#cccccc',
+            //         curve: 'basis',
+            //         stroke:'black'
+            //     }
+            // ),
+            // vg.densityY(
+            //     vg.from(
+            //         datasetName, {filterBy: mosaicSelection}
+            //     ),{
+            //         x:`${column}`,
+            //         fill: '#377eb8',
+            //         curve: 'basis',
+            //         stroke:'black'
+            //     }
+            // ),
+
+
 }
 
 
diff --git a/apps/client/src/components/globalSettings/DatasetSelector.vue b/apps/client/src/components/globalSettings/DatasetSelector.vue
index dbc79a12..05575816 100644
--- a/apps/client/src/components/globalSettings/DatasetSelector.vue
+++ b/apps/client/src/components/globalSettings/DatasetSelector.vue
@@ -6,7 +6,6 @@ import { useDatasetSelectionTrrackedStore } from '@/stores/dataStores/datasetSel
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
-import { useFilterStore } from '@/stores/componentStores/filterStore';
 
 const globalSettings = useGlobalSettings();
 const datasetSelectionStore = useDatasetSelectionStore();
@@ -14,7 +13,6 @@ const datasetSelectionTrrackedStore = useDatasetSelectionTrrackedStore();
 const $q = useQuasar();
 
 const selectionStore = useSelectionStore();
-const filterStore = useFilterStore();
 
 watch(
     () => datasetSelectionStore.fetchingTabularData,
@@ -30,9 +28,8 @@ watch(
 );
 
 function onClickLocation(location: any) {
-    //console.log('clicked location: ', location);
     selectionStore.clearAllSelections();
-    filterStore.clearAllFilters();
+    selectionStore.clearAllFilters();
     datasetSelectionStore.selectImagingLocation(location);
 }
 
@@ -49,7 +46,7 @@ const shortExpName = computed<string>(() => {
 
 function onSelectExperiment() {
     selectionStore.clearAllSelections();
-    filterStore.clearAllFilters();
+    selectionStore.clearAllFilters();
 }
 </script>
 
diff --git a/apps/client/src/components/globalSettings/FilterEditMenu.vue b/apps/client/src/components/globalSettings/FilterEditMenu.vue
index e1db419b..0eba4711 100644
--- a/apps/client/src/components/globalSettings/FilterEditMenu.vue
+++ b/apps/client/src/components/globalSettings/FilterEditMenu.vue
@@ -14,7 +14,6 @@ import {
     QBanner,
 } from 'quasar';
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
-import { useFilterStore } from '@/stores/componentStores/filterStore';
 
 const globalSettings = useGlobalSettings();
 const props = defineProps<{
@@ -27,7 +26,6 @@ const props = defineProps<{
 const emit = defineEmits(['update:range']);
 
 const selectionStore = useSelectionStore();
-const filterStore = useFilterStore();
 
 const showRangeDialog = ref(false);
 const minInput = ref(props.initialMin);
@@ -51,7 +49,7 @@ function onSubmit() {
     if (props.type === 'selection') {
         selectionStore.updateSelection(props.plotName, newRange);
     } else if (props.type === 'filter') {
-        filterStore.updateFilter(props.plotName, newRange);
+        selectionStore.updateFilter(props.plotName, newRange);
     }
 
     emit('update:range', { min: newRange[0], max: newRange[1] });
diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index 977e1323..811550c9 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -2,33 +2,32 @@
 import { computed, ref } from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import PlotSelector from './PlotSelector.vue';
-import { useFilterStore } from '@/stores/componentStores/filterStore';
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
 import { storeToRefs } from 'pinia';
 import FilterEditMenu from './FilterEditMenu.vue';
 
 const globalSettings = useGlobalSettings();
-const filterStore = useFilterStore();
 const selectionStore = useSelectionStore();
-const { filters } = storeToRefs(filterStore);
+const {dataFilters} = storeToRefs(selectionStore);
 
 const selectionsCount = computed(
     () => selectionStore.modifiedSelections.length
 );
-const filtersCount = computed(() => filters.value.length);
+const filtersCount = computed(() => dataFilters.value.length);
 
 function removeFilter(index: number) {
-    filterStore.removeFilter(index);
+    selectionStore.removeFilter(index);
 }
 function removeSelection(plotName: string) {
     selectionStore.removeSelectionByPlotName(plotName);
 }
 function addFilter() {
     for (const selection of selectionStore.modifiedSelections) {
-        filterStore.addFilter({
-            plotName: selection.plotName,
-            range: [selection.range[0], selection.range[1]],
-        });
+
+        selectionStore.addFilter({
+            ...selection,
+            range: [...selection.range],
+        })
     }
 }
 
@@ -134,7 +133,7 @@ const mutedTextClass = computed(() =>
                 </q-item-section>
             </template>
             <q-list>
-                <q-item v-for="(filter, index) in filters" :key="index">
+                <q-item v-for="(filter, index) in dataFilters" :key="index">
                     <FilterEditMenu
                         :plot-name="filter.plotName"
                         :initial-min="filter.range[0]"
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 1e2d4ae6..21bd5761 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -179,7 +179,7 @@ function handleSelectionRemoved(event: CustomEvent) {
 <template>
     <div>
         <div v-if="!experimentDataInitialized" class="flex justify-center">
-            <div class="text-h6 q-m-lg">Loading...</div>
+            <div class="text-caption q-m-lg">No experiment selected.</div>
         </div>
         <div v-else>
             <div class="q-item-section__right">
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index 165a3a04..70a55942 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -22,7 +22,6 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
 const { cellLevelSelection,  trackLevelSelection } = useMosaicSelectionStore();
-
 // Define Plot Emits and Props
 const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
 const props = defineProps({
@@ -39,8 +38,11 @@ const props = defineProps({
 
 const plotContainer = ref<HTMLDivElement | null>(null);
 const charts = ref<null | HTMLElement>(null);
+let observer:MutationObserver|null = null;
 const loaded = ref(false);
 
+const isLoading = ref<boolean>(true);
+
 // Creates charts when data initialized.
 watch([experimentDataInitialized, plotContainer], ([isInitialized,newPlotContainer]) => {
     if(isInitialized && newPlotContainer) {
@@ -54,10 +56,21 @@ watch([experimentDataInitialized, plotContainer], ([isInitialized,newPlotContain
 
         // Create the plot
         charts.value = makePlot(props.plotName, mosaicSelection, dataSetName);
-
         if(charts.value){
             plotContainer.value?.appendChild(charts.value);
-            loaded.value = true;
+            observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                    loaded.value = true;
+                    isLoading.value = false;
+                    observer?.disconnect();
+                    break;
+                }
+            }
+        });
+
+        // Observe the SVG for changes to its child elements
+        observer.observe(charts.value, { childList: true, subtree: true });
         }
 
     }
@@ -82,6 +95,7 @@ function makePlot(column: string, mosaicSelection:any, datasetName:string) {
                 opacity: 1,
                 inset: 1,
             }),
+
             vg.marginBottom(45),
             vg.marginTop(5),
             vg.marginLeft(20),
@@ -159,15 +173,18 @@ function handleRangeUpdate(newRange: { min: number; max: number }) {
     <div>
         <q-item-section style="position: relative">
             <div ref="plotContainer" style="position: relative">
-                <FilterEditMenu
-                    :plot-name="props.plotName"
-                    :initial-min="rangeModel.min"
-                    :initial-max="rangeModel.max"
-                    type="selection"
-                    @update:range="handleRangeUpdate"
-                />
-
-                <div class="q-range-container">
+                    <FilterEditMenu
+                        :plot-name="props.plotName"
+                        :initial-min="rangeModel.min"
+                        :initial-max="rangeModel.max"
+                        type="selection"
+                        @update:range="handleRangeUpdate"
+                    />
+                <!-- Uses same width and height as single chart to replace the chart. -->
+                <div v-if="isLoading" style="width:268px;height:85px; gap:10px" class="flex justify-center align-center">
+                    <q-spinner/> <div class="text-caption">Loading chart</div>
+                </div>
+                <div v-if="!isLoading" class="q-range-container">
                     <q-range
                         v-model="rangeModel"
                         :min="selection.maxRange[0]"
diff --git a/apps/client/src/pages/TestFilterComponent.vue b/apps/client/src/pages/TestFilterComponent.vue
index 144b2b39..9b022efa 100644
--- a/apps/client/src/pages/TestFilterComponent.vue
+++ b/apps/client/src/pages/TestFilterComponent.vue
@@ -2,7 +2,6 @@
 import { computed, onMounted, ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import { useFilterStore } from '@/stores/componentStores/filterStore';
 import { watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
@@ -11,8 +10,6 @@ import { select } from 'd3-selection';
 import * as vg from '@uwdata/vgplot';
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
-const filterStore = useFilterStore();
-const { filters } = storeToRefs(filterStore);
 const selectionStore = useSelectionStore();
 const { dataSelections} = storeToRefs(selectionStore)
 
diff --git a/apps/client/src/pages/TestFilterComponentTwo.vue b/apps/client/src/pages/TestFilterComponentTwo.vue
index 489b2f75..6ff1ccef 100644
--- a/apps/client/src/pages/TestFilterComponentTwo.vue
+++ b/apps/client/src/pages/TestFilterComponentTwo.vue
@@ -2,7 +2,6 @@
 import { computed, onMounted, ref, nextTick} from 'vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import { useFilterStore } from '@/stores/componentStores/filterStore';
 import { watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
@@ -12,8 +11,6 @@ import { select } from 'd3-selection';
 import * as vg from '@uwdata/vgplot';
 const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
-const filterStore = useFilterStore();
-const { filters } = storeToRefs(filterStore);
 const selectionStore = useSelectionStore();
 const { dataSelections} = storeToRefs(selectionStore)
 
diff --git a/apps/client/src/stores/componentStores/aggregateLineChartStore.ts b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
index e341657a..31a344ec 100644
--- a/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
+++ b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
@@ -12,7 +12,6 @@ import { useLooneageViewStore } from './looneageViewStore';
 import { min, max, mean, sum, median, quantile, deviation } from 'd3-array';
 import { useDataPointSelectionUntrracked } from '../interactionStores/dataPointSelectionUntrrackedStore';
 import { useSelectionStore } from '../interactionStores/selectionStore';
-import { useFilterStore } from './filterStore';
 
 export interface AggLine {
     data: AggLineData;
@@ -39,10 +38,8 @@ function storeSetup() {
     const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
 
     const selectionStore = useSelectionStore();
-    const { dataSelections } = storeToRefs(selectionStore);
+    const { selectedTrackingIds, unfilteredTrackingIds } = storeToRefs(selectionStore);
 
-    const filterStore = useFilterStore();
-    const { filters } = storeToRefs(filterStore);
 
     const aggregatorKey = ref<string>('average');
     const aggregatorOptions = ['average', 'total', 'min', 'median', 'max'];
@@ -300,39 +297,11 @@ function storeSetup() {
         };
     }
 
-    // Currently only for individual cell tracks
-    function _determineSelectedOrFiltered(track: Track) {
-        //Determine if selected.
-        let selected = true;
-        let filtered = false;
-        dataSelections.value.forEach(selection => {
-            if (selection.type === 'cell') {
-
-                // Below is a bit inefficient -- can just iterate once
-                const valuesForPlotName = track.cells.map(cell => cell.attrNum[selection.plotName])
-                const max_value = Math.max(...valuesForPlotName);
-                const min_value = Math.min(...valuesForPlotName);
-
-                // Intersects with selected
-                // Checks if max value and min value make track fall outside of range
-                selected = selected && !(max_value <= selection.range[0] || min_value >= selection.range[1])
-            }
-        })
-
-        filters.value.forEach(filter => {
-
-            // Below is a bit inefficient -- can just iterate once
-            const valuesForPlotName = track.cells.map(cell => cell.attrNum[filter.plotName])
-            const max_value = Math.max(...valuesForPlotName);
-            const min_value = Math.min(...valuesForPlotName);
-
-            // Essentially, you're doing the opposite of selected. However, since selections and filters come from different data (i.e. you have ot consciously change to a filter), this needs to be done separately.
-            filtered = filtered || (max_value <= filter.range[0] || min_value >= filter.range[1])
-        }
-        )
 
+    function _determineSelectedOrFiltered(track: Track) {
         return {
-            selected, filtered
+            selected: selectedTrackingIds.value ? selectedTrackingIds.value.includes(track.trackId) : false,
+            filtered: unfilteredTrackingIds.value ? !(unfilteredTrackingIds.value.includes(track.trackId)) : false
         }
     }
 
diff --git a/apps/client/src/stores/componentStores/conditionSelectorStore.ts b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
index 96719c27..9b03292e 100644
--- a/apps/client/src/stores/componentStores/conditionSelectorStore.ts
+++ b/apps/client/src/stores/componentStores/conditionSelectorStore.ts
@@ -52,7 +52,6 @@ export const useConditionSelectorStore = defineStore('conditionSelector', () =>
 
     // When experimentTags change, initialize as values.
     watch(currentExperimentTags, (newExperimentTags) => {
-        console.log(newExperimentTags);
         if (Object.keys(newExperimentTags).length > 1) {
             selectedXTag.value = Object.keys(newExperimentTags)[0];
             selectedYTag.value = Object.keys(newExperimentTags)[1];
diff --git a/apps/client/src/stores/componentStores/filterStore.ts b/apps/client/src/stores/componentStores/filterStore.ts
deleted file mode 100644
index 9bd3ff38..00000000
--- a/apps/client/src/stores/componentStores/filterStore.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { defineStore } from 'pinia';
-
-interface Filter {
-    plotName: string;
-    range: [number, number];
-}
-
-export const useFilterStore = defineStore('filter', {
-    state: () => ({
-        filters: [] as Filter[],
-    }),
-    actions: {
-        addFilter(filter: Filter) {
-            const existingIndex = this.filters.findIndex(
-                (s) => s.plotName === filter.plotName
-            );
-            if (existingIndex !== -1) {
-                this.filters[existingIndex] = filter;
-            } else {
-                this.filters.push(filter);
-            }
-        },
-        removeFilter(index: number) {
-            this.filters.splice(index, 1);
-        },
-        updateFilter(plotName: string, range: [number, number]) {
-            const existingIndex = this.filters.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (existingIndex !== -1) {
-                this.filters[existingIndex].range = range;
-            } else {
-                this.addFilter({ plotName, range });
-            }
-        },
-        clearAllFilters() {
-            this.filters = [];
-        },
-    },
-});
diff --git a/apps/client/src/stores/dataStores/cellMetaDataStore.ts b/apps/client/src/stores/dataStores/cellMetaDataStore.ts
index 058c476b..5e75ecca 100644
--- a/apps/client/src/stores/dataStores/cellMetaDataStore.ts
+++ b/apps/client/src/stores/dataStores/cellMetaDataStore.ts
@@ -477,10 +477,10 @@ export const useCellMetaData = defineStore('cellMetaData', () => {
                         // a synonym for true/false, different capitalization may also work.
                         console.error(
                             'Unrecognized cell type' +
-                                `.\n\trow index: ${i}` +
-                                `.\n\tkey: ${key}` +
-                                `.\n\tvalue: ${val}` +
-                                `.\n\ttype: ${typeof val}`
+                            `.\n\trow index: ${i}` +
+                            `.\n\tkey: ${key}` +
+                            `.\n\tvalue: ${val}` +
+                            `.\n\ttype: ${typeof val}`
                         );
                         break;
                 }
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 8b6ce786..1f80a853 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -53,9 +53,7 @@ const initialState = (): MosaicSelectionState => ({
 
 export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
 
-
-    // const cellLevelSelection = ref<any>(vg.Selection.intersect());
-    // const trackLevelSelection = ref<any>(vg.Selection.intersect());
+    const $yAxisParam = vg.Param.value([0, 2000]);
 
     // Initial state
     let {
@@ -66,6 +64,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
         previousDataSelections
     } = initialState()
 
+    // Reset state function
     function resetState(): void {
         let newState = initialState();
         cellLevelSelection.value = newState.cellLevelSelection.value;
@@ -83,14 +82,10 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
     const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
 
     watch(experimentDataInitialized, () => {
-        console.log('changed!!')
-
         resetState();
     })
 
 
-    // let previousDataSelections: DataSelection[] = [];
-
     const conditionChartSelections = computed(
         (): Record<string, ConditionChartSelection> => {
             const keysList = Object.keys(
@@ -105,7 +100,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                 const currValues =
                     conditionSelectorStore.currentExperimentTags[currKey];
 
-                for (let j = i + 1; j < keysList.length; j++) {
+                for (let j = i; j < keysList.length; j++) {
                     //Compare currValues with all other lists
                     const compareKey = keysList[j];
                     const compareValues =
@@ -118,6 +113,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                             // Create new selection based on comparison
                             const newSelection = vg.Selection.intersect();
                             const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`;
+
                             const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`;
                             const clause: Clause = {
                                 source: newSource,
@@ -255,7 +251,6 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
             trackPredicate = null;
 
             // This filters out any data that DOESN'T have a max or min of the current value falling into the band.
-            // Need to make sure plotName is generated in aggregate
             trackPredicate = range
                 ? `NOT ( "MAX ${plotName}" <= ${range[0]} OR "MIN ${plotName}" >= ${range[1]} )`
                 : null;
@@ -321,5 +316,6 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
         updateMosaicSelection,
         updateOpacityParam,
         updateOpacityParamAll,
+        $yAxisParam
     };
 });
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index c6dda867..4646b902 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -2,6 +2,8 @@ import { defineStore } from 'pinia';
 import * as vg from '@uwdata/vgplot';
 import mitt from 'mitt';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useCellMetaData } from '../dataStores/cellMetaDataStore';
+import type { Track } from '../dataStores/cellMetaDataStore';
 
 export interface DataSelection {
     plotName: string;
@@ -18,9 +20,77 @@ type Events = {
 export const emitter = mitt<Events>();
 //const emit = defineEmits(['plot-error']);
 
+function median(values: number[]) {
+    if (values.length === 0) return 0; // Handle empty array
+
+    // Sort the array in ascending order
+    values.sort((a, b) => a - b);
+
+    const middle = Math.floor(values.length / 2);
+
+    // If the length is odd, return the middle element
+    if (values.length % 2 !== 0) {
+        return values[middle];
+    }
+
+    // If the length is even, return the average of the two middle elements
+    return (values[middle - 1] + values[middle]) / 2;
+}
+
+function checkSelection(selection: DataSelection, track: Track) {
+    if (selection.type === 'cell') {
+        const valuesForPlotName = track.cells.map(cell => cell.attrNum[selection.plotName])
+        const max_value = Math.max(...valuesForPlotName);
+        const min_value = Math.min(...valuesForPlotName);
+
+        // Intersects with selected
+        // Checks if max value and min value make track fall outside of range
+        // This is the same logic used in the SQL query predicate for updating track level selection.
+        return !(max_value <= selection.range[0] || min_value >= selection.range[1])
+
+    } else if (selection.type === 'track') {
+        // Split plot name. Track level attributes come as 'AVG column name', so we get the first item in the split as the aggregate function
+        const [aggregate, ...rest] = selection.plotName.split(' ');
+        //Join the rest, which will be the original column name
+        const originalColumn = rest.join(' ')
+        //Get the values for that column
+        const valuesForPlotName = track.cells.map(cell => cell.attrNum[originalColumn])
+
+        let aggregateValue;
+        // Based on aggregate function, compute different aggregate values
+        switch (aggregate) {
+            case 'AVG':
+                aggregateValue = valuesForPlotName.reduce((sum, value) => sum + value, 0) / valuesForPlotName.length;
+                break;
+            case 'MAX':
+                aggregateValue = Math.max(...valuesForPlotName);
+                break;
+            case 'MIN':
+                aggregateValue = Math.min(...valuesForPlotName);
+                break;
+            case 'SUM':
+                aggregateValue = valuesForPlotName.reduce((sum, value) => sum + value, 0);
+                break;
+            case 'COUNT':
+                aggregateValue = valuesForPlotName.length;
+                break;
+            case 'MEDIAN':
+                aggregateValue = median(valuesForPlotName);
+                break;
+            default:
+                //Defaults to just average
+                aggregateValue = valuesForPlotName.reduce((sum, value) => sum + value, 0) / valuesForPlotName.length;
+        }
+        return (aggregateValue <= selection.range[1] && aggregateValue >= selection.range[0])
+    }
+    return true
+}
+
+
 export const useSelectionStore = defineStore('Selection', {
     state: () => ({
         dataSelections: [] as DataSelection[],
+        dataFilters: [] as DataSelection[]
     }),
     getters: {
         modifiedSelections: (state) => {
@@ -29,6 +99,35 @@ export const useSelectionStore = defineStore('Selection', {
                     s.range[0] !== s.maxRange[0] || s.range[1] !== s.maxRange[1]
             );
         },
+        selectedTrackingIds: (state) => {
+            const cellMetaData = useCellMetaData();
+            const selectedTrackIds: string[] = [];
+            cellMetaData.trackArray?.forEach(track => {
+                let selected = true;
+                state.dataSelections.forEach(selection => {
+                    selected = selected && checkSelection(selection, track)
+                })
+                if (selected) {
+                    selectedTrackIds.push(track.trackId);
+                }
+            })
+            return state.dataSelections.length === 0 ? null : selectedTrackIds;
+        },
+        unfilteredTrackingIds: (state) => {
+            const cellMetaData = useCellMetaData();
+            const unfilteredTrackIds: string[] = [];
+            cellMetaData.trackArray?.forEach(track => {
+                let unfiltered = true;
+                state.dataFilters.forEach(filter => {
+                    unfiltered = unfiltered && checkSelection(filter, track)
+                })
+                if (unfiltered) {
+                    unfilteredTrackIds.push(track.trackId);
+                }
+            })
+            return state.dataFilters.length === 0 ? null : unfilteredTrackIds;
+        }
+
     },
     actions: {
         addSelection(selection: DataSelection) {
@@ -196,5 +295,39 @@ export const useSelectionStore = defineStore('Selection', {
             selection.range = [minVal, maxVal];
             selection.maxRange = [minVal, maxVal];
         },
+        addFilter(filter: DataSelection) {
+            const existingIndex = this.dataFilters.findIndex(
+                (s) => s.plotName === filter.plotName
+            );
+            if (existingIndex !== -1) {
+                this.dataFilters[existingIndex] = filter;
+            } else {
+                this.dataFilters.push(filter);
+            }
+        },
+        removeFilter(index: number) {
+            this.dataFilters.splice(index, 1);
+        },
+        updateFilter(plotName: string, range: [number, number], type?: DataSelection['type']) {
+            const existingIndex = this.dataFilters.findIndex(
+                (s) => s.plotName === plotName
+            );
+            if (existingIndex !== -1) {
+                this.dataFilters[existingIndex].range = range;
+            } else {
+                this.addFilter(
+                    {
+                        plotName,
+                        range,
+                        type: type ?? 'cell',
+                        maxRange: [0, 1000],
+                        displayChart: true
+                    }
+                );
+            }
+        },
+        clearAllFilters() {
+            this.dataFilters = [];
+        },
     },
 });
diff --git a/apps/client/src/stores/misc/provenanceStore.ts b/apps/client/src/stores/misc/provenanceStore.ts
index 23579170..1c180f5e 100644
--- a/apps/client/src/stores/misc/provenanceStore.ts
+++ b/apps/client/src/stores/misc/provenanceStore.ts
@@ -6,7 +6,6 @@ import { useDatasetSelectionStore } from '../dataStores/datasetSelectionUntrrack
 import { useImageViewerStore } from '../componentStores/imageViewerTrrackedStore';
 import { useLooneageViewStore } from '../componentStores/looneageViewStore';
 import { useDataPointSelection } from '../interactionStores/dataPointSelectionTrrackedStore';
-import { useFilterStore } from '../componentStores/filterStore';
 import { useSelectionStore } from '../interactionStores/selectionStore';
 import { useSkipTrackingMap } from '@/stores/misc/skipTrackingMapStore';
 import { defineStore } from 'pinia';
@@ -38,7 +37,6 @@ export const useProvenanceStore = defineStore('provenanceStore', () => {
         useDatasetSelectionTrrackedStore(),
         useLooneageViewStore(),
         useDataPointSelection(),
-        useFilterStore(),
         useSelectionStore(),
     ];
 
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 86503ec8..1743d788 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -76,17 +76,7 @@ export async function loadFileIntoDuckDb(
             throw new Error(message);
         }
     } else if (type === 'parquet') {
-        console.log('im here')
         try {
-            // Only for testing.Uncomment this to refresh table in cache
-            console.log('dropping')
-            try {
-                await vg.coordinator().exec([`
-                DROP TABLE IF EXISTS ${tableName}
-                `]);
-            } catch (error) {
-                console.error(error);
-            }
             await vg.coordinator().exec([vg.loadParquet(tableName, url)]);
             console.log(`Got DuckDb file: ${url}`);
         } catch (error) {
@@ -122,14 +112,6 @@ export async function createAggregateTable(tableName: string, headers: string[],
         })
 
         try {
-            // Only for testing.Uncomment this to refresh table in cache
-            try {
-                await vg.coordinator().exec([`
-                DROP TABLE IF EXISTS ${tableName}_aggregate
-                `]);
-            } catch (error) {
-                console.error(error);
-            }
             await vg.coordinator().exec([`
                 CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
                     SELECT 

From 8749a778b24f237293553ab2b307519001333cab Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 10:53:02 -0700
Subject: [PATCH 51/64] Selection/Filter Icons match type.

---
 .../globalSettings/FilterSelector.vue         | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index 811550c9..745f89f5 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -8,7 +8,7 @@ import FilterEditMenu from './FilterEditMenu.vue';
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
-const {dataFilters} = storeToRefs(selectionStore);
+const { dataFilters } = storeToRefs(selectionStore);
 
 const selectionsCount = computed(
     () => selectionStore.modifiedSelections.length
@@ -23,11 +23,10 @@ function removeSelection(plotName: string) {
 }
 function addFilter() {
     for (const selection of selectionStore.modifiedSelections) {
-
         selectionStore.addFilter({
             ...selection,
             range: [...selection.range],
-        })
+        });
     }
 }
 
@@ -75,7 +74,13 @@ const mutedTextClass = computed(() =>
                         left
                         class="q-pa-none q-mr-xs flex-grow-0"
                     >
-                        <q-avatar icon="scatter_plot" />
+                        <q-avatar
+                            :icon="
+                                selection.type === 'cell'
+                                    ? 'scatter_plot'
+                                    : 'linear_scale'
+                            "
+                        />
                     </q-item-section>
 
                     <q-item-section>
@@ -146,7 +151,13 @@ const mutedTextClass = computed(() =>
                         left
                         class="q-pa-none q-mr-xs flex-grow-0"
                     >
-                        <q-avatar icon="scatter_plot" />
+                        <q-avatar
+                            :icon="
+                                filter.type === 'cell'
+                                    ? 'scatter_plot'
+                                    : 'linear_scale'
+                            "
+                        />
                     </q-item-section>
 
                     <q-item-section>

From 10517721fa2bdd977c34bbeef15742d95cac0cff Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 11:57:12 -0700
Subject: [PATCH 52/64] Cell Attributes and Track Attributes are both dialog
 boxes.

---
 .../globalSettings/PlotSelector.vue           | 200 +++++++++++-------
 1 file changed, 118 insertions(+), 82 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 21bd5761..a47270ce 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -3,6 +3,8 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { QBtn } from 'quasar';
 import { storeToRefs } from 'pinia';
 import UnivariateCellPlot from './UnivariateCellPlot.vue';
+import LBtn from '../custom/LBtn.vue';
+
 import {
     useSelectionStore,
     emitter,
@@ -17,6 +19,9 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
 
+const selectionStore = useSelectionStore();
+const { dataSelections } = storeToRefs(selectionStore);
+
 const props = defineProps({
     selectorType: {
         type: String,
@@ -25,12 +30,15 @@ const props = defineProps({
     },
 });
 
-const cellPlotMenuOpen = ref(false);
+const cellPlotDialogOpen = ref(false);
 const trackPlotDialogOpen = ref(false);
-const selectedAttribute = ref('');
+const selectedCellAttribute = ref('');
+const selectedTrackAttribute = ref('');
 const selectedAggregation = ref('');
 const loading = ref(true);
 const loadedPlots = ref(0);
+const errorPlotName = ref('');
+
 const displayedCellPlots = computed(() => {
     const filtered = dataSelections.value.filter(
         (d) => d.displayChart && d.type === 'cell'
@@ -62,7 +70,7 @@ const aggregationOptions = [
 // On any update, computes the plots to be shown.
 
 // Checks if specifically experiment metadata is already loaded.
-const allPlotNames = computed(() => {
+const allAttributeNames = computed(() => {
     if (
         experimentDataInitialized.value &&
         currentExperimentMetadata.value &&
@@ -74,7 +82,7 @@ const allPlotNames = computed(() => {
     }
 });
 
-const firstPlotName = computed(() => {
+const firstAttributeName = computed(() => {
     if (
         experimentDataInitialized.value &&
         currentExperimentMetadata.value &&
@@ -99,12 +107,6 @@ const firstPlotName = computed(() => {
     }
 });
 
-const selectionStore = useSelectionStore();
-
-const { dataSelections } = storeToRefs(selectionStore);
-
-const errorPlotName = ref('');
-
 // If there is a plot loading here, a dialog is displayed.
 function handlePlotError(plotName: string) {
     errorPlotName.value = plotName;
@@ -124,11 +126,14 @@ onMounted(() => {
     watch(
         experimentDataInitialized,
         (isInitialized) => {
-            if (isInitialized && firstPlotName.value) {
-                selectionStore.addPlot(firstPlotName.value, 'cell');
+            if (isInitialized && firstAttributeName.value) {
+                selectionStore.addPlot(firstAttributeName.value, 'cell');
 
                 // For testing track attributes
-                selectionStore.addPlot(`AVG ${firstPlotName.value}`, 'track');
+                selectionStore.addPlot(
+                    `AVG ${firstAttributeName.value}`,
+                    'track'
+                );
             }
         },
         { immediate: true }
@@ -143,38 +148,40 @@ function handlePlotLoaded() {
 }
 
 // Selecting which plots to show
-function isPlotSelected(name: string): boolean {
-    const selection = selectionStore.getSelection(name);
-    if (selection === null) return false;
-    return selection.displayChart;
-}
-function togglePlotSelection(name: string) {
-    const selection = selectionStore.getSelection(name);
-    if (selection === null) {
-        selectionStore.addPlot(name, 'cell');
-        return;
-    }
-    selection.displayChart = !selection.displayChart;
-}
+// function isPlotSelected(name: string): boolean {
+//     const selection = selectionStore.getSelection(name);
+//     if (selection === null) return false;
+//     return selection.displayChart;
+// }
+// function togglePlotSelection(name: string) {
+//     const selection = selectionStore.getSelection(name);
+//     if (selection === null) {
+//         selectionStore.addPlot(name, 'cell');
+//         return;
+//     }
+//     selection.displayChart = !selection.displayChart;
+// }
 
 function onMenuButtonClick() {
-    trackPlotDialogOpen.value = true;
+    if (props.selectorType === 'Cell') {
+        cellPlotDialogOpen.value = !cellPlotDialogOpen.value;
+    } else if (props.selectorType === 'Track') {
+        trackPlotDialogOpen.value = !trackPlotDialogOpen.value;
+    }
 }
 
+function addCellPlotFromMenu(atr: string) {
+    cellPlotDialogOpen.value = false;
+    selectionStore.addPlot(`${atr}`, 'cell');
+    return;
+}
 function addTrackPlotFromMenu(atr: string, agg: string) {
     trackPlotDialogOpen.value = false;
-    // Add plot of "selected attribute" and "selected aggregation" to displayedTrackPlots
-    //const selection = selectionStore.getSelection(selectedAttribute);
-    //if (selection === null) {
-    //selectionStore.addPlot(`${agg} ${atr}`, 'track');
     selectionStore.addPlot(`${agg} ${atr}`, 'track');
     return;
-    //}
-}
-
-function handleSelectionRemoved(event: CustomEvent) {
 }
 
+//function handleSelectionRemoved(event: CustomEvent) {}
 </script>
 <template>
     <div>
@@ -193,40 +200,61 @@ function handleSelectionRemoved(event: CustomEvent) {
                     color="grey-7"
                     @click="onMenuButtonClick"
                 >
-                    <!-- Q-Menu for 'Cell' Selector -->
-                    <q-menu
-                        v-if="props.selectorType === 'Cell'"
-                        v-model="cellPlotMenuOpen"
-                        fit
-                        :dark="globalSettings.darkMode"
-                    >
-                        <q-list
-                            style="min-width: 100px; max-height: 300px"
-                            class="scroll"
-                        >
-                            <q-item
-                                v-for="name in allPlotNames"
-                                :key="name"
-                                clickable
-                                :class="{
-                                    'selected-item': isPlotSelected(name),
-                                }"
-                                @click.stop="togglePlotSelection(name)"
-                                dense
-                            >
-                                <q-item-section class="plot-name">{{
-                                    name
-                                }}</q-item-section>
-                            </q-item>
-                        </q-list>
-                    </q-menu>
+                    <q-dialog v-model="cellPlotDialogOpen" persistent>
+                        <q-card :dark="globalSettings.darkMode">
+                            <q-card-section>
+                                <div class="text-h6">
+                                    Add Cell Attribute to Display
+                                </div>
+                                <q-separator class="q-my-sm" />
+                                <q-form
+                                    class="q-gutter-md"
+                                    :dark="globalSettings.darkMode"
+                                >
+                                    <q-select
+                                        label="Select Attribute"
+                                        :options="allAttributeNames"
+                                        v-model="selectedCellAttribute"
+                                        clickable
+                                    >
+                                    </q-select>
+
+                                    <q-expansion-item>
+                                        <template v-slot:header>
+                                            <q-item-section
+                                                >Current Cell
+                                                Attributes</q-item-section
+                                            >
+                                        </template>
+                                    </q-expansion-item>
+
+                                    <div>
+                                        <l-btn
+                                            label="Add"
+                                            @click="
+                                                addCellPlotFromMenu(
+                                                    selectedCellAttribute
+                                                )
+                                            "
+                                            :dark="globalSettings.darkMode"
+                                            class="q-mr-sm"
+                                            color="blue"
+                                        />
+                                        <l-btn
+                                            label="Cancel"
+                                            flat
+                                            @click="onMenuButtonClick"
+                                            :dark="globalSettings.darkMode"
+                                            class="q-mr-sm"
+                                        />
+                                    </div>
+                                </q-form>
+                            </q-card-section>
+                        </q-card>
+                    </q-dialog>
 
                     <!-- Q-Dialog for 'Track' Selector -->
-                    <q-dialog
-                        v-if="props.selectorType === 'Track'"
-                        v-model="trackPlotDialogOpen"
-                        persistent
-                    >
+                    <q-dialog v-model="trackPlotDialogOpen" persistent>
                         <q-card :dark="globalSettings.darkMode">
                             <q-card-section>
                                 <div class="text-h6">
@@ -235,18 +263,12 @@ function handleSelectionRemoved(event: CustomEvent) {
                                 <q-separator class="q-my-sm" />
                                 <q-form
                                     class="q-gutter-md"
-                                    @submit="
-                                        addTrackPlotFromMenu(
-                                            selectedAttribute,
-                                            selectedAggregation
-                                        )
-                                    "
                                     :dark="globalSettings.darkMode"
                                 >
                                     <q-select
                                         label="Select Attribute"
-                                        :options="allPlotNames"
-                                        v-model="selectedAttribute"
+                                        :options="allAttributeNames"
+                                        v-model="selectedTrackAttribute"
                                         clickable
                                     >
                                     </q-select>
@@ -261,20 +283,34 @@ function handleSelectionRemoved(event: CustomEvent) {
                                     >
                                     </q-select>
 
+                                    <q-expansion-item>
+                                        <template v-slot:header>
+                                            <q-item-section
+                                                >Current Track
+                                                Attributes</q-item-section
+                                            >
+                                        </template>
+                                    </q-expansion-item>
+
                                     <div>
-                                        <q-btn
+                                        <l-btn
                                             label="Add"
-                                            type="submit"
-                                            color="primary"
+                                            @click="
+                                                addTrackPlotFromMenu(
+                                                    selectedTrackAttribute,
+                                                    selectedAggregation
+                                                )
+                                            "
                                             :dark="globalSettings.darkMode"
+                                            class="q-mr-sm"
+                                            color="blue"
                                         />
-                                        <q-btn
+                                        <l-btn
                                             label="Cancel"
-                                            color="primary"
                                             flat
-                                            @click="trackPlotDialogOpen = false"
-                                            class="q-ml-sm"
+                                            @click="onMenuButtonClick"
                                             :dark="globalSettings.darkMode"
+                                            class="q-mr-sm"
                                         />
                                     </div>
                                 </q-form>

From 109c222a6f8cb12b4b22a3afc42196e09f904ae9 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:59:15 -0700
Subject: [PATCH 53/64] caps fixed for 'track' and 'cell' strings

---
 .../globalSettings/FilterSelector.vue         |   4 +-
 .../globalSettings/PlotSelector.vue           |  14 +--
 .../globalSettings/UnivariateCellPlot.vue     | 108 ++++++++++--------
 3 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index 745f89f5..d3d77af0 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -195,7 +195,7 @@ const mutedTextClass = computed(() =>
             label="Cell Attributes"
         >
             <q-card :dark="globalSettings.darkMode">
-                <PlotSelector selector-type="Cell"></PlotSelector>
+                <PlotSelector selector-type="cell"></PlotSelector>
             </q-card>
         </q-expansion-item>
 
@@ -207,7 +207,7 @@ const mutedTextClass = computed(() =>
             label="Track Attributes"
         >
             <q-card :dark="globalSettings.darkMode">
-                <PlotSelector selector-type="Track"></PlotSelector>
+                <PlotSelector selector-type="track"></PlotSelector>
             </q-card>
         </q-expansion-item>
     </q-list>
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index a47270ce..611964cb 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -26,7 +26,7 @@ const props = defineProps({
     selectorType: {
         type: String,
         required: true,
-        validator: (value: string) => ['Track', 'Cell'].includes(value),
+        validator: (value: string) => ['track', 'cell'].includes(value),
     },
 });
 
@@ -163,9 +163,9 @@ function handlePlotLoaded() {
 // }
 
 function onMenuButtonClick() {
-    if (props.selectorType === 'Cell') {
+    if (props.selectorType === 'cell') {
         cellPlotDialogOpen.value = !cellPlotDialogOpen.value;
-    } else if (props.selectorType === 'Track') {
+    } else if (props.selectorType === 'track') {
         trackPlotDialogOpen.value = !trackPlotDialogOpen.value;
     }
 }
@@ -319,22 +319,22 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
                     </q-dialog>
                 </q-btn>
             </div>
-            <template v-if="props.selectorType === 'Cell'">
+            <template v-if="props.selectorType === 'cell'">
                 <UnivariateCellPlot
                     v-for="dataSelection in displayedCellPlots"
                     :key="dataSelection.plotName"
                     :plot-name="dataSelection.plotName"
-                    :attribute-type="'Cell'"
+                    :attribute-type="'cell'"
                     @plot-loaded="handlePlotLoaded"
                     @plot-error="handlePlotError"
                 />
             </template>
-            <template v-if="props.selectorType === 'Track'">
+            <template v-if="props.selectorType === 'track'">
                 <UnivariateCellPlot
                     v-for="dataSelection in displayedTrackPlots"
                     :key="dataSelection.plotName"
                     :plot-name="dataSelection.plotName"
-                    :attribute-type="'Track'"
+                    :attribute-type="'track'"
                     @plot-loaded="handlePlotLoaded"
                     @plot-error="handlePlotError"
                 />
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index 70a55942..d31c841c 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -21,7 +21,7 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
-const { cellLevelSelection,  trackLevelSelection } = useMosaicSelectionStore();
+const { cellLevelSelection, trackLevelSelection } = useMosaicSelectionStore();
 // Define Plot Emits and Props
 const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
 const props = defineProps({
@@ -32,52 +32,68 @@ const props = defineProps({
     attributeType: {
         type: String,
         required: true,
-        validator: (value: string) => ['Track', 'Cell'].includes(value),
+        validator: (value: string) => ['track', 'cell'].includes(value),
     },
 });
 
 const plotContainer = ref<HTMLDivElement | null>(null);
 const charts = ref<null | HTMLElement>(null);
-let observer:MutationObserver|null = null;
+let observer: MutationObserver | null = null;
 const loaded = ref(false);
 
 const isLoading = ref<boolean>(true);
 
 // Creates charts when data initialized.
-watch([experimentDataInitialized, plotContainer], ([isInitialized,newPlotContainer]) => {
-    if(isInitialized && newPlotContainer) {
-        // Determine which selection to use
-        const mosaicSelection = props.attributeType === 'Cell' ? cellLevelSelection : trackLevelSelection;
-        // Determine which dataset to use
-        let dataSetName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`
-        if(props.attributeType === 'Track'){
-            dataSetName = `${dataSetName}_aggregate`
-        }
-
-        // Create the plot
-        charts.value = makePlot(props.plotName, mosaicSelection, dataSetName);
-        if(charts.value){
-            plotContainer.value?.appendChild(charts.value);
-            observer = new MutationObserver((mutationsList) => {
-            for (const mutation of mutationsList) {
-                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                    loaded.value = true;
-                    isLoading.value = false;
-                    observer?.disconnect();
-                    break;
-                }
+watch(
+    [experimentDataInitialized, plotContainer],
+    ([isInitialized, newPlotContainer]) => {
+        if (isInitialized && newPlotContainer) {
+            // Determine which selection to use
+            const mosaicSelection =
+                props.attributeType === 'cell'
+                    ? cellLevelSelection
+                    : trackLevelSelection;
+            // Determine which dataset to use
+            let dataSetName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`;
+            if (props.attributeType === 'track') {
+                dataSetName = `${dataSetName}_aggregate`;
             }
-        });
 
-        // Observe the SVG for changes to its child elements
-        observer.observe(charts.value, { childList: true, subtree: true });
+            // Create the plot
+            charts.value = makePlot(
+                props.plotName,
+                mosaicSelection,
+                dataSetName
+            );
+            if (charts.value) {
+                plotContainer.value?.appendChild(charts.value);
+                observer = new MutationObserver((mutationsList) => {
+                    for (const mutation of mutationsList) {
+                        if (
+                            mutation.type === 'childList' &&
+                            mutation.addedNodes.length > 0
+                        ) {
+                            loaded.value = true;
+                            isLoading.value = false;
+                            observer?.disconnect();
+                            break;
+                        }
+                    }
+                });
+
+                // Observe the SVG for changes to its child elements
+                observer.observe(charts.value, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
         }
-
-    }
-}, {immediate:true});
+    },
+    { immediate: true }
+);
 
 // Vg Plot
-function makePlot(column: string, mosaicSelection:any, datasetName:string) {
+function makePlot(column: string, mosaicSelection: any, datasetName: string) {
     try {
         return vg.plot(
             // Background grey data
@@ -88,7 +104,7 @@ function makePlot(column: string, mosaicSelection:any, datasetName:string) {
                 inset: 1,
             }),
             // Currently Selected Data
-            vg.rectY(vg.from(datasetName, {filterBy: mosaicSelection}), {
+            vg.rectY(vg.from(datasetName, { filterBy: mosaicSelection }), {
                 x: vg.bin(column),
                 y: vg.count(),
                 fill: '#377eb8',
@@ -119,8 +135,6 @@ function makePlot(column: string, mosaicSelection:any, datasetName:string) {
     }
 }
 
-
-
 // Checks when everything has loaded
 watch(loaded, () => {
     handlePlotLoading();
@@ -152,7 +166,6 @@ const selection = computed<DataSelection>(() => {
     return s;
 });
 
-
 const rangeModel = computed({
     get() {
         return { min: selection.value.range[0], max: selection.value.range[1] };
@@ -173,16 +186,21 @@ function handleRangeUpdate(newRange: { min: number; max: number }) {
     <div>
         <q-item-section style="position: relative">
             <div ref="plotContainer" style="position: relative">
-                    <FilterEditMenu
-                        :plot-name="props.plotName"
-                        :initial-min="rangeModel.min"
-                        :initial-max="rangeModel.max"
-                        type="selection"
-                        @update:range="handleRangeUpdate"
-                    />
+                <FilterEditMenu
+                    :plot-name="props.plotName"
+                    :initial-min="rangeModel.min"
+                    :initial-max="rangeModel.max"
+                    type="selection"
+                    @update:range="handleRangeUpdate"
+                />
                 <!-- Uses same width and height as single chart to replace the chart. -->
-                <div v-if="isLoading" style="width:268px;height:85px; gap:10px" class="flex justify-center align-center">
-                    <q-spinner/> <div class="text-caption">Loading chart</div>
+                <div
+                    v-if="isLoading"
+                    style="width: 268px; height: 85px; gap: 10px"
+                    class="flex justify-center align-center"
+                >
+                    <q-spinner />
+                    <div class="text-caption">Loading chart</div>
                 </div>
                 <div v-if="!isLoading" class="q-range-container">
                     <q-range

From ea5d21e2ee22f08b6c0ce8a63a62dd6a26c5ab20 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:15:13 -0700
Subject: [PATCH 54/64] Refactored & shortened

---
 .../globalSettings/PlotSelector.vue           | 91 ++++---------------
 1 file changed, 20 insertions(+), 71 deletions(-)

diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 611964cb..89b7d592 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -18,10 +18,10 @@ const notificationStore = useNotificationStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
-
 const selectionStore = useSelectionStore();
 const { dataSelections } = storeToRefs(selectionStore);
 
+// Are these plots track or cell level?
 const props = defineProps({
     selectorType: {
         type: String,
@@ -29,35 +29,20 @@ const props = defineProps({
         validator: (value: string) => ['track', 'cell'].includes(value),
     },
 });
-
 const cellPlotDialogOpen = ref(false);
 const trackPlotDialogOpen = ref(false);
 const selectedCellAttribute = ref('');
 const selectedTrackAttribute = ref('');
 const selectedAggregation = ref('');
-const loading = ref(true);
-const loadedPlots = ref(0);
 const errorPlotName = ref('');
 
-const displayedCellPlots = computed(() => {
-    const filtered = dataSelections.value.filter(
-        (d) => d.displayChart && d.type === 'cell'
+// Plots Displayed
+const displayedPlots = computed(() => {
+    return dataSelections.value.filter(
+        (d) => d.displayChart && d.type === props.selectorType
     );
-    // console.log('Filtered Cell Plots:', filtered);
-    return filtered;
 });
 
-const displayedTrackPlots = computed(() => {
-    const filtered = dataSelections.value.filter(
-        (d) => d.displayChart && d.type === 'track'
-    );
-    // console.log('Filtered Track Plots:', filtered);
-    return filtered;
-});
-
-const totalCellPlots = computed(() => displayedCellPlots.value.length);
-const totalTrackPlots = computed(() => displayedTrackPlots.value.length);
-
 const aggregationOptions = [
     { label: 'Sum', value: 'SUM' },
     { label: 'Average', value: 'AVG' },
@@ -67,14 +52,13 @@ const aggregationOptions = [
     { label: 'Median', value: 'MEDIAN' },
 ];
 
-// On any update, computes the plots to be shown.
-
-// Checks if specifically experiment metadata is already loaded.
+// Collects all attribute names after the data is loaded.
 const allAttributeNames = computed(() => {
     if (
         experimentDataInitialized.value &&
         currentExperimentMetadata.value &&
-        currentExperimentMetadata.value.headers
+        currentExperimentMetadata.value.headers &&
+        currentExperimentMetadata.value.headers.length > 0
     ) {
         return currentExperimentMetadata.value.headers;
     } else {
@@ -82,6 +66,7 @@ const allAttributeNames = computed(() => {
     }
 });
 
+// Finds the first attribute name if data is loaded.
 const firstAttributeName = computed(() => {
     if (
         experimentDataInitialized.value &&
@@ -140,28 +125,6 @@ onMounted(() => {
     );
 });
 
-function handlePlotLoaded() {
-    loadedPlots.value++;
-    if (loadedPlots.value === totalCellPlots.value + totalTrackPlots.value) {
-        loading.value = false;
-    }
-}
-
-// Selecting which plots to show
-// function isPlotSelected(name: string): boolean {
-//     const selection = selectionStore.getSelection(name);
-//     if (selection === null) return false;
-//     return selection.displayChart;
-// }
-// function togglePlotSelection(name: string) {
-//     const selection = selectionStore.getSelection(name);
-//     if (selection === null) {
-//         selectionStore.addPlot(name, 'cell');
-//         return;
-//     }
-//     selection.displayChart = !selection.displayChart;
-// }
-
 function onMenuButtonClick() {
     if (props.selectorType === 'cell') {
         cellPlotDialogOpen.value = !cellPlotDialogOpen.value;
@@ -173,15 +136,11 @@ function onMenuButtonClick() {
 function addCellPlotFromMenu(atr: string) {
     cellPlotDialogOpen.value = false;
     selectionStore.addPlot(`${atr}`, 'cell');
-    return;
 }
 function addTrackPlotFromMenu(atr: string, agg: string) {
     trackPlotDialogOpen.value = false;
     selectionStore.addPlot(`${agg} ${atr}`, 'track');
-    return;
 }
-
-//function handleSelectionRemoved(event: CustomEvent) {}
 </script>
 <template>
     <div>
@@ -189,6 +148,7 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
             <div class="text-caption q-m-lg">No experiment selected.</div>
         </div>
         <div v-else>
+            <!-- Menu Icon -->
             <div class="q-item-section__right">
                 <q-btn
                     class="gt-xs q-mr-sm"
@@ -200,6 +160,7 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
                     color="grey-7"
                     @click="onMenuButtonClick"
                 >
+                    <!-- Cell Attributes Dialog -->
                     <q-dialog v-model="cellPlotDialogOpen" persistent>
                         <q-card :dark="globalSettings.darkMode">
                             <q-card-section>
@@ -253,7 +214,7 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
                         </q-card>
                     </q-dialog>
 
-                    <!-- Q-Dialog for 'Track' Selector -->
+                    <!-- Track Attributes Dialog -->
                     <q-dialog v-model="trackPlotDialogOpen" persistent>
                         <q-card :dark="globalSettings.darkMode">
                             <q-card-section>
@@ -319,26 +280,14 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
                     </q-dialog>
                 </q-btn>
             </div>
-            <template v-if="props.selectorType === 'cell'">
-                <UnivariateCellPlot
-                    v-for="dataSelection in displayedCellPlots"
-                    :key="dataSelection.plotName"
-                    :plot-name="dataSelection.plotName"
-                    :attribute-type="'cell'"
-                    @plot-loaded="handlePlotLoaded"
-                    @plot-error="handlePlotError"
-                />
-            </template>
-            <template v-if="props.selectorType === 'track'">
-                <UnivariateCellPlot
-                    v-for="dataSelection in displayedTrackPlots"
-                    :key="dataSelection.plotName"
-                    :plot-name="dataSelection.plotName"
-                    :attribute-type="'track'"
-                    @plot-loaded="handlePlotLoaded"
-                    @plot-error="handlePlotError"
-                />
-            </template>
+            <!--Generate the Plots-->
+            <UnivariateCellPlot
+                v-for="dataSelection in displayedPlots"
+                :key="dataSelection.plotName"
+                :plot-name="dataSelection.plotName"
+                :attribute-type="props.selectorType"
+                @plot-error="handlePlotError"
+            />
         </div>
     </div>
 </template>

From 63c536eaa4854faaaac1c2dfcf7a8c007571d833 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:28:06 -0700
Subject: [PATCH 55/64] 'delete' dialog for plots. Empty UI.

---
 .../globalSettings/FilterEditMenu.vue         |  70 ++++++++++--
 .../globalSettings/FilterSelector.vue         |   6 +-
 .../globalSettings/PlotSelector.vue           |  18 ----
 .../globalSettings/UnivariateCellPlot.vue     |   3 +-
 .../interactionStores/selectionStore.ts       | 100 +++++++++++-------
 5 files changed, 131 insertions(+), 66 deletions(-)

diff --git a/apps/client/src/components/globalSettings/FilterEditMenu.vue b/apps/client/src/components/globalSettings/FilterEditMenu.vue
index 0eba4711..c234b4fd 100644
--- a/apps/client/src/components/globalSettings/FilterEditMenu.vue
+++ b/apps/client/src/components/globalSettings/FilterEditMenu.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import LBtn from '../custom/LBtn.vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {
     QMenu,
@@ -15,18 +16,38 @@ import {
 } from 'quasar';
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
 
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
+const mosaicSelectionStore = useMosaicSelectionStore(); // Initialize the store
+
 const globalSettings = useGlobalSettings();
 const props = defineProps<{
     plotName: string;
     initialMin: number;
     initialMax: number;
-    type: 'selection' | 'filter';
+    filterType: 'selection' | 'filter';
+    attributeType: string;
 }>();
 
 const emit = defineEmits(['update:range']);
 
 const selectionStore = useSelectionStore();
 
+// Plot Deletion -----------------
+const deleteDialogOpen = ref(false);
+
+function confirmDeletePlot() {
+    deleteDialogOpen.value = true;
+}
+function deletePlot() {
+    selectionStore.removeSelectionByPlotName(props.plotName);
+    selectionStore.removeFilterByPlotName(props.plotName);
+    deleteDialogOpen.value = false;
+}
+
+function cancelDelete() {
+    deleteDialogOpen.value = false;
+}
+
 const showRangeDialog = ref(false);
 const minInput = ref(props.initialMin);
 const maxInput = ref(props.initialMax);
@@ -46,12 +67,19 @@ function onSubmit() {
 
     const newRange: [number, number] = [minInput.value, maxInput.value];
 
-    if (props.type === 'selection') {
+    if (props.filterType === 'selection') {
         selectionStore.updateSelection(props.plotName, newRange);
-    } else if (props.type === 'filter') {
+        //useMosaicSelectionStore.updateMosaicSelection();
+    } else if (props.filterType === 'filter') {
         selectionStore.updateFilter(props.plotName, newRange);
     }
 
+    // mosaicSelectionStore.updateMosaicSelection(
+    //     props.plotName,
+    //     newRange,
+    //     'cell'
+    // );
+
     emit('update:range', { min: newRange[0], max: newRange[1] });
     showRangeDialog.value = false;
 }
@@ -75,6 +103,16 @@ const minMaxFormValid = computed<boolean>(() => {
 
 <template>
     <q-menu touch-position context-menu :dark="globalSettings.darkMode">
+        <q-item
+            clickable
+            v-close-popup
+            @click="confirmDeletePlot"
+            :dark="globalSettings.darkMode"
+        >
+            <q-item-section :dark="globalSettings.darkMode" class="text-red"
+                >Delete</q-item-section
+            >
+        </q-item>
         <q-item
             clickable
             v-close-popup
@@ -86,6 +124,23 @@ const minMaxFormValid = computed<boolean>(() => {
             >
         </q-item>
     </q-menu>
+    <!-- Confirmation Dialog -->
+    <q-dialog v-model="deleteDialogOpen" persistent>
+        <q-card :dark="globalSettings.darkMode">
+            <q-card-section>
+                <div class="text-h6">Delete "{{ props.plotName }}"?</div>
+            </q-card-section>
+            <q-card-actions align="right">
+                <l-btn
+                    flat
+                    label="Cancel"
+                    color="primary"
+                    @click="cancelDelete"
+                />
+                <l-btn flat label="Delete" color="red" @click="deletePlot" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
 
     <q-dialog v-model="showRangeDialog">
         <q-card :dark="globalSettings.darkMode">
@@ -123,19 +178,20 @@ const minMaxFormValid = computed<boolean>(() => {
                         v-if="minMaxFormError"
                         dense
                         class="text-white bg-red"
-                        >{{ minMaxFormError }}
                         :dark="globalSettings.darkMode"
+                    >
+                        {{ minMaxFormError }}
                     </q-banner>
 
                     <div>
-                        <q-btn
+                        <l-btn
                             label="Submit"
-                            type="submit"
+                            @click="onSubmit"
                             color="primary"
                             :disable="!minMaxFormValid"
                             :dark="globalSettings.darkMode"
                         />
-                        <q-btn
+                        <l-btn
                             label="Cancel"
                             color="primary"
                             flat
diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index d3d77af0..5fa20872 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -66,7 +66,8 @@ const mutedTextClass = computed(() =>
                         :plot-name="selection.plotName"
                         :initial-min="selection.range[0]"
                         :initial-max="selection.range[1]"
-                        type="selection"
+                        filterType="selection"
+                        :attributeType="selection.type"
                     />
 
                     <q-item-section
@@ -143,7 +144,8 @@ const mutedTextClass = computed(() =>
                         :plot-name="filter.plotName"
                         :initial-min="filter.range[0]"
                         :initial-max="filter.range[1]"
-                        type="filter"
+                        filterType="filter"
+                        :attributeType="filter.type"
                     />
 
                     <q-item-section
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index 89b7d592..58d4487f 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -180,15 +180,6 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
                                     >
                                     </q-select>
 
-                                    <q-expansion-item>
-                                        <template v-slot:header>
-                                            <q-item-section
-                                                >Current Cell
-                                                Attributes</q-item-section
-                                            >
-                                        </template>
-                                    </q-expansion-item>
-
                                     <div>
                                         <l-btn
                                             label="Add"
@@ -244,15 +235,6 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
                                     >
                                     </q-select>
 
-                                    <q-expansion-item>
-                                        <template v-slot:header>
-                                            <q-item-section
-                                                >Current Track
-                                                Attributes</q-item-section
-                                            >
-                                        </template>
-                                    </q-expansion-item>
-
                                     <div>
                                         <l-btn
                                             label="Add"
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index d31c841c..2aeb7ba0 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -190,7 +190,8 @@ function handleRangeUpdate(newRange: { min: number; max: number }) {
                     :plot-name="props.plotName"
                     :initial-min="rangeModel.min"
                     :initial-max="rangeModel.max"
-                    type="selection"
+                    filterType="selection"
+                    :attributeType="props.attributeType"
                     @update:range="handleRangeUpdate"
                 />
                 <!-- Uses same width and height as single chart to replace the chart. -->
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index 4646b902..ba0060d1 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -39,28 +39,35 @@ function median(values: number[]) {
 
 function checkSelection(selection: DataSelection, track: Track) {
     if (selection.type === 'cell') {
-        const valuesForPlotName = track.cells.map(cell => cell.attrNum[selection.plotName])
+        const valuesForPlotName = track.cells.map(
+            (cell) => cell.attrNum[selection.plotName]
+        );
         const max_value = Math.max(...valuesForPlotName);
         const min_value = Math.min(...valuesForPlotName);
 
         // Intersects with selected
         // Checks if max value and min value make track fall outside of range
         // This is the same logic used in the SQL query predicate for updating track level selection.
-        return !(max_value <= selection.range[0] || min_value >= selection.range[1])
-
+        return !(
+            max_value <= selection.range[0] || min_value >= selection.range[1]
+        );
     } else if (selection.type === 'track') {
         // Split plot name. Track level attributes come as 'AVG column name', so we get the first item in the split as the aggregate function
         const [aggregate, ...rest] = selection.plotName.split(' ');
         //Join the rest, which will be the original column name
-        const originalColumn = rest.join(' ')
+        const originalColumn = rest.join(' ');
         //Get the values for that column
-        const valuesForPlotName = track.cells.map(cell => cell.attrNum[originalColumn])
+        const valuesForPlotName = track.cells.map(
+            (cell) => cell.attrNum[originalColumn]
+        );
 
         let aggregateValue;
         // Based on aggregate function, compute different aggregate values
         switch (aggregate) {
             case 'AVG':
-                aggregateValue = valuesForPlotName.reduce((sum, value) => sum + value, 0) / valuesForPlotName.length;
+                aggregateValue =
+                    valuesForPlotName.reduce((sum, value) => sum + value, 0) /
+                    valuesForPlotName.length;
                 break;
             case 'MAX':
                 aggregateValue = Math.max(...valuesForPlotName);
@@ -69,7 +76,10 @@ function checkSelection(selection: DataSelection, track: Track) {
                 aggregateValue = Math.min(...valuesForPlotName);
                 break;
             case 'SUM':
-                aggregateValue = valuesForPlotName.reduce((sum, value) => sum + value, 0);
+                aggregateValue = valuesForPlotName.reduce(
+                    (sum, value) => sum + value,
+                    0
+                );
                 break;
             case 'COUNT':
                 aggregateValue = valuesForPlotName.length;
@@ -79,18 +89,22 @@ function checkSelection(selection: DataSelection, track: Track) {
                 break;
             default:
                 //Defaults to just average
-                aggregateValue = valuesForPlotName.reduce((sum, value) => sum + value, 0) / valuesForPlotName.length;
+                aggregateValue =
+                    valuesForPlotName.reduce((sum, value) => sum + value, 0) /
+                    valuesForPlotName.length;
         }
-        return (aggregateValue <= selection.range[1] && aggregateValue >= selection.range[0])
+        return (
+            aggregateValue <= selection.range[1] &&
+            aggregateValue >= selection.range[0]
+        );
     }
-    return true
+    return true;
 }
 
-
 export const useSelectionStore = defineStore('Selection', {
     state: () => ({
         dataSelections: [] as DataSelection[],
-        dataFilters: [] as DataSelection[]
+        dataFilters: [] as DataSelection[],
     }),
     getters: {
         modifiedSelections: (state) => {
@@ -102,32 +116,31 @@ export const useSelectionStore = defineStore('Selection', {
         selectedTrackingIds: (state) => {
             const cellMetaData = useCellMetaData();
             const selectedTrackIds: string[] = [];
-            cellMetaData.trackArray?.forEach(track => {
+            cellMetaData.trackArray?.forEach((track) => {
                 let selected = true;
-                state.dataSelections.forEach(selection => {
-                    selected = selected && checkSelection(selection, track)
-                })
+                state.dataSelections.forEach((selection) => {
+                    selected = selected && checkSelection(selection, track);
+                });
                 if (selected) {
                     selectedTrackIds.push(track.trackId);
                 }
-            })
+            });
             return state.dataSelections.length === 0 ? null : selectedTrackIds;
         },
         unfilteredTrackingIds: (state) => {
             const cellMetaData = useCellMetaData();
             const unfilteredTrackIds: string[] = [];
-            cellMetaData.trackArray?.forEach(track => {
+            cellMetaData.trackArray?.forEach((track) => {
                 let unfiltered = true;
-                state.dataFilters.forEach(filter => {
-                    unfiltered = unfiltered && checkSelection(filter, track)
-                })
+                state.dataFilters.forEach((filter) => {
+                    unfiltered = unfiltered && checkSelection(filter, track);
+                });
                 if (unfiltered) {
                     unfilteredTrackIds.push(track.trackId);
                 }
-            })
+            });
             return state.dataFilters.length === 0 ? null : unfilteredTrackIds;
-        }
-
+        },
     },
     actions: {
         addSelection(selection: DataSelection) {
@@ -173,11 +186,21 @@ export const useSelectionStore = defineStore('Selection', {
                 (s) => s.plotName === plotName
             );
             if (index === -1) return;
-            window.dispatchEvent(
-                new CustomEvent('selectionRemoved', { detail: plotName })
-            );
+            // window.dispatchEvent(
+            //     new CustomEvent('selectionRemoved', { detail: plotName })
+            // );
             this.removeSelection(index);
         },
+        removeFilterByPlotName(plotName: string) {
+            const index = this.dataFilters.findIndex(
+                (s) => s.plotName === plotName
+            );
+            if (index === -1) return;
+            // window.dispatchEvent(
+            //     new CustomEvent('filterRemoved', { detail: plotName })
+            // );
+            this.removeFilter(index);
+        },
         removePlotWithErrors(plotName: string) {
             const index = this.dataSelections.findIndex(
                 (s) => s.plotName === plotName
@@ -257,7 +280,6 @@ export const useSelectionStore = defineStore('Selection', {
                     );
                 }
 
-
                 const result = await vg.coordinator().query(query);
 
                 if (
@@ -308,22 +330,24 @@ export const useSelectionStore = defineStore('Selection', {
         removeFilter(index: number) {
             this.dataFilters.splice(index, 1);
         },
-        updateFilter(plotName: string, range: [number, number], type?: DataSelection['type']) {
+        updateFilter(
+            plotName: string,
+            range: [number, number],
+            type?: DataSelection['type']
+        ) {
             const existingIndex = this.dataFilters.findIndex(
                 (s) => s.plotName === plotName
             );
             if (existingIndex !== -1) {
                 this.dataFilters[existingIndex].range = range;
             } else {
-                this.addFilter(
-                    {
-                        plotName,
-                        range,
-                        type: type ?? 'cell',
-                        maxRange: [0, 1000],
-                        displayChart: true
-                    }
-                );
+                this.addFilter({
+                    plotName,
+                    range,
+                    type: type ?? 'cell',
+                    maxRange: [0, 1000],
+                    displayChart: true,
+                });
             }
         },
         clearAllFilters() {

From 33dd6b022bd36379e3e3f45d6269e660494cd834 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 16:49:31 -0700
Subject: [PATCH 56/64] Rick-Click 'delete' implemented

---
 .../globalSettings/FilterEditMenu.vue         |  1 +
 .../globalSettings/FilterSelector.vue         |  2 +-
 .../interactionStores/selectionStore.ts       | 30 ++++++++++++-------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/components/globalSettings/FilterEditMenu.vue b/apps/client/src/components/globalSettings/FilterEditMenu.vue
index c234b4fd..137d5ca3 100644
--- a/apps/client/src/components/globalSettings/FilterEditMenu.vue
+++ b/apps/client/src/components/globalSettings/FilterEditMenu.vue
@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue';
 import LBtn from '../custom/LBtn.vue';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { defineEmits } from 'vue';
 import {
     QMenu,
     QItem,
diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index 5fa20872..0968ad03 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -19,7 +19,7 @@ function removeFilter(index: number) {
     selectionStore.removeFilter(index);
 }
 function removeSelection(plotName: string) {
-    selectionStore.removeSelectionByPlotName(plotName);
+    selectionStore.resetSelectionByPlotName(plotName);
 }
 function addFilter() {
     for (const selection of selectionStore.modifiedSelections) {
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index ba0060d1..f5d76496 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -156,7 +156,7 @@ export const useSelectionStore = defineStore('Selection', {
         clearAllSelections() {
             this.dataSelections = [];
         },
-        removeSelection(index: number) {
+        resetSelection(index: number) {
             this.dataSelections[index].range = [
                 ...this.dataSelections[index].maxRange,
             ];
@@ -181,16 +181,6 @@ export const useSelectionStore = defineStore('Selection', {
                 });
             }
         },
-        removeSelectionByPlotName(plotName: string) {
-            const index = this.dataSelections.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (index === -1) return;
-            // window.dispatchEvent(
-            //     new CustomEvent('selectionRemoved', { detail: plotName })
-            // );
-            this.removeSelection(index);
-        },
         removeFilterByPlotName(plotName: string) {
             const index = this.dataFilters.findIndex(
                 (s) => s.plotName === plotName
@@ -201,6 +191,14 @@ export const useSelectionStore = defineStore('Selection', {
             // );
             this.removeFilter(index);
         },
+        removeSelectionByPlotName(plotName: string) {
+            const index = this.dataSelections.findIndex(
+                (s) => s.plotName === plotName
+            );
+            if (index !== -1) {
+                this.dataSelections.splice(index, 1);
+            }
+        },
         removePlotWithErrors(plotName: string) {
             const index = this.dataSelections.findIndex(
                 (s) => s.plotName === plotName
@@ -208,6 +206,16 @@ export const useSelectionStore = defineStore('Selection', {
             if (index === -1) return;
             this.dataSelections.splice(index, 1);
         },
+        resetSelectionByPlotName(plotName: string) {
+            const index = this.dataSelections.findIndex(
+                (s) => s.plotName === plotName
+            );
+            if (index === -1) return;
+            // window.dispatchEvent(
+            //     new CustomEvent('selectionRemoved', { detail: plotName })
+            // );
+            this.resetSelection(index);
+        },
         getSelection(name: string): DataSelection | null {
             const s = this.dataSelections.find(
                 (s: DataSelection) => s.plotName === name

From 4ec16b64169821fdad4e4f8effac6042874e8549 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:04:57 -0700
Subject: [PATCH 57/64] Delete Dialog button spacings

---
 apps/client/src/components/globalSettings/FilterEditMenu.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/client/src/components/globalSettings/FilterEditMenu.vue b/apps/client/src/components/globalSettings/FilterEditMenu.vue
index 137d5ca3..2f949067 100644
--- a/apps/client/src/components/globalSettings/FilterEditMenu.vue
+++ b/apps/client/src/components/globalSettings/FilterEditMenu.vue
@@ -138,6 +138,8 @@ const minMaxFormValid = computed<boolean>(() => {
                     color="primary"
                     @click="cancelDelete"
                 />
+                <q-space />
+
                 <l-btn flat label="Delete" color="red" @click="deletePlot" />
             </q-card-actions>
         </q-card>

From f06d7f3199b16c70201dbe9eaf9eb8f7f7f917ad Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 12 Nov 2024 08:48:53 -0700
Subject: [PATCH 58/64] Fixed opacity on image view geojson layer, testing for
 selection store from DuckDB

---
 apps/client/src/components/ImageViewer.vue             | 10 +++-------
 .../src/stores/interactionStores/selectionStore.ts     |  5 +++++
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/components/ImageViewer.vue b/apps/client/src/components/ImageViewer.vue
index 5170e568..187a5fb2 100644
--- a/apps/client/src/components/ImageViewer.vue
+++ b/apps/client/src/components/ImageViewer.vue
@@ -231,7 +231,7 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
         ),
         lineWidthUnits: 'pixels',
         id: 'segmentations',
-        opacity: 0.4,
+        opacity: 1,
         stroked: true,
         filled: true,
         getFillColor: (info) => {
@@ -241,9 +241,7 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return hoverColorWithAlpha;
             }
-            // if(!isSelected(info.properties?.id?.toString())){
-            //     return[0,0,0,255];
-            // }
+
             const { filtered } = _determineSelectedOrFiltered(info.properties?.id?.toString())
             if(filtered){
                 return[0,0,0,255];
@@ -262,9 +260,7 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
             ) {
                 return colors.hovered.rgb;
             }
-            // if(!isSelected(info.properties?.id?.toString())){
-            //     return[0,0,0,255];
-            // }
+
 
             const {selected,filtered} = _determineSelectedOrFiltered(info.properties?.id?.toString())
             if(filtered){
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index f5d76496..a9db41f6 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -52,6 +52,11 @@ function checkSelection(selection: DataSelection, track: Track) {
             max_value <= selection.range[0] || min_value >= selection.range[1]
         );
     } else if (selection.type === 'track') {
+
+        const { currentExperimentMetadata } = useDatasetSelectionStore();
+
+
+
         // Split plot name. Track level attributes come as 'AVG column name', so we get the first item in the split as the aggregate function
         const [aggregate, ...rest] = selection.plotName.split(' ');
         //Join the rest, which will be the original column name

From 7c30585944f01792198a54d0f463dd3f8d870a02 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 12 Nov 2024 12:33:33 -0700
Subject: [PATCH 59/64] Changed selection and filtering to use duckdb aggregate
 table.

---
 .../interactionStores/selectionStore.ts       | 639 +++++++++---------
 apps/client/src/util/datasetLoader.ts         |  12 +-
 2 files changed, 320 insertions(+), 331 deletions(-)

diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index a9db41f6..cc993151 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -1,9 +1,10 @@
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
 import mitt from 'mitt';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import { useCellMetaData } from '../dataStores/cellMetaDataStore';
 import type { Track } from '../dataStores/cellMetaDataStore';
+import { ref, computed, watch } from 'vue';
+
 
 export interface DataSelection {
     plotName: string;
@@ -20,351 +21,331 @@ type Events = {
 export const emitter = mitt<Events>();
 //const emit = defineEmits(['plot-error']);
 
-function median(values: number[]) {
-    if (values.length === 0) return 0; // Handle empty array
-
-    // Sort the array in ascending order
-    values.sort((a, b) => a - b);
 
-    const middle = Math.floor(values.length / 2);
 
-    // If the length is odd, return the middle element
-    if (values.length % 2 !== 0) {
-        return values[middle];
+function getPredicate(selection: DataSelection) {
+    if (selection.type === 'cell') {
+        return `NOT ("MAX ${selection.plotName}" <= ${selection.range[0]} OR "MIN ${selection.plotName}" >= ${selection.range[1]})`
+    } else if (selection.type === 'track') {
+        return `"${selection.plotName}" >= ${selection.range[0]} AND "${selection.plotName}" <= ${selection.range[1]}`
     }
-
-    // If the length is even, return the average of the two middle elements
-    return (values[middle - 1] + values[middle]) / 2;
+    return true;
 }
 
-function checkSelection(selection: DataSelection, track: Track) {
-    if (selection.type === 'cell') {
-        const valuesForPlotName = track.cells.map(
-            (cell) => cell.attrNum[selection.plotName]
-        );
-        const max_value = Math.max(...valuesForPlotName);
-        const min_value = Math.min(...valuesForPlotName);
-
-        // Intersects with selected
-        // Checks if max value and min value make track fall outside of range
-        // This is the same logic used in the SQL query predicate for updating track level selection.
-        return !(
-            max_value <= selection.range[0] || min_value >= selection.range[1]
-        );
-    } else if (selection.type === 'track') {
+export const useSelectionStore = defineStore('selectionStore', () => {
 
-        const { currentExperimentMetadata } = useDatasetSelectionStore();
+    const dataSetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata, currentLocationMetadata } = storeToRefs(dataSetSelectionStore);
 
+    // const aggregateTableName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata_aggregate`
 
 
-        // Split plot name. Track level attributes come as 'AVG column name', so we get the first item in the split as the aggregate function
-        const [aggregate, ...rest] = selection.plotName.split(' ');
-        //Join the rest, which will be the original column name
-        const originalColumn = rest.join(' ');
-        //Get the values for that column
-        const valuesForPlotName = track.cells.map(
-            (cell) => cell.attrNum[originalColumn]
+    const dataSelections = ref<DataSelection[]>([]);
+    const dataFilters = ref<DataSelection[]>([]);
+    const selectedTrackingIds = ref<string[] | null>(null);
+    const unfilteredTrackingIds = ref<string[] | null>(null);
+
+    const modifiedSelections = computed<DataSelection[]>(() => {
+        return dataSelections.value.filter(
+            (s) =>
+                s.range[0] !== s.maxRange[0] || s.range[1] !== s.maxRange[1]
         );
+    })
 
-        let aggregateValue;
-        // Based on aggregate function, compute different aggregate values
-        switch (aggregate) {
-            case 'AVG':
-                aggregateValue =
-                    valuesForPlotName.reduce((sum, value) => sum + value, 0) /
-                    valuesForPlotName.length;
-                break;
-            case 'MAX':
-                aggregateValue = Math.max(...valuesForPlotName);
-                break;
-            case 'MIN':
-                aggregateValue = Math.min(...valuesForPlotName);
-                break;
-            case 'SUM':
-                aggregateValue = valuesForPlotName.reduce(
-                    (sum, value) => sum + value,
-                    0
-                );
-                break;
-            case 'COUNT':
-                aggregateValue = valuesForPlotName.length;
-                break;
-            case 'MEDIAN':
-                aggregateValue = median(valuesForPlotName);
-                break;
-            default:
-                //Defaults to just average
-                aggregateValue =
-                    valuesForPlotName.reduce((sum, value) => sum + value, 0) /
-                    valuesForPlotName.length;
+    interface TrackingIdQueryResult {
+        id: string
+    }
+
+    // Watch variable for getting selections
+    watch([dataSelections, dataFilters], async ([newDataSelections, newDataFilters]) => {
+        const queryPrefix = `
+            SELECT CAST(tracking_id as VARCHAR) AS id
+            FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata_aggregate
+            WHERE location = '${currentLocationMetadata?.value?.id}'
+        `;
+
+        const selectionPredicate = newDataSelections.map(selection => getPredicate(selection)).join(' AND ');
+
+        if (selectionPredicate.length > 0) {
+            const selectionQuery = `${queryPrefix} AND ${selectionPredicate}`;
+            const selectionRes: TrackingIdQueryResult[] = await vg.coordinator().query(selectionQuery, { 'type': 'json' });
+            selectedTrackingIds.value = selectionRes.map((entry: TrackingIdQueryResult) => entry.id);
+        } else {
+            selectedTrackingIds.value = null;
         }
-        return (
-            aggregateValue <= selection.range[1] &&
-            aggregateValue >= selection.range[0]
-        );
+
+
+        const filterPredicate = newDataFilters.map(filter => getPredicate(filter)).join(' AND ');
+
+        if (filterPredicate.length > 0) {
+            const filterQuery = `${queryPrefix} AND ${filterPredicate}`;
+            const filterRes: TrackingIdQueryResult[] = await vg.coordinator().query(filterQuery, { 'type': 'json' });
+            unfilteredTrackingIds.value = filterRes.map((entry: TrackingIdQueryResult) => entry.id);
+        } else {
+            unfilteredTrackingIds.value = null;
+        }
+
+
+    }, { deep: true })
+
+
+
+    // Private
+    function _resetSelection(index: number) {
+        dataSelections.value[index].range = [
+            ...dataSelections.value[index].maxRange,
+        ];
     }
-    return true;
-}
 
-export const useSelectionStore = defineStore('Selection', {
-    state: () => ({
-        dataSelections: [] as DataSelection[],
-        dataFilters: [] as DataSelection[],
-    }),
-    getters: {
-        modifiedSelections: (state) => {
-            return state.dataSelections.filter(
-                (s) =>
-                    s.range[0] !== s.maxRange[0] || s.range[1] !== s.maxRange[1]
-            );
-        },
-        selectedTrackingIds: (state) => {
-            const cellMetaData = useCellMetaData();
-            const selectedTrackIds: string[] = [];
-            cellMetaData.trackArray?.forEach((track) => {
-                let selected = true;
-                state.dataSelections.forEach((selection) => {
-                    selected = selected && checkSelection(selection, track);
-                });
-                if (selected) {
-                    selectedTrackIds.push(track.trackId);
-                }
-            });
-            return state.dataSelections.length === 0 ? null : selectedTrackIds;
-        },
-        unfilteredTrackingIds: (state) => {
-            const cellMetaData = useCellMetaData();
-            const unfilteredTrackIds: string[] = [];
-            cellMetaData.trackArray?.forEach((track) => {
-                let unfiltered = true;
-                state.dataFilters.forEach((filter) => {
-                    unfiltered = unfiltered && checkSelection(filter, track);
-                });
-                if (unfiltered) {
-                    unfilteredTrackIds.push(track.trackId);
-                }
-            });
-            return state.dataFilters.length === 0 ? null : unfilteredTrackIds;
-        },
-    },
-    actions: {
-        addSelection(selection: DataSelection) {
-            const existingIndex = this.dataSelections.findIndex(
-                (s) => s.plotName === selection.plotName
-            );
-            if (existingIndex !== -1) {
-                this.dataSelections[existingIndex] = selection;
-            } else {
-                this.dataSelections.push(selection);
+    // Private
+    async function _getMaxRange(plotName: string): Promise<[number, number]> {
+        const selection = getSelection(plotName);
+        if (!selection) {
+            throw new Error(`Selection "${plotName}" does not exist.`);
+        }
+        const { currentExperimentMetadata } = useDatasetSelectionStore();
+
+        try {
+            // Loading
+            let minVal = -Infinity;
+            let maxVal = Infinity;
+
+            if (!plotName || plotName.trim() === '') {
+                throw new Error('Invalid or empty plot name');
             }
-        },
-        clearAllSelections() {
-            this.dataSelections = [];
-        },
-        resetSelection(index: number) {
-            this.dataSelections[index].range = [
-                ...this.dataSelections[index].maxRange,
-            ];
-        },
-        updateSelection(
-            plotName: string,
-            range: [number, number],
-            type?: DataSelection['type']
-        ) {
-            const existingIndex = this.dataSelections.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (existingIndex !== -1) {
-                this.dataSelections[existingIndex].range = range;
+
+            // Escape the column name to handle spaces and special characters
+            const escapedPlotName = `${plotName.replace(/"/g, '""')}`;
+
+            let query = '';
+            if (selection.type === 'cell') {
+                query = `
+            SELECT
+                MIN("${escapedPlotName}") AS min_value,
+                MAX("${escapedPlotName}") AS max_value
+            FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata
+        `;
+            } else if (selection.type === 'track') {
+                query = `
+            SELECT
+                MIN("${escapedPlotName}") AS min_value,
+                MAX("${escapedPlotName}") AS max_value
+            FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata_aggregate
+        `;
             } else {
-                this.addSelection({
-                    plotName,
-                    range,
-                    type: type ?? 'cell', // Default value
-                    maxRange: [...range], // Using the provided range as maxRange
-                    displayChart: true, // Default value
-                });
-            }
-        },
-        removeFilterByPlotName(plotName: string) {
-            const index = this.dataFilters.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (index === -1) return;
-            // window.dispatchEvent(
-            //     new CustomEvent('filterRemoved', { detail: plotName })
-            // );
-            this.removeFilter(index);
-        },
-        removeSelectionByPlotName(plotName: string) {
-            const index = this.dataSelections.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (index !== -1) {
-                this.dataSelections.splice(index, 1);
-            }
-        },
-        removePlotWithErrors(plotName: string) {
-            const index = this.dataSelections.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (index === -1) return;
-            this.dataSelections.splice(index, 1);
-        },
-        resetSelectionByPlotName(plotName: string) {
-            const index = this.dataSelections.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (index === -1) return;
-            // window.dispatchEvent(
-            //     new CustomEvent('selectionRemoved', { detail: plotName })
-            // );
-            this.resetSelection(index);
-        },
-        getSelection(name: string): DataSelection | null {
-            const s = this.dataSelections.find(
-                (s: DataSelection) => s.plotName === name
-            );
-            if (typeof s === 'undefined') return null;
-            return s;
-        },
-        addPlot(name: string, type: DataSelection['type']) {
-            const existingIndex = this.dataSelections.findIndex(
-                (s) => s.plotName === name
-            );
-            if (existingIndex !== -1) {
-                const existingPlot = this.dataSelections[existingIndex];
-                if (existingPlot.type !== type) {
-                    console.warn(
-                        `Changing type of plot "${name}" from "${existingPlot.type}" to "${type}"`
-                    );
-                    existingPlot.type = type;
-                    this.setMaxRange(name);
-                }
-                return;
+                throw new Error(
+                    `Unknown type "${selection.type}" for plot "${plotName}"`
+                );
             }
-            const selection: DataSelection = {
-                plotName: name,
-                range: [-Infinity, Infinity],
-                maxRange: [-Infinity, Infinity],
-                type: type,
-                displayChart: true,
-            };
-            this.dataSelections.push(selection);
-            this.setMaxRange(name);
-        },
-        async getMaxRange(plotName: string): Promise<[number, number]> {
-            const selection = this.getSelection(plotName);
-            if (!selection) {
-                throw new Error(`Selection "${plotName}" does not exist.`);
+
+            const result = await vg.coordinator().query(query);
+
+            if (
+                !result ||
+                !result.batches ||
+                result.batches.length === 0 ||
+                result.batches[0].numRows === 0
+            ) {
+                throw new Error('No data returned from query');
             }
-            const { currentExperimentMetadata } = useDatasetSelectionStore();
-
-            try {
-                // Loading
-                let minVal = -Infinity;
-                let maxVal = Infinity;
-
-                if (!plotName || plotName.trim() === '') {
-                    throw new Error('Invalid or empty plot name');
-                }
-
-                // Escape the column name to handle spaces and special characters
-                const escapedPlotName = `${plotName.replace(/"/g, '""')}`;
-
-                let query = '';
-                if (selection.type === 'cell') {
-                    query = `
-                SELECT
-                    MIN("${escapedPlotName}") AS min_value,
-                    MAX("${escapedPlotName}") AS max_value
-                FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata
-            `;
-                } else if (selection.type === 'track') {
-                    query = `
-                SELECT
-                    MIN("${escapedPlotName}") AS min_value,
-                    MAX("${escapedPlotName}") AS max_value
-                FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata_aggregate
-            `;
-                } else {
-                    throw new Error(
-                        `Unknown type "${selection.type}" for plot "${plotName}"`
-                    );
-                }
-
-                const result = await vg.coordinator().query(query);
-
-                if (
-                    !result ||
-                    !result.batches ||
-                    result.batches.length === 0 ||
-                    result.batches[0].numRows === 0
-                ) {
-                    throw new Error('No data returned from query');
-                }
-
-                minVal = Number(result.batches[0].get(0).min_value);
-                maxVal = Number(result.batches[0].get(0).max_value);
-
-                if (isNaN(minVal) || isNaN(maxVal)) {
-                    emitter.emit('plot-error', plotName);
-                    //throw new Error('NaN values detected in the data');
-                }
-
-                return [minVal, maxVal];
-            } catch (error) {
-                console.error('Error fetching data range:', error);
-                // TODO: can't emit from store
+
+            minVal = Number(result.batches[0].get(0).min_value);
+            maxVal = Number(result.batches[0].get(0).max_value);
+
+            if (isNaN(minVal) || isNaN(maxVal)) {
                 emitter.emit('plot-error', plotName);
-                //throw error;
-                return [0, 0];
-            }
-        },
-        async setMaxRange(plotName: string) {
-            const selection = this.getSelection(plotName);
-            if (selection === null) {
-                throw Error(`Selection ${plotName} does not exist`);
-            }
-            const [minVal, maxVal] = await this.getMaxRange(plotName);
-            selection.range = [minVal, maxVal];
-            selection.maxRange = [minVal, maxVal];
-        },
-        addFilter(filter: DataSelection) {
-            const existingIndex = this.dataFilters.findIndex(
-                (s) => s.plotName === filter.plotName
-            );
-            if (existingIndex !== -1) {
-                this.dataFilters[existingIndex] = filter;
-            } else {
-                this.dataFilters.push(filter);
+                //throw new Error('NaN values detected in the data');
             }
-        },
-        removeFilter(index: number) {
-            this.dataFilters.splice(index, 1);
-        },
-        updateFilter(
-            plotName: string,
-            range: [number, number],
-            type?: DataSelection['type']
-        ) {
-            const existingIndex = this.dataFilters.findIndex(
-                (s) => s.plotName === plotName
-            );
-            if (existingIndex !== -1) {
-                this.dataFilters[existingIndex].range = range;
-            } else {
-                this.addFilter({
-                    plotName,
-                    range,
-                    type: type ?? 'cell',
-                    maxRange: [0, 1000],
-                    displayChart: true,
-                });
+
+            return [minVal, maxVal];
+        } catch (error) {
+            console.error('Error fetching data range:', error);
+            // TODO: can't emit from store
+            emitter.emit('plot-error', plotName);
+            //throw error;
+            return [0, 0];
+        }
+    }
+
+    // Private
+    async function _setMaxRange(plotName: string) {
+        const selection = getSelection(plotName);
+        if (selection === null) {
+            throw Error(`Selection ${plotName} does not exist`);
+        }
+        const [minVal, maxVal] = await _getMaxRange(plotName);
+        selection.range = [minVal, maxVal];
+        selection.maxRange = [minVal, maxVal];
+    }
+
+    function addSelection(selection: DataSelection) {
+        const existingIndex = dataSelections.value.findIndex(
+            (s) => s.plotName === selection.plotName
+        );
+        if (existingIndex !== -1) {
+            dataSelections.value[existingIndex] = selection;
+        } else {
+            dataSelections.value.push(selection);
+        }
+    }
+
+    function clearAllSelections() {
+        dataSelections.value = [];
+    }
+
+    function updateSelection(
+        plotName: string,
+        range: [number, number],
+        type?: DataSelection['type']
+    ) {
+        const existingIndex = dataSelections.value.findIndex(
+            (s) => s.plotName === plotName
+        );
+        if (existingIndex !== -1) {
+            dataSelections.value[existingIndex].range = range;
+        } else {
+            addSelection({
+                plotName,
+                range,
+                type: type ?? 'cell', // Default value
+                maxRange: [...range], // Using the provided range as maxRange
+                displayChart: true, // Default value
+            });
+        }
+    }
+
+    function removeFilterByPlotName(plotName: string) {
+        const index = dataFilters.value.findIndex(
+            (s) => s.plotName === plotName
+        );
+        if (index === -1) return;
+
+        removeFilter(index);
+    }
+
+    function removeSelectionByPlotName(plotName: string) {
+        const index = dataSelections.value.findIndex(
+            (s) => s.plotName === plotName
+        );
+        if (index !== -1) {
+            dataSelections.value.splice(index, 1);
+        }
+    }
+
+    function removePlotWithErrors(plotName: string) {
+        const index = dataSelections.value.findIndex(
+            (s) => s.plotName === plotName
+        );
+        if (index === -1) return;
+        dataSelections.value.splice(index, 1);
+    }
+
+    function resetSelectionByPlotName(plotName: string) {
+        const index = dataSelections.value.findIndex(
+            (s) => s.plotName === plotName
+        );
+        if (index === -1) return;
+        // window.dispatchEvent(
+        //     new CustomEvent('selectionRemoved', { detail: plotName })
+        // );
+        _resetSelection(index);
+    }
+
+    function getSelection(name: string): DataSelection | null {
+        const s = dataSelections.value.find(
+            (s: DataSelection) => s.plotName === name
+        );
+        if (typeof s === 'undefined') return null;
+        return s;
+    }
+
+    function addPlot(name: string, type: DataSelection['type']) {
+        const existingIndex = dataSelections.value.findIndex(
+            (s) => s.plotName === name
+        );
+        if (existingIndex !== -1) {
+            const existingPlot = dataSelections.value[existingIndex];
+            if (existingPlot.type !== type) {
+                console.warn(
+                    `Changing type of plot "${name}" from "${existingPlot.type}" to "${type}"`
+                );
+                existingPlot.type = type;
+                _setMaxRange(name);
             }
-        },
-        clearAllFilters() {
-            this.dataFilters = [];
-        },
-    },
-});
+            return;
+        }
+        const selection: DataSelection = {
+            plotName: name,
+            range: [-Infinity, Infinity],
+            maxRange: [-Infinity, Infinity],
+            type: type,
+            displayChart: true,
+        };
+        dataSelections.value.push(selection);
+        _setMaxRange(name);
+    }
+
+
+    function addFilter(filter: DataSelection) {
+        const existingIndex = dataFilters.value.findIndex(
+            (s) => s.plotName === filter.plotName
+        );
+        if (existingIndex !== -1) {
+            dataFilters.value[existingIndex] = filter;
+        } else {
+            dataFilters.value.push(filter);
+        }
+    }
+
+    function removeFilter(index: number) {
+        dataFilters.value.splice(index, 1);
+    }
+
+    function updateFilter(
+        plotName: string,
+        range: [number, number],
+        type?: DataSelection['type']
+    ) {
+        const existingIndex = dataFilters.value.findIndex(
+            (s) => s.plotName === plotName
+        );
+        if (existingIndex !== -1) {
+            dataFilters.value[existingIndex].range = range;
+        } else {
+            addFilter({
+                plotName,
+                range,
+                type: type ?? 'cell',
+                maxRange: [0, 1000],
+                displayChart: true,
+            });
+        }
+    }
+
+    function clearAllFilters() {
+        dataFilters.value = [];
+    }
+
+    return {
+        dataSelections,
+        dataFilters,
+        modifiedSelections,
+        selectedTrackingIds,
+        unfilteredTrackingIds,
+        clearAllSelections,
+        updateSelection,
+        updateFilter,
+        clearAllFilters,
+        removeSelectionByPlotName,
+        removeFilterByPlotName,
+        removePlotWithErrors,
+        resetSelectionByPlotName,
+        addPlot,
+        getSelection,
+        addFilter,
+        removeFilter
+    }
+
+
+})
+
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
index 1743d788..bead0366 100644
--- a/apps/client/src/util/datasetLoader.ts
+++ b/apps/client/src/util/datasetLoader.ts
@@ -112,13 +112,21 @@ export async function createAggregateTable(tableName: string, headers: string[],
         })
 
         try {
+            try {
+                await vg.coordinator().exec([`
+                    DROP TABLE IF EXISTS ${tableName}_aggregate;
+                `])
+            } catch (error) {
+                console.error(error);
+            }
             await vg.coordinator().exec([`
                 CREATE TEMP TABLE IF NOT EXISTS ${tableName}_aggregate AS
                     SELECT 
                         ${selectString}
-                        "${id}" as tracking_id
+                        "${id}" as tracking_id,
+                        location
                     FROM ${tableName}
-                    GROUP BY "${id}"
+                    GROUP BY "${id}", location
             `]);
         } catch (error) {
             console.error(error);

From fa3b99fd83a3d0c7eb7035dab5d068055eab33d3 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Sun, 24 Nov 2024 14:19:00 -0700
Subject: [PATCH 60/64] Finished selection and filtering linking. Moved
 attribute plots into separate component folder. Added a "relative chart" view
 with toggle button.

---
 .../src/components/AggregateLineChart.vue     |  27 +-
 apps/client/src/components/ImageViewer.vue    |  28 +-
 .../conditionSelector/ConditionChart.vue      |   7 +-
 .../conditionSelector/ConditionSelector.vue   |  10 +-
 .../components/exemplarView/ExemplarView.vue  |   2 -
 .../globalSettings/DatasetSelector.vue        |   6 +-
 .../globalSettings/UnivariateCellPlot.vue     | 236 -------
 .../FilterEditMenu.vue                        |   7 -
 .../FilterSelector.vue                        |  21 +-
 .../PlotSelector.vue                          |  86 +--
 .../plotSelector/UnivariateCellPlot.vue       | 285 ++++++++
 apps/client/src/main.ts                       |   2 +-
 .../aggregateLineChartStore.ts                |  56 +-
 .../stores/dataStores/mosaicSelectionStore.ts | 628 +++++++++++++-----
 .../interactionStores/selectionStore.ts       | 255 +++----
 apps/client/src/util/predicateGenerator.ts    | 185 ++++++
 16 files changed, 1187 insertions(+), 654 deletions(-)
 delete mode 100644 apps/client/src/components/globalSettings/UnivariateCellPlot.vue
 rename apps/client/src/components/{globalSettings => plotSelector}/FilterEditMenu.vue (97%)
 rename apps/client/src/components/{globalSettings => plotSelector}/FilterSelector.vue (93%)
 rename apps/client/src/components/{globalSettings => plotSelector}/PlotSelector.vue (83%)
 create mode 100644 apps/client/src/components/plotSelector/UnivariateCellPlot.vue
 create mode 100644 apps/client/src/util/predicateGenerator.ts

diff --git a/apps/client/src/components/AggregateLineChart.vue b/apps/client/src/components/AggregateLineChart.vue
index 11c1915a..3f715e76 100644
--- a/apps/client/src/components/AggregateLineChart.vue
+++ b/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} ${aggLine.selected ? 'highlighted' : ''} ${aggLine.filtered ? 'filtered' : ''}`"
+                        :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
diff --git a/apps/client/src/components/ImageViewer.vue b/apps/client/src/components/ImageViewer.vue
index 187a5fb2..62693f32 100644
--- a/apps/client/src/components/ImageViewer.vue
+++ b/apps/client/src/components/ImageViewer.vue
@@ -42,8 +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 { useSelectionStore } from '@/stores/interactionStores/selectionStore';
-import { select } from 'd3-selection';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
@@ -59,8 +58,8 @@ const { currentLocationMetadata } = storeToRefs(datasetSelectionStore);
 const { contrastLimitSlider } = storeToRefs(imageViewerStoreUntrracked);
 const eventBusStore = useEventBusStore();
 const looneageViewStore = useLooneageViewStore();
-const selectionStore = useSelectionStore();
-const { selectedTrackingIds, unfilteredTrackingIds } = storeToRefs(selectionStore);
+const mosaicSelectionStore = useMosaicSelectionStore();
+const { highlightedCellIds, unfilteredTrackIds} = storeToRefs(mosaicSelectionStore);
 
 const deckGlContainer = ref(null);
 const { width: containerWidth, height: containerHeight } =
@@ -72,9 +71,19 @@ const contrastLimit = computed<[number, number][]>(() => {
 });
 
 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: selectedTrackingIds.value ? selectedTrackingIds.value.includes(trackId) : false,
-        filtered: unfilteredTrackingIds.value ? !(unfilteredTrackingIds.value.includes(trackId)) : false
+        selected,
+        filtered: unfilteredTrackIds.value ? !(unfilteredTrackIds.value.includes(trackId)) : false
     }
 }
 
@@ -261,7 +270,6 @@ function createSegmentationsLayer(): typeof GeoJsonLayer {
                 return colors.hovered.rgb;
             }
 
-
             const {selected,filtered} = _determineSelectedOrFiltered(info.properties?.id?.toString())
             if(filtered){
                 return [0,0,0];
@@ -482,7 +490,7 @@ function createCenterPointLayer(): ScatterplotLayer {
                 return globalSettings.normalizedSelectedRgb;
             }
 
-            const { filtered } = _determineSelectedOrFiltered(d.trackId)
+            const { filtered } = _determineSelectedOrFiltered(d.trackId);
 
             if(filtered){
                 return[0,0,0,0];
@@ -687,8 +695,8 @@ watch(currentTrackArray, renderDeckGL);
 watch(dataPointSelection.$state, renderDeckGL);
 watch(imageViewerStore.$state, renderDeckGL);
 watch(contrastLimitSlider, renderDeckGL);
-watch(selectedTrackingIds, renderDeckGL);
-watch(unfilteredTrackingIds, renderDeckGL);
+watch(highlightedCellIds, renderDeckGL);
+watch(unfilteredTrackIds, renderDeckGL);
 
 
 function clearSelection() {
diff --git a/apps/client/src/components/conditionSelector/ConditionChart.vue b/apps/client/src/components/conditionSelector/ConditionChart.vue
index 13859f55..7ba25dd4 100644
--- a/apps/client/src/components/conditionSelector/ConditionChart.vue
+++ b/apps/client/src/components/conditionSelector/ConditionChart.vue
@@ -27,7 +27,7 @@ const datasetSelectionStore = useDatasetSelectionStore();
 const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
-const { conditionChartSelections, $yAxisParam } = useMosaicSelectionStore();
+const { conditionChartSelections, $conditionChartYAxisDomain } = useMosaicSelectionStore();
 const { chartColorScheme } = useConditionSelectorStore();
 
 // Container for chart.
@@ -132,8 +132,9 @@ function createChart(xAxisName: string, yAxisName: string) {
             // Gets rid of axes and margins
             vg.axis(false),
             // Below would allow us to adjust the yAxis based on all the charts
-            // vg.yDomain($yAxisParam),
-            vg.margin(0)
+            vg.yDomain($conditionChartYAxisDomain),
+            vg.margin(0),
+            // vg.margin(40)
         );
         return chart;
     }
diff --git a/apps/client/src/components/conditionSelector/ConditionSelector.vue b/apps/client/src/components/conditionSelector/ConditionSelector.vue
index 42060d9e..a856b2ea 100644
--- a/apps/client/src/components/conditionSelector/ConditionSelector.vue
+++ b/apps/client/src/components/conditionSelector/ConditionSelector.vue
@@ -215,7 +215,15 @@ const chartLineWidth = computed(() => {
                     </template>
                 </div>
             </div>
-            <div class="items-center justify-center flex">Legend</div>
+            <div class="items-start justify-center flex">
+                <svg width="50" style="position:relative; overflow:visible;" height="50" xmlns="http://www.w3.org/2000/svg">
+                    <line x1="0" y1="20" x2="15" y2="20" stroke="black" stroke-width="3" />
+                    <text x="20" y="23" font-family="Arial" font-size="10" fill="black">Selected</text>
+                    <line x1="0" y1="35" x2="15" y2="35" stroke="black" stroke-width="2" />
+                    <text x="20" y="42" font-family="Arial" font-size="10" fill="black">Unselected</text>
+                    <rect fill="#cccccc" x="0" width="15" y="36" height="8"/>
+                </svg>
+            </div>
             <div class="items-center justify-center flex x-tag">
                 <ConditionSelectorDropDown axis="x-axis" />
             </div>
diff --git a/apps/client/src/components/exemplarView/ExemplarView.vue b/apps/client/src/components/exemplarView/ExemplarView.vue
index c2cdceed..102c86ab 100644
--- a/apps/client/src/components/exemplarView/ExemplarView.vue
+++ b/apps/client/src/components/exemplarView/ExemplarView.vue
@@ -21,7 +21,6 @@ const { chartColorScheme } = useConditionSelectorStore();
 const selectionStore = useSelectionStore();
 
 const mosaicSelectionStore = useMosaicSelectionStore();
-const { $yAxisParam } = storeToRefs(mosaicSelectionStore);
 
 const { dataSelections } = storeToRefs(selectionStore);
 
@@ -43,7 +42,6 @@ const handleOnClick = () => {
     // selectionStore.updateSelection(plotName, [0,500], "track");
     
     // console.log(dataSelections.value);
-    mosaicSelectionStore.$yAxisParam.update([0,1000])
 }
 
 
diff --git a/apps/client/src/components/globalSettings/DatasetSelector.vue b/apps/client/src/components/globalSettings/DatasetSelector.vue
index 05575816..b2f9811c 100644
--- a/apps/client/src/components/globalSettings/DatasetSelector.vue
+++ b/apps/client/src/components/globalSettings/DatasetSelector.vue
@@ -6,6 +6,7 @@ import { useDatasetSelectionTrrackedStore } from '@/stores/dataStores/datasetSel
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 
 import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 
 const globalSettings = useGlobalSettings();
 const datasetSelectionStore = useDatasetSelectionStore();
@@ -13,6 +14,7 @@ const datasetSelectionTrrackedStore = useDatasetSelectionTrrackedStore();
 const $q = useQuasar();
 
 const selectionStore = useSelectionStore();
+const mosaicSelectionStore = useMosaicSelectionStore();
 
 watch(
     () => datasetSelectionStore.fetchingTabularData,
@@ -45,8 +47,8 @@ const shortExpName = computed<string>(() => {
 });
 
 function onSelectExperiment() {
-    selectionStore.clearAllSelections();
-    selectionStore.clearAllFilters();
+    selectionStore.resetState();
+    mosaicSelectionStore.resetState();
 }
 </script>
 
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
deleted file mode 100644
index 2aeb7ba0..00000000
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch, onMounted, computed } from 'vue';
-import type { PropType } from 'vue';
-import * as vg from '@uwdata/vgplot';
-import {
-    useSelectionStore,
-    type DataSelection,
-} from '@/stores/interactionStores/selectionStore';
-import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import { storeToRefs } from 'pinia';
-import FilterEditMenu from './FilterEditMenu.vue';
-import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
-import { QItemSection } from 'quasar';
-import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
-
-// Initialise Data
-const datasetSelectionStore = useDatasetSelectionStore();
-const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
-    datasetSelectionStore
-);
-
-const globalSettings = useGlobalSettings();
-const selectionStore = useSelectionStore();
-const { cellLevelSelection, trackLevelSelection } = useMosaicSelectionStore();
-// Define Plot Emits and Props
-const emit = defineEmits(['selectionChange', 'plot-loaded', 'plot-error']);
-const props = defineProps({
-    plotName: {
-        type: String as PropType<string>,
-        required: true,
-    },
-    attributeType: {
-        type: String,
-        required: true,
-        validator: (value: string) => ['track', 'cell'].includes(value),
-    },
-});
-
-const plotContainer = ref<HTMLDivElement | null>(null);
-const charts = ref<null | HTMLElement>(null);
-let observer: MutationObserver | null = null;
-const loaded = ref(false);
-
-const isLoading = ref<boolean>(true);
-
-// Creates charts when data initialized.
-watch(
-    [experimentDataInitialized, plotContainer],
-    ([isInitialized, newPlotContainer]) => {
-        if (isInitialized && newPlotContainer) {
-            // Determine which selection to use
-            const mosaicSelection =
-                props.attributeType === 'cell'
-                    ? cellLevelSelection
-                    : trackLevelSelection;
-            // Determine which dataset to use
-            let dataSetName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`;
-            if (props.attributeType === 'track') {
-                dataSetName = `${dataSetName}_aggregate`;
-            }
-
-            // Create the plot
-            charts.value = makePlot(
-                props.plotName,
-                mosaicSelection,
-                dataSetName
-            );
-            if (charts.value) {
-                plotContainer.value?.appendChild(charts.value);
-                observer = new MutationObserver((mutationsList) => {
-                    for (const mutation of mutationsList) {
-                        if (
-                            mutation.type === 'childList' &&
-                            mutation.addedNodes.length > 0
-                        ) {
-                            loaded.value = true;
-                            isLoading.value = false;
-                            observer?.disconnect();
-                            break;
-                        }
-                    }
-                });
-
-                // Observe the SVG for changes to its child elements
-                observer.observe(charts.value, {
-                    childList: true,
-                    subtree: true,
-                });
-            }
-        }
-    },
-    { immediate: true }
-);
-
-// Vg Plot
-function makePlot(column: string, mosaicSelection: any, datasetName: string) {
-    try {
-        return vg.plot(
-            // Background grey data
-            vg.rectY(vg.from(datasetName), {
-                x: vg.bin(column),
-                y: vg.count(),
-                fill: '#cccccc',
-                inset: 1,
-            }),
-            // Currently Selected Data
-            vg.rectY(vg.from(datasetName, { filterBy: mosaicSelection }), {
-                x: vg.bin(column),
-                y: vg.count(),
-                fill: '#377eb8',
-                opacity: 1,
-                inset: 1,
-            }),
-
-            vg.marginBottom(45),
-            vg.marginTop(5),
-            vg.marginLeft(20),
-            vg.marginRight(20),
-            vg.width(268),
-            vg.height(85),
-            vg.style({ 'font-size': '.85em' }),
-            vg.xDomain(vg.Fixed),
-            vg.xLabelAnchor('center'),
-            vg.xTickPadding(8),
-            vg.xLabelOffset(38),
-            vg.xInsetLeft(0),
-            vg.xInsetRight(0),
-            vg.xTickSpacing(100),
-            vg.yAxis(null),
-            vg.xLine(false),
-            vg.xNice(false)
-        );
-    } catch (error) {
-        emit('plot-error', props.plotName);
-    }
-}
-
-// Checks when everything has loaded
-watch(loaded, () => {
-    handlePlotLoading();
-});
-
-// Waits for data range to load, then waits a bit, then notifies plotselector to show everything.
-async function handlePlotLoading() {
-    try {
-        // Wait for 0.5 seconds before emitting the plot-loaded event
-        await new Promise((resolve) => setTimeout(resolve, 500));
-        emit('plot-loaded');
-    } catch (error) {
-        console.error('Error in handlePlotLoading:', error);
-        emit('plot-error', props.plotName);
-    }
-}
-
-const selection = computed<DataSelection>(() => {
-    const s = selectionStore.getSelection(props.plotName);
-    if (!s) {
-        return {
-            plotName: 'not found',
-            type: props.attributeType.toLowerCase() as DataSelection['type'],
-            range: [0, 0],
-            maxRange: [0, 0],
-            displayChart: true,
-        };
-    }
-    return s;
-});
-
-const rangeModel = computed({
-    get() {
-        return { min: selection.value.range[0], max: selection.value.range[1] };
-    },
-
-    set(newValue) {
-        selection.value.range[0] = newValue.min;
-        selection.value.range[1] = newValue.max;
-    },
-});
-
-function handleRangeUpdate(newRange: { min: number; max: number }) {
-    rangeModel.value = newRange;
-}
-</script>
-
-<template>
-    <div>
-        <q-item-section style="position: relative">
-            <div ref="plotContainer" style="position: relative">
-                <FilterEditMenu
-                    :plot-name="props.plotName"
-                    :initial-min="rangeModel.min"
-                    :initial-max="rangeModel.max"
-                    filterType="selection"
-                    :attributeType="props.attributeType"
-                    @update:range="handleRangeUpdate"
-                />
-                <!-- Uses same width and height as single chart to replace the chart. -->
-                <div
-                    v-if="isLoading"
-                    style="width: 268px; height: 85px; gap: 10px"
-                    class="flex justify-center align-center"
-                >
-                    <q-spinner />
-                    <div class="text-caption">Loading chart</div>
-                </div>
-                <div v-if="!isLoading" class="q-range-container">
-                    <q-range
-                        v-model="rangeModel"
-                        :min="selection.maxRange[0]"
-                        :max="selection.maxRange[1]"
-                        :step="0.001"
-                        :left-label-value="rangeModel.min.toFixed(2)"
-                        :right-label-value="rangeModel.max.toFixed(2)"
-                        label
-                        thumb-size="14px"
-                        track-size="2px"
-                        switch-label-side
-                        selection-color="#377eb8"
-                        track-color="hidden"
-                        :dark="globalSettings.darkMode"
-                    />
-                </div>
-            </div>
-        </q-item-section>
-    </div>
-</template>
-
-<style scoped>
-.q-range-container {
-    padding: 0 20px;
-    position: absolute;
-    bottom: 20px;
-    left: 0;
-    right: 0;
-}
-</style>
diff --git a/apps/client/src/components/globalSettings/FilterEditMenu.vue b/apps/client/src/components/plotSelector/FilterEditMenu.vue
similarity index 97%
rename from apps/client/src/components/globalSettings/FilterEditMenu.vue
rename to apps/client/src/components/plotSelector/FilterEditMenu.vue
index 2f949067..eafab240 100644
--- a/apps/client/src/components/globalSettings/FilterEditMenu.vue
+++ b/apps/client/src/components/plotSelector/FilterEditMenu.vue
@@ -70,17 +70,10 @@ function onSubmit() {
 
     if (props.filterType === 'selection') {
         selectionStore.updateSelection(props.plotName, newRange);
-        //useMosaicSelectionStore.updateMosaicSelection();
     } else if (props.filterType === 'filter') {
         selectionStore.updateFilter(props.plotName, newRange);
     }
 
-    // mosaicSelectionStore.updateMosaicSelection(
-    //     props.plotName,
-    //     newRange,
-    //     'cell'
-    // );
-
     emit('update:range', { min: newRange[0], max: newRange[1] });
     showRangeDialog.value = false;
 }
diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/plotSelector/FilterSelector.vue
similarity index 93%
rename from apps/client/src/components/globalSettings/FilterSelector.vue
rename to apps/client/src/components/plotSelector/FilterSelector.vue
index 0968ad03..1fca2640 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/plotSelector/FilterSelector.vue
@@ -8,26 +8,19 @@ import FilterEditMenu from './FilterEditMenu.vue';
 
 const globalSettings = useGlobalSettings();
 const selectionStore = useSelectionStore();
-const { dataFilters } = storeToRefs(selectionStore);
+const { dataFilters, dataSelections } = storeToRefs(selectionStore);
 
-const selectionsCount = computed(
-    () => selectionStore.modifiedSelections.length
-);
+const selectionsCount = computed(() => dataSelections.value.length);
 const filtersCount = computed(() => dataFilters.value.length);
 
 function removeFilter(index: number) {
     selectionStore.removeFilter(index);
 }
 function removeSelection(plotName: string) {
-    selectionStore.resetSelectionByPlotName(plotName);
+    selectionStore.removeSelectionByPlotName(plotName);
 }
-function addFilter() {
-    for (const selection of selectionStore.modifiedSelections) {
-        selectionStore.addFilter({
-            ...selection,
-            range: [...selection.range],
-        });
-    }
+function convertToFilters() {
+    selectionStore.convertToFilters();    
 }
 
 const cellAttributesOpen = ref(true);
@@ -59,7 +52,7 @@ const mutedTextClass = computed(() =>
                 <q-item
                     v-for="(
                         selection, index
-                    ) in selectionStore.modifiedSelections"
+                    ) in selectionStore.dataSelections"
                     :key="index"
                 >
                     <FilterEditMenu
@@ -120,7 +113,7 @@ const mutedTextClass = computed(() =>
             no-caps
             class="filter-style w-100"
             dense
-            @click="addFilter"
+            @click="convertToFilters"
         />
         <q-separator />
         <q-expansion-item>
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/plotSelector/PlotSelector.vue
similarity index 83%
rename from apps/client/src/components/globalSettings/PlotSelector.vue
rename to apps/client/src/components/plotSelector/PlotSelector.vue
index 58d4487f..f1345c0c 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/plotSelector/PlotSelector.vue
@@ -8,6 +8,7 @@ import LBtn from '../custom/LBtn.vue';
 import {
     useSelectionStore,
     emitter,
+    type AttributeChart
 } from '@/stores/interactionStores/selectionStore';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useNotificationStore } from '@/stores/misc/notificationStore';
@@ -19,7 +20,7 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
 const selectionStore = useSelectionStore();
-const { dataSelections } = storeToRefs(selectionStore);
+const { dataSelections, attributeCharts, showRelativeCell, showRelativeTrack } = storeToRefs(selectionStore);
 
 // Are these plots track or cell level?
 const props = defineProps({
@@ -36,12 +37,6 @@ const selectedTrackAttribute = ref('');
 const selectedAggregation = ref('');
 const errorPlotName = ref('');
 
-// Plots Displayed
-const displayedPlots = computed(() => {
-    return dataSelections.value.filter(
-        (d) => d.displayChart && d.type === props.selectorType
-    );
-});
 
 const aggregationOptions = [
     { label: 'Sum', value: 'SUM' },
@@ -66,32 +61,6 @@ const allAttributeNames = computed(() => {
     }
 });
 
-// Finds the first attribute name if data is loaded.
-const firstAttributeName = computed(() => {
-    if (
-        experimentDataInitialized.value &&
-        currentExperimentMetadata.value &&
-        currentExperimentMetadata.value.headers &&
-        currentExperimentMetadata.value.headers.length > 0
-    ) {
-        // does headerTransforms['mass'] exist
-        const headerTransforms =
-            currentExperimentMetadata.value.headerTransforms;
-        if (
-            headerTransforms &&
-            headerTransforms['mass'] &&
-            headerTransforms['mass'] !== ''
-        ) {
-            return headerTransforms['mass'];
-        } else {
-            // otherwise return first header from headers
-            return currentExperimentMetadata.value.headers[0];
-        }
-    } else {
-        return '';
-    }
-});
-
 // If there is a plot loading here, a dialog is displayed.
 function handlePlotError(plotName: string) {
     errorPlotName.value = plotName;
@@ -105,26 +74,6 @@ function handlePlotError(plotName: string) {
     selectionStore.removePlotWithErrors(plotName);
 }
 
-// Adds a plot initially when first loading.
-onMounted(() => {
-    emitter.on('plot-error', handlePlotError);
-    watch(
-        experimentDataInitialized,
-        (isInitialized) => {
-            if (isInitialized && firstAttributeName.value) {
-                selectionStore.addPlot(firstAttributeName.value, 'cell');
-
-                // For testing track attributes
-                selectionStore.addPlot(
-                    `AVG ${firstAttributeName.value}`,
-                    'track'
-                );
-            }
-        },
-        { immediate: true }
-    );
-});
-
 function onMenuButtonClick() {
     if (props.selectorType === 'cell') {
         cellPlotDialogOpen.value = !cellPlotDialogOpen.value;
@@ -141,6 +90,13 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
     trackPlotDialogOpen.value = false;
     selectionStore.addPlot(`${agg} ${atr}`, 'track');
 }
+
+
+
+function onToggleRelativeChart(){
+    props.selectorType === 'cell' ? showRelativeCell.value = !showRelativeCell.value : showRelativeTrack.value = !showRelativeTrack.value
+}
+
 </script>
 <template>
     <div>
@@ -149,7 +105,20 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
         </div>
         <div v-else>
             <!-- Menu Icon -->
-            <div class="q-item-section__right">
+
+            <div class="flex justify-between">
+                <q-btn
+                    class="gt-xs q-mr-sm"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    icon="mdi-chart-areaspline"
+                    color="grey-7"
+                    @click="onToggleRelativeChart"
+                >
+                    <q-tooltip>Show Relative Chart</q-tooltip>
+                </q-btn>
                 <q-btn
                     class="gt-xs q-mr-sm"
                     size="12px"
@@ -264,9 +233,10 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
             </div>
             <!--Generate the Plots-->
             <UnivariateCellPlot
-                v-for="dataSelection in displayedPlots"
-                :key="dataSelection.plotName"
-                :plot-name="dataSelection.plotName"
+                v-for="chart in attributeCharts.filter((entry:AttributeChart) => entry.type === props.selectorType )"
+                :key="chart.plotName"
+                :attribute-chart="chart"
+                :plot-name="chart.plotName"
                 :attribute-type="props.selectorType"
                 @plot-error="handlePlotError"
             />
@@ -275,7 +245,7 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
 </template>
 
 <style scoped>
-.q-item-section__right {
+.q-i {
     display: flex;
     justify-content: flex-end;
 }
diff --git a/apps/client/src/components/plotSelector/UnivariateCellPlot.vue b/apps/client/src/components/plotSelector/UnivariateCellPlot.vue
new file mode 100644
index 00000000..1644cba8
--- /dev/null
+++ b/apps/client/src/components/plotSelector/UnivariateCellPlot.vue
@@ -0,0 +1,285 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import type { PropType } from 'vue';
+import * as vg from '@uwdata/vgplot';
+import {
+    useSelectionStore,
+    type DataSelection,
+    type AttributeChart
+} from '@/stores/interactionStores/selectionStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { storeToRefs } from 'pinia';
+import FilterEditMenu from './FilterEditMenu.vue';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { QItemSection } from 'quasar';
+import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
+
+const datasetSelectionStore = useDatasetSelectionStore();
+const { currentExperimentMetadata } = storeToRefs(
+    datasetSelectionStore
+);
+
+const globalSettings = useGlobalSettings();
+const selectionStore = useSelectionStore();
+const {showRelativeCell, showRelativeTrack} = storeToRefs(selectionStore);
+const { cellLevelSelection, trackLevelSelection, cellLevelFilter, trackLevelFilter } = useMosaicSelectionStore();
+
+// Define Plot Emits and Props
+const props = defineProps({
+    plotName: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    attributeType: {
+        type: String,
+        required: true,
+        validator: (value: string) => ['track', 'cell'].includes(value),
+    },
+    attributeChart:{
+        type: Object as PropType<AttributeChart>,
+        required: true
+    }
+});
+
+const plotContainer = ref<HTMLDivElement | null>(null);
+const charts = ref<null | HTMLElement>(null);
+const isLoading = ref<boolean>(true);
+let observer: MutationObserver | null = null;
+
+
+const showRelative = computed(() => {
+    return props.attributeType === 'cell' ? showRelativeCell.value : showRelativeTrack.value
+})
+
+// Styling for "relative" charts.
+const $params = {
+    style: showRelative.value ? vg.Param.value('display:block') : vg.Param.value('display:none'),
+}
+
+watch(showRelative, (isShown) => {
+    if(isShown){
+        $params.style.update('display:block')
+    } else {
+        $params.style.update('display: none')
+    }
+})
+
+
+// Creates charts when reference is available.
+// Incorporates loading.
+watch(
+    [plotContainer],
+    ([newPlotContainer]) => {
+        if (newPlotContainer) {
+            // Determine which selection to use
+            const mosaicSelection =
+                props.attributeType === 'cell'
+                    ? cellLevelSelection
+                    : trackLevelSelection;
+            const mosaicFilter = 
+                props.attributeType === 'cell'
+                    ? cellLevelFilter
+                    : trackLevelFilter;
+            // Determine which dataset to use
+            let dataSetName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`;
+            if (props.attributeType === 'track') {
+                dataSetName = `${dataSetName}_aggregate`;
+            }
+
+            // Create the plot
+            charts.value = makePlot(
+                props.plotName,
+                mosaicSelection,
+                mosaicFilter,
+                dataSetName
+            );
+            if (charts.value) {
+                plotContainer.value?.appendChild(charts.value);
+                observer = new MutationObserver((mutationsList) => {
+                    for (const mutation of mutationsList) {
+                        if (
+                            mutation.type === 'childList' &&
+                            mutation.addedNodes.length > 0
+                        ) {
+                            isLoading.value = false;
+                            observer?.disconnect();
+                            break;
+                        }
+                    }
+                });
+
+                // Observe the SVG for changes to its child elements
+                observer.observe(charts.value, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+        }
+    },
+    { immediate: true }
+);
+
+// Vg Plot
+function makePlot(column: string, mosaicSelection: any, mosaicFilter:any, datasetName: string) {
+    try {
+        return vg.vconcat(
+            vg.plot(
+                // Currently Selected Data
+                vg.rectY(vg.from(datasetName, { filterBy: mosaicSelection }), {
+                    x: vg.bin(column, {steps:100}),
+                    y:vg.count(),
+                    fill: '#377eb8',
+                    opacity: 1,
+                    inset: 0.2
+                }),
+                vg.marginBottom(30),
+                vg.marginTop(5),
+                vg.marginLeft(20),
+                vg.marginRight(20),
+                vg.width(268),
+                vg.height(70),
+                vg.style({ 'font-size': '.85em' }),
+                vg.xLabelAnchor('center'),
+                vg.xTickPadding(8),
+                vg.xLabelOffset(38),
+                vg.xInsetLeft(0),
+                vg.xInsetRight(0),
+                vg.xTickSpacing(100),
+                vg.yAxis(null),
+                vg.xLine(false),
+                vg.style($params.style)
+            ),
+            vg.plot(
+                // Background grey data
+                vg.rectY(vg.from(datasetName, {filterBy: mosaicFilter }), {
+                    x: vg.bin(column, {steps:100}),
+                    y: vg.count(),
+                    fill: '#cccccc',
+                    inset: 0.2,
+                }),
+                // Currently Selected Data
+                vg.rectY(vg.from(datasetName, { filterBy: mosaicSelection }), {
+                    x: vg.bin(column, {steps:100}),
+                    y:vg.count(),
+                    // div: vg.sql`"count"/"sum"`,
+                    fill: '#377eb8',
+                    opacity: 1,
+                    inset: 0.2
+                }),
+                vg.marginBottom(45),
+                vg.marginTop(5),
+                vg.marginLeft(20),
+                vg.marginRight(20),
+                vg.width(268),
+                vg.height(80),
+                // vg.style({ 'font-size': '.85em' }),
+                vg.xLabelAnchor('center'),
+                vg.xTickPadding(8),
+                vg.xLabelOffset(38),
+                vg.xInsetLeft(0),
+                vg.xInsetRight(0),
+                vg.xTickSpacing(100),
+                vg.yAxis(null),
+                vg.xLine(false),
+                vg.xNice(false),
+                vg.xAxis(true),
+            )
+        );
+    } catch (error) {
+        console.error(`Error with plot: ${error}`)
+    }
+}
+
+const rangeModel = computed({
+    get() {
+        return { min: props.attributeChart.range[0], max: props.attributeChart.range[1] };
+    },
+
+    set(newValue) {
+        // Turn this into a function in store.
+        const selection = selectionStore.dataSelections.find((selection: DataSelection) => {
+            return selection.plotName === props.attributeChart.plotName
+        })
+        if(selection){
+            selection.range[0] = newValue.min;
+            selection.range[1] = newValue.max;
+        } else {
+            const newSelection: DataSelection = {
+                ...props.attributeChart,
+                range: [newValue.min, newValue.max],
+            }
+            selectionStore.addSelection(newSelection)
+        }
+        props.attributeChart.range[0] = newValue.min;
+        props.attributeChart.range[1] = newValue.max;
+    },
+});
+
+function handleRangeUpdate(newRange: { min: number; max: number }) {
+    rangeModel.value = newRange;
+}
+</script>
+
+<template>
+    <div>
+        <q-item-section class="chart-container">
+            <div ref="plotContainer">
+                <FilterEditMenu
+                    :plot-name="props.plotName"
+                    :initial-min="rangeModel.min"
+                    :initial-max="rangeModel.max"
+                    filterType="selection"
+                    :attributeType="props.attributeType"
+                    @update:range="handleRangeUpdate"
+                />
+                <!-- Uses same width and height as single chart to replace the chart. -->
+                <div
+                    v-if="isLoading"
+                    style="width: 268px; height: 85px; gap: 10px"
+                    class="flex justify-center align-center"
+                >
+                    <q-spinner />
+                    <div class="text-caption">Loading chart</div>
+                </div>
+                <div 
+                    v-if="!isLoading"
+                    class="q-range-container"
+                >
+                    <q-range
+                        v-model="rangeModel"
+                        :min="props.attributeChart.maxRange[0]"
+                        :max="props.attributeChart.maxRange[1]"
+                        :step="0.001"
+                        :left-label-value="rangeModel.min.toFixed(2)"
+                        :right-label-value="rangeModel.max.toFixed(2)"
+                        label
+                        thumb-size="14px"
+                        track-size="2px"
+                        switch-label-side
+                        selection-color="#377eb8"
+                        track-color="hidden"
+                        :dark="globalSettings.darkMode"
+                    />
+                </div>
+            </div>
+        </q-item-section>
+    </div>
+</template>
+
+<style scoped>
+.q-range-container {
+    padding: 0 20px;
+    position: relative;
+    bottom:50px;
+    left: 0;
+    right: 0;
+}
+
+.chart-container{
+    /* position: relative; */
+    border-top:1px solid #cccccc;
+    border-radius:2px;
+    padding-top:20px;
+    margin-top:10px;
+}
+</style>
diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
index d04adfbc..20d1c448 100644
--- a/apps/client/src/main.ts
+++ b/apps/client/src/main.ts
@@ -6,7 +6,7 @@ import DatasetSelector from './components/globalSettings/DatasetSelector.vue';
 import LayoutSelector from './components/globalSettings/LayoutSelector.vue';
 import GeneralSettings from './components/globalSettings/GeneralSettings.vue';
 import StubView from './components/globalSettings/StubView.vue';
-import FilterSelector from './components/globalSettings/FilterSelector.vue';
+import FilterSelector from './components/plotSelector/FilterSelector.vue';
 // import LooneageView from './components/LooneageView.vue';
 import CellTrackView from './components/CellTrackView.vue';
 import LooneageViewGL from './components/LooneageViewGL.vue';
diff --git a/apps/client/src/stores/componentStores/aggregateLineChartStore.ts b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
index 31a344ec..5f2a9484 100644
--- a/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
+++ b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
@@ -11,14 +11,15 @@ import { useLooneageViewStore } from './looneageViewStore';
 
 import { min, max, mean, sum, median, quantile, deviation } from 'd3-array';
 import { useDataPointSelectionUntrracked } from '../interactionStores/dataPointSelectionUntrrackedStore';
-import { useSelectionStore } from '../interactionStores/selectionStore';
+import { useMosaicSelectionStore } from '../dataStores/mosaicSelectionStore';
+import { useDatasetSelectionStore } from '../dataStores/datasetSelectionUntrrackedStore';
 
 export interface AggLine {
     data: AggLineData;
     muted: boolean;
     relation: 'ancestor' | 'left' | 'right' | 'other';
     trackId: string;
-    selected?: boolean;
+    highlighted?: boolean;
     filtered?: boolean;
 }
 export interface AggLineData extends Array<AggDataPoint> { }
@@ -27,6 +28,7 @@ export interface AggDataPoint {
     value: number; // avg or total or median or ...
     count: number;
     variance?: [number, number];
+    highlighted?: boolean;
 }
 
 function storeSetup() {
@@ -36,10 +38,11 @@ function storeSetup() {
     const dataPointSelection = useDataPointSelection();
     const looneageViewStore = useLooneageViewStore();
     const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
+    const { currentExperimentMetadata, currentLocationMetadata } = storeToRefs(useDatasetSelectionStore());
 
-    const selectionStore = useSelectionStore();
-    const { selectedTrackingIds, unfilteredTrackingIds } = storeToRefs(selectionStore);
 
+    const mosaicSelectionStore = useMosaicSelectionStore();
+    const { highlightedCellIds, unfilteredTrackIds } = storeToRefs(mosaicSelectionStore);
 
     const aggregatorKey = ref<string>('average');
     const aggregatorOptions = ['average', 'total', 'min', 'median', 'max'];
@@ -298,12 +301,6 @@ function storeSetup() {
     }
 
 
-    function _determineSelectedOrFiltered(track: Track) {
-        return {
-            selected: selectedTrackingIds.value ? selectedTrackingIds.value.includes(track.trackId) : false,
-            filtered: unfilteredTrackingIds.value ? !(unfilteredTrackingIds.value.includes(track.trackId)) : false
-        }
-    }
 
     const hoveredLineData = computed<{ data: AggLineData; trackId: string }>(
         () => {
@@ -467,20 +464,17 @@ function storeSetup() {
                         const time = cellMetaData.getTime(cell);
                         const value = accessor.value(cell);
                         const count = 1;
-                        aggLineData.push({ time, value, count });
+                        const highlighted = _determineCellHighlighted(cell);
+                        aggLineData.push({ time, value, count, highlighted });
                     }
 
-                    // Currently only for individual cell tracks
-                    const { selected, filtered } = _determineSelectedOrFiltered(track)
-
-
+                    const filtered = _determineTrackFiltered(track);
 
                     result.push({
-                        data: medianFilterSmooth(aggLineData),
+                        data: aggLineData,
                         muted: true,
                         trackId: track.trackId,
                         relation: 'other',
-                        selected,
                         filtered
                     });
                 }
@@ -524,6 +518,34 @@ function storeSetup() {
         );
     });
 
+    function _determineCellHighlighted(cell: Cell) {
+        // List initializes as null. Nothing highlighted.
+        if (!highlightedCellIds.value) return false;
+
+        const frameColumn = currentExperimentMetadata.value?.headerTransforms?.['frame']
+        const locationId = currentLocationMetadata.value?.id;
+        if (frameColumn && locationId && cell.attrNum[frameColumn]) {
+            const uniqueString = `${cell.trackId}_${cell.attrNum[frameColumn]}_${locationId}`;
+            return highlightedCellIds.value.includes(uniqueString);
+        }
+        return true
+    }
+
+    function _determineTrackFiltered(track: Track) {
+
+        // The highlightedCellIds list is a set of strings like "trackId_frame_location"
+        // Extract only track Ids
+        // If track Id is present in this new set, include the track.
+        // const selected =
+        //     highlightedCellIds.value ?
+        //         [...new Set(highlightedCellIds.value.map(entry => entry.split('_')[0]))].includes(track.trackId)
+        //         : false
+
+        return unfilteredTrackIds.value ? !(unfilteredTrackIds.value.includes(track.trackId)) : false
+
+    }
+
+
     return {
         accessor,
         aggregatorKey,
diff --git a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
index 1f80a853..700144b4 100644
--- a/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/mosaicSelectionStore.ts
@@ -4,21 +4,37 @@ import { watch, ref, type Ref, computed } from 'vue';
 import {
     useSelectionStore,
     type DataSelection,
+    type AttributeChart
 } from '@/stores/interactionStores/selectionStore';
 import { useDatasetSelectionStore } from './datasetSelectionUntrrackedStore';
 
 import _ from 'lodash-es';
 import { useConditionSelectorStore } from '../componentStores/conditionSelectorStore';
-import { debounce } from 'lodash-es';
+import {
+    getPredicateSelectionComposite,
+    getPredicateSelectionAgg,
+    getPredicateFilterComposite,
+    getPredicateFilterAgg
+} from '@/util/predicateGenerator';
 
-interface Clause {
+interface ConditionChartSelection {
+    baseSelection: any;
+    filteredSelection: any;
+}
+
+interface LoonarClause {
     source: string;
     predicate: string | null;
 }
 
-interface ConditionChartSelection {
-    baseSelection: any;
-    filteredSelection: any;
+interface QueryResult {
+    id: string;
+}
+
+interface RangeResult {
+    source: string;
+    max_value: string;
+    min_value: string;
 }
 
 /**
@@ -35,33 +51,61 @@ interface ConditionChartSelection {
 interface MosaicSelectionState {
     cellLevelSelection: Ref<any>,
     trackLevelSelection: Ref<any>,
-    conditionChartSelectedParams: Record<string, any>,
+    cellLevelFilter: Ref<any>,
+    trackLevelFilter: Ref<any>,
     previousDataSelections: DataSelection[],
+    previousDataFilters: DataSelection[],
     conditionChartSelectionsInitialized: Ref<boolean>
-
-
+    highlightedCellIds: Ref<string[] | null>,
+    unfilteredTrackIds: Ref<string[] | null>
+    $conditionChartYAxisDomain: Ref<any>,
+    compSelClauseList: Ref<LoonarClause[]>,
+    aggSelClauseList: Ref<LoonarClause[]>,
+    compFilClauseList: Ref<LoonarClause[]>,
+    aggFilClauseList: Ref<LoonarClause[]>,
 }
 
+// const  = ref<LoonarClause[]>([]);
+// const  = ref<LoonarClause[]>([]);
+// const  = ref<LoonarClause[]>([]);
+// const  = ref<LoonarClause[]>([]);
+
 const initialState = (): MosaicSelectionState => ({
     cellLevelSelection: ref<any>(vg.Selection.intersect()),
     trackLevelSelection: ref<any>(vg.Selection.intersect()),
-    conditionChartSelectedParams: {},
+    cellLevelFilter: ref<any>(vg.Selection.intersect()),
+    trackLevelFilter: ref<any>(vg.Selection.intersect()),
     conditionChartSelectionsInitialized: ref<boolean>(false),
-    previousDataSelections: []
+    previousDataSelections: [],
+    previousDataFilters: [],
+    highlightedCellIds: ref<string[] | null>(null),
+    unfilteredTrackIds: ref<string[] | null>(null),
+    $conditionChartYAxisDomain: ref<any>(vg.Param.value([0, 10000])),
+    compSelClauseList: ref<LoonarClause[]>([]),
+    aggSelClauseList: ref<LoonarClause[]>([]),
+    compFilClauseList: ref<LoonarClause[]>([]),
+    aggFilClauseList: ref<LoonarClause[]>([]),
 })
 
 
 export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
 
-    const $yAxisParam = vg.Param.value([0, 2000]);
 
     // Initial state
     let {
         cellLevelSelection,
         trackLevelSelection,
-        conditionChartSelectedParams,
+        cellLevelFilter,
+        trackLevelFilter,
         conditionChartSelectionsInitialized,
-        previousDataSelections
+        previousDataSelections,
+        previousDataFilters,
+        highlightedCellIds,
+        unfilteredTrackIds,
+        compSelClauseList,
+        aggSelClauseList,
+        compFilClauseList,
+        aggFilClauseList,
     } = initialState()
 
     // Reset state function
@@ -69,23 +113,44 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
         let newState = initialState();
         cellLevelSelection.value = newState.cellLevelSelection.value;
         trackLevelSelection.value = newState.trackLevelSelection.value;
-        conditionChartSelectedParams = newState.conditionChartSelectedParams;
-        conditionChartSelectionsInitialized.value = newState.conditionChartSelectionsInitialized.value
-        previousDataSelections = newState.previousDataSelections
+        cellLevelFilter.value = newState.cellLevelFilter.value;
+        trackLevelFilter.value = newState.trackLevelFilter.value;
+        conditionChartSelectionsInitialized.value = newState.conditionChartSelectionsInitialized.value;
+        previousDataSelections = newState.previousDataSelections;
+        previousDataFilters = newState.previousDataFilters;
+        highlightedCellIds.value = newState.highlightedCellIds.value;
+        unfilteredTrackIds.value = newState.unfilteredTrackIds.value;
+        compSelClauseList.value = newState.compSelClauseList.value;
+        aggSelClauseList.value = newState.aggSelClauseList.value;
+        compFilClauseList.value = newState.compFilClauseList.value;
+        aggFilClauseList.value = newState.aggFilClauseList.value;
     }
 
+
+    let $conditionChartYAxisDomain = vg.Param.value([0, 2000])
+
+
     const selectionStore = useSelectionStore();
-    const { dataSelections } = storeToRefs(selectionStore);
+    const { dataSelections, dataFilters, attributeCharts } = storeToRefs(selectionStore);
     const conditionSelectorStore = useConditionSelectorStore();
 
     const datasetSelectionStore = useDatasetSelectionStore();
-    const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(datasetSelectionStore);
+    const { experimentDataInitialized, currentExperimentMetadata, currentLocationMetadata } = storeToRefs(datasetSelectionStore);
+
+
 
-    watch(experimentDataInitialized, () => {
-        resetState();
+    watch([experimentDataInitialized, conditionChartSelectionsInitialized], ([isInitialized, isConditionChartInitialized]) => {
+        if (isInitialized && isConditionChartInitialized) {
+            _updateConditionChartsDomain();
+        }
     })
 
 
+    // Object containing all condition chart selections
+    // Indexed by unique key containing the tag labels and values
+    // When we add "tag1-A_tab2-B", we also add "tag2-B_tag1-A" with the reference to the same selection
+    // This is so we can easily grab the selection regardless of the orientation of the condition
+    // chart matrix.
     const conditionChartSelections = computed(
         (): Record<string, ConditionChartSelection> => {
             const keysList = Object.keys(
@@ -115,7 +180,7 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                             const newSource = `${currKey}-${currValue}_${compareKey}-${compareValue}`;
 
                             const reversedSource = `${compareKey}-${compareValue}_${currKey}-${currValue}`;
-                            const clause: Clause = {
+                            const clause: LoonarClause = {
                                 source: newSource,
                                 predicate: `"${currKey}" = '${currValue}' AND "${compareKey}" = '${compareValue}'`,
                             };
@@ -136,88 +201,170 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
                     });
                 }
             }
-
+            conditionChartSelectionsInitialized.value = true;
             return tempConditionChartSelections;
         }
     );
 
-    // Subscribe to DataSelections. Waits for Condition Chart selections to be initialized.
-    watch(
-        [dataSelections, conditionChartSelections],
-
-        debounce(([newDataSelections, newConditionChartSelections]) => {
-            if (Object.keys(newConditionChartSelections).length > 0) {
-                // Track Changes in number of plots
-                let previousPlots = previousDataSelections.map(
-                    (entry) => entry.plotName
-                );
-
-                // In shared plots, get different ranges
-                newDataSelections.forEach((entry: any) => {
-                    const currPlotName = entry.plotName;
-                    if (
-                        entry.range[0] !== -Infinity &&
-                        entry.range[1] !== -Infinity
-                    ) {
-                        if (previousPlots.includes(currPlotName)) {
-                            const previousSelection =
-                                previousDataSelections.find(
-                                    (tempPrevSelection) =>
-                                        tempPrevSelection.plotName ===
-                                        currPlotName
-                                );
-                            if (
-                                previousSelection &&
-                                !_.isEqual(previousSelection.range, entry.range)
-                            ) {
-                                // Call update with new range
-                                updateMosaicSelection(
-                                    currPlotName,
-                                    entry.range,
-                                    entry.type
-                                );
-                            }
-                            // Remove Name from previousPlots
-                            previousPlots = previousPlots.filter(
-                                (plotName) => plotName !== currPlotName
-                            );
-                        } else {
-                            // Update with new plot source
-
-                            updateMosaicSelection(
-                                currPlotName,
-                                entry.range,
-                                entry.type
-                            );
-                        }
-                    }
-                });
-
-                // If greater than 0, means previous dataSelections has a selection no longer around.
-                if (previousPlots.length > 0) {
-                    previousPlots.forEach((prevPlotName) => {
-                        const previousSelection = previousDataSelections.find(
-                            (tempPrevSelection) =>
-                                tempPrevSelection.plotName === prevPlotName
-                        );
-
-                        // Update mosaic with the given max range
-                        if (previousSelection) {
-                            updateMosaicSelection(
-                                previousSelection.plotName,
-                                previousSelection.maxRange,
-                                previousSelection.type
-                            );
-                        }
-                    });
+
+    /* -------------------------------------------------
+    -------- SELECTION AND FILTER SUBSCRIPTIONS --------
+    ------------------------------------------------- */
+
+    // const compSelClauseList = ref<LoonarClause[]>([]);
+    // const aggSelClauseList = ref<LoonarClause[]>([]);
+    // const compFilClauseList = ref<LoonarClause[]>([]);
+    // const aggFilClauseList = ref<LoonarClause[]>([]);
+
+    const compSelPredString = computed(() =>
+        _clauseListToPredString(compSelClauseList.value)
+    )
+
+    const aggSelPredString = computed(() =>
+        _clauseListToPredString(aggSelClauseList.value)
+    )
+
+    const compFilPredString = computed(() =>
+        _clauseListToPredString(compFilClauseList.value)
+    )
+
+    const aggFilPredString = computed(() =>
+        _clauseListToPredString(aggFilClauseList.value)
+    )
+
+
+
+    watch([dataSelections, dataFilters, conditionChartSelections], ([newDataSelections, newDataFilters, newConditionChartSelections]) => {
+        if (Object.keys(newConditionChartSelections).length > 0) {
+            // Update existing or new
+            newDataSelections.forEach(selection => {
+                const compositePredicate = getPredicateSelectionComposite(selection);
+                const compClause = {
+                    source: selection.plotName,
+                    predicate: compositePredicate
                 }
+                _updatePredicate(compSelClauseList.value, compClause);
 
-                previousDataSelections = _.cloneDeep(newDataSelections);
-            }
+                const aggregatePredicate = getPredicateSelectionAgg(selection);
+                const aggClause = {
+                    source: selection.plotName,
+                    predicate: aggregatePredicate
+                }
+
+                _updatePredicate(aggSelClauseList.value, aggClause);
+            })
+
+
+            // Update existing or new
+            newDataFilters.forEach(filter => {
+                const compositePredicate = getPredicateFilterComposite(filter);
+                const compClause = {
+                    source: `${filter.plotName}_filter`,
+                    predicate: compositePredicate
+                }
+                _updatePredicate(compFilClauseList.value, compClause);
+
+                const aggregatePredicate = getPredicateFilterAgg(filter);
+                const aggClause = {
+                    source: `${filter.plotName}_filter`,
+                    predicate: aggregatePredicate
+                }
+                _updatePredicate(aggFilClauseList.value, aggClause);
+            })
+
+            // All selections removed
+            const removedSelections = previousDataSelections.filter(entry => {
+                return !newDataSelections.map(newEntry => newEntry.plotName).includes(entry.plotName)
+            })
+
+            // All filters removed
+            const removedFilters = previousDataFilters.filter(entry => {
+                return !newDataFilters.map(newEntry => newEntry.plotName).includes(entry.plotName)
+            });
+
+            // Set predicates to null for all removed selections.
+            removedSelections.forEach(removedSelection => {
+                const clause = { source: removedSelection.plotName, predicate: null }
+                _updatePredicate(compSelClauseList.value, clause);
+                _updatePredicate(aggSelClauseList.value, clause);
+            })
+
+            // Set predicates to null for all removed filters.
+            removedFilters.forEach(removedFilter => {
+                const clause = { source: `${removedFilter.plotName}_filter`, predicate: null }
+                _updatePredicate(compFilClauseList.value, clause);
+                _updatePredicate(aggFilClauseList.value, clause);
+            })
+
+            previousDataSelections = _.cloneDeep(newDataSelections);
+            previousDataFilters = _.cloneDeep(newDataFilters);
+        }
+
+
+    }, { deep: true, immediate: true })
+
+
+
+    /* -------------------------------------------------
+    --------------- CLAUSE SUBSCRIPTIONS ---------------
+    ------------------------------------------------- */
+
+    /*
+    NOTE:
+
+    For some reason, we can't pass our clause interface directly into update functions. We need to unpack them. I'm not sure why this is.
+    */
+
+    // Watch for selection clause changes
+    watch([
+        compSelClauseList,
+        aggSelClauseList,
+    ], ([
+        newCompSelList,
+        newAggSelList,
+    ]) => {
+        newCompSelList.forEach((clause: LoonarClause) => {
+            cellLevelSelection.value.update({ ...clause });
+            _updateConditionChartSelections({ ...clause });
+        })
+
+
+        newAggSelList.forEach((clause: LoonarClause) => {
+            trackLevelSelection.value.update({ ...clause });
+        })
+
+        _updateConditionChartsDomain();
+        _updateStandardHighlightOrFilter(false)
+
+    }, { deep: true })
+
+    // Watch for filter clause changes
+    watch([
+        compFilClauseList,
+        aggFilClauseList
+    ], ([
+        newCompFilList,
+        newAggFilList
+    ]) => {
+
+        newCompFilList.forEach((clause: LoonarClause) => {
+            cellLevelSelection.value.update({ ...clause });
+            cellLevelFilter.value.update({ ...clause });
+            _updateConditionChartSelections({ ...clause }, true);
+        })
+
+        newAggFilList.forEach((clause: LoonarClause) => {
+            trackLevelSelection.value.update({ ...clause });
+            trackLevelFilter.value.update({ ...clause });
+        })
+
+        _updateConditionChartsDomain();
+        _updateStandardHighlightOrFilter(true)
+        _updateAttributeChartRanges();
+
+
+    }, { deep: true })
 
-        }, 0),
-        { deep: true, immediate: true }
-    );
 
     // Used to watch when selectedGrid changes
     watch(conditionSelectorStore.selectedGrid, (newSelectedGrid) => {
@@ -225,97 +372,266 @@ export const useMosaicSelectionStore = defineStore('cellLevelSelection', () => {
         // Whenever selected Grid Changes, change
     });
 
-    function _escapeSource(source: string) {
-        return `"${source.replace(/"/g, '""')}"`;
-    }
-
-    // Called when a slider input needs to update selection
-    function updateMosaicSelection(
-        plotName: string,
-        range: [number, number] | null = null,
-        type: DataSelection['type']
-    ) {
-        //
 
-        const escapedSource = _escapeSource(plotName);
-        let cellPredicate;
-        let trackPredicate;
 
+    /* -------------------------------------------------
+    ----------------- UPDATE FUNCTIONS -----------------
+    ------------------------------------------------- */
+    async function _updateAttributeChartRanges() {
 
-        if (type === 'cell') {
-            // If cell, base only on range
-            cellPredicate = range
-                ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}`
-                : null;
+        const compFilPredicate = compFilPredString.value;
+        const aggFilPredicate = aggFilPredString.value;
 
-            trackPredicate = null;
+        const promiseList: Promise<any>[] = [];
+        attributeCharts.value.forEach(chart => {
 
-            // This filters out any data that DOESN'T have a max or min of the current value falling into the band.
-            trackPredicate = range
-                ? `NOT ( "MAX ${plotName}" <= ${range[0]} OR "MIN ${plotName}" >= ${range[1]} )`
-                : null;
+            const { plotName, type } = chart;
 
-        } else if (type == 'track') {
-            // If track, we filter by tracking IDs
+            // Use appropriate predicate.
+            let predicate = ``
+            if (type === 'cell') {
+                if (compFilPredicate) {
+                    predicate = `WHERE ${compFilPredicate}`
+                }
+            } else if (type === 'track') {
+                if (aggFilPredicate) {
+                    predicate = `WHERE ${aggFilPredicate}`
+                }
+            }
 
-            // Get ID Column
-            const id_column =
-                currentExperimentMetadata.value?.headerTransforms?.['id'];
 
-            // Aggregate Table Name
-            const table_name = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`;
+            // Table Prefix
+            const tableNamePrefix =
+                `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata`
+            // Generate correct table name
+            const tableName =
+                type === 'cell' ? tableNamePrefix : `${tableNamePrefix}_aggregate`
+
+            const query = `
+                SELECT 
+                    '${plotName}' as source,
+                    CAST(MIN("${plotName}") AS VARCHAR) as min_value,
+                    CAST(MAX("${plotName}") AS VARCHAR) as max_value
+                FROM ${tableName}
+                ${predicate}
+            `
+            promiseList.push(
+                vg.coordinator().query(query, { 'type': 'json' })
+            )
+        });
 
-            // Predicate has a subquery to pull IDs from aggregate table fitting the range
-            cellPredicate = range
-                ? `"${id_column}" IN (SELECT tracking_id FROM ${table_name} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )`
-                : null;
+        // Wait for all promises to resolve
+        try {
+            const results = await Promise.all(promiseList);
+            // Process the results as needed
+
+            results.forEach((resultList: RangeResult[]) => {
+                const result = resultList[0];
+                let correspondingPlot = attributeCharts.value.find((chart: AttributeChart) => chart.plotName === result.source);
+                if (correspondingPlot) {
+                    correspondingPlot.maxRange = [parseFloat(result.min_value), parseFloat(result.max_value)]
+                    // If there is a selection when a filter is removed, then we need to update the slider (attributeChart) range to be the same as the selection, not the max range returned from the results.
+
+                    let correspondingSelection = dataSelections.value.find((selection: DataSelection) => selection.plotName === result.source)
+                    if (correspondingSelection) {
+                        correspondingPlot.range = [...correspondingSelection.range]
+                    } else {
+                        correspondingPlot.range = [parseFloat(result.min_value), parseFloat(result.max_value)]
+                    }
+                }
+            })
 
-            trackPredicate = range ? `${escapedSource} between ${range[0]} and ${range[1]}` : null;
-        } else {
-            cellPredicate = null;
-            trackPredicate = null;
+            return results;
+        } catch (error) {
+            // Handle any errors that occur in the promises
+            console.error('Error resolving promises:', error);
+            throw error;
         }
 
-        const cellClause = {
-            source: plotName,
-            predicate: cellPredicate,
-        };
 
-        const trackClause = {
-            source: plotName,
-            predicate: trackPredicate
+    }
+
+    async function _updateStandardHighlightOrFilter(
+        filter?: boolean
+    ) {
+
+        const selPredicateString = filter ? aggSelPredString.value : compSelPredString.value;
+
+        const filPredicateString = filter ? aggFilPredString.value : compFilPredString.value;
+
+        let predicate = ``
+        const predicateTuple = [selPredicateString, filPredicateString].filter(Boolean);
+        if (predicateTuple.length > 0) {
+            predicate = `AND ${predicateTuple.join(' AND ')}`
+        }
+
+        if (
+            currentExperimentMetadata.value &&
+            currentLocationMetadata.value?.id &&
+            currentExperimentMetadata.value.headerTransforms
+        ) {
+            if (!filter) {
+                // If no selections, nothing should be selected. 
+                if (selPredicateString === null) {
+                    highlightedCellIds.value = null;
+                    return;
+                }
+                // When !filter, uses composite table. Still applies sel and fil predicate.
+
+                // Generate predicate string
+                // Pull id and frame column names
+                const { id, frame } = currentExperimentMetadata.value.headerTransforms
+                // Construct query to get all track id, frame, location combinations that satisfy predicate
+                const selectionQuery = `
+                    SELECT CAST("${id}" AS VARCHAR) as id, "${frame}" as frame, location
+                    FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata
+                    WHERE location = '${currentLocationMetadata?.value?.id}'
+                    ${predicate}
+
+                `;
+                const selectionRes: QueryResult[] = await vg.coordinator().query(selectionQuery, { 'type': 'json' });
+
+                // No need to filter out 'filtered' track ids. This is already handled by query.
+                // These strings identify a particular row in the table.
+                const uniqueCellIds = selectionRes.map((entry: any) => {
+                    return `${entry.id}_${parseInt(entry.frame)}_${parseInt(entry.location)}`
+                })
+
+                // Update selected ids
+                highlightedCellIds.value = uniqueCellIds
+            } else {
+                // When filter, uses aggregate table to grab track ids. Still uses ful sel and fil predicate.
+
+                // Pull track ids from aggregate table
+                const filterQuery = `
+                    SELECT CAST(tracking_id as VARCHAR) AS id
+                    FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata_aggregate
+                    WHERE location = '${currentLocationMetadata?.value?.id}'
+                    ${predicate}
+                `;
+                const filterRes: QueryResult[] = await vg.coordinator().query(filterQuery, { 'type': 'json' })
+
+                const resultIds = filterRes.map(entry => entry.id);
+
+                // Update unfilteredTrackIds
+                unfilteredTrackIds.value = resultIds;
+
+                // Update selected cell Ids to exclude any tracks filtered out
+                if (highlightedCellIds.value) {
+                    highlightedCellIds.value = highlightedCellIds.value.filter((entry: any) => {
+                        return resultIds.includes(entry.split('_')[0])
+                    });
+                }
+            }
         }
-        trackLevelSelection.value.update(trackClause);
-        cellLevelSelection.value.update(cellClause);
-        _updateConditionChartSelections(cellClause);
     }
 
-    function _updateConditionChartSelections(clause: Clause) {
+    function _updateConditionChartSelections(clause: LoonarClause, filter?: boolean) {
         Object.values(conditionChartSelections.value).forEach(
             (selectionObject: ConditionChartSelection) => {
                 selectionObject.filteredSelection.update(clause);
+                // If filtering, also apply clause to the base filter on the chart.
+                if (filter) {
+                    selectionObject.baseSelection.update(clause);
+                }
             }
         );
     }
 
-    function updateOpacityParam(source: string, value: number) {
-        conditionChartSelectedParams[source].update(value);
+    async function _updateConditionChartsDomain() {
+
+        const filPredicateString = compFilPredString.value;
+        const selPredicateString = compSelPredString.value;
+
+        const xAttributeName =
+            currentExperimentMetadata.value?.headerTransforms?.frame;
+        const yAttributeName =
+            currentExperimentMetadata.value?.headerTransforms?.mass;
+
+        // Catch to return early.
+        if (!xAttributeName || !yAttributeName) {
+            console.log('Could not get frame and mass from header transforms.')
+            return;
+        }
+        const compositeTableName = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata`;
+        let overallMin = Infinity;
+        let overallMax = -Infinity;
+
+        const s1Predicate = filPredicateString ? `WHERE ${filPredicateString}` : '';
+        const s2Predicate = s1Predicate === '' ? selPredicateString ? `WHERE ${selPredicateString}` : '' : `${s1Predicate} AND ${selPredicateString}`;
+
+
+        const query = `
+                SELECT MIN(avg_value) AS min, MAX(avg_value) AS max
+                FROM (
+                    SELECT AVG("${yAttributeName}") AS avg_value
+                    FROM "${compositeTableName}"
+                    ${s1Predicate}
+                    GROUP BY "${xAttributeName}", "${conditionSelectorStore.selectedXTag}", "${conditionSelectorStore.selectedYTag}"
+                    UNION
+                    SELECT AVG("${yAttributeName}") AS avg_value
+                    FROM "${compositeTableName}"
+                    ${s2Predicate}
+                    GROUP BY "${xAttributeName}", "${conditionSelectorStore.selectedXTag}", "${conditionSelectorStore.selectedYTag}"
+                )
+            `;
+
+        try {
+            const result = await vg
+                .coordinator()
+                .query(query, { type: 'json' });
+
+            if (result && Array.isArray(result) && result.length > 0) {
+                const { min, max } = result[0];
+                if (min !== null && min < overallMin) overallMin = min;
+                if (max !== null && max > overallMax) overallMax = max;
+            }
+        } catch (error) {
+            console.error(`Error computing domain`, error);
+            throw error;
+        }
+
+        if (overallMin === Infinity || overallMax === -Infinity) {
+            throw new Error('No data found for any condition.');
+        }
+        $conditionChartYAxisDomain.update([overallMin, overallMax]);
     }
 
-    function updateOpacityParamAll(value: number) {
-        Object.values(conditionChartSelectedParams).forEach((param: any) => {
-            param.update(value);
-        });
+    /* -------------------------------------------------
+    ----------------- UTILITY FUNCTIONS -----------------
+    ------------------------------------------------- */
+
+    function _findClause(clauseList: LoonarClause[], source: string) {
+        return clauseList.find(entry => entry.source === source);
+    }
+
+    function _updatePredicate(clauseList: LoonarClause[], clause: LoonarClause) {
+        const searchedClause = _findClause(clauseList, clause.source);
+        if (searchedClause) {
+            searchedClause.predicate = clause.predicate;
+        } else {
+            clauseList.push(clause);
+        }
+    }
+
+    function _clauseListToPredString(clauseList: LoonarClause[]) {
+        let tempString: string | null = '';
+        if (clauseList.length > 0) {
+            tempString = `${clauseList.map((clause: LoonarClause) => clause.predicate).filter(Boolean).join(') AND (')}`
+        }
+        return tempString.trim() === "" ? null : `(${tempString})`
     }
 
     return {
         cellLevelSelection,
         trackLevelSelection,
+        cellLevelFilter,
+        trackLevelFilter,
         conditionChartSelections,
         conditionChartSelectionsInitialized,
-        updateMosaicSelection,
-        updateOpacityParam,
-        updateOpacityParamAll,
-        $yAxisParam
+        $conditionChartYAxisDomain,
+        highlightedCellIds,
+        unfilteredTrackIds,
+        resetState
     };
 });
diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index cc993151..9b5f6e53 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -2,16 +2,22 @@ import { defineStore, storeToRefs } from 'pinia';
 import * as vg from '@uwdata/vgplot';
 import mitt from 'mitt';
 import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
-import type { Track } from '../dataStores/cellMetaDataStore';
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, type Ref } from 'vue';
 
 
+export type SelectionType = 'cell' | 'track' | 'lineage';
+
 export interface DataSelection {
     plotName: string;
-    type: 'cell' | 'track' | 'lineage'; // Unused, but will be needed if we have track-level and lineage-level attributes here
+    type: SelectionType; // Unused, but will be needed if we have track-level and lineage-level attributes here
     range: [number, number]; // The current range selected
-    maxRange: [number, number]; // The maximum range of the data
-    displayChart: boolean; // controls if the chart is shown or not, true by default
+}
+
+export interface AttributeChart {
+    plotName: string,
+    type: SelectionType;
+    maxRange: [number, number];
+    range: [number, number];
 }
 
 type Events = {
@@ -21,91 +27,65 @@ type Events = {
 export const emitter = mitt<Events>();
 //const emit = defineEmits(['plot-error']);
 
+interface SelectionState {
+    attributeCharts: Ref<AttributeChart[]>,
+    dataSelections: Ref<DataSelection[]>,
+    dataFilters: Ref<DataSelection[]>,
 
-
-function getPredicate(selection: DataSelection) {
-    if (selection.type === 'cell') {
-        return `NOT ("MAX ${selection.plotName}" <= ${selection.range[0]} OR "MIN ${selection.plotName}" >= ${selection.range[1]})`
-    } else if (selection.type === 'track') {
-        return `"${selection.plotName}" >= ${selection.range[0]} AND "${selection.plotName}" <= ${selection.range[1]}`
-    }
-    return true;
 }
 
-export const useSelectionStore = defineStore('selectionStore', () => {
-
-    const dataSetSelectionStore = useDatasetSelectionStore();
-    const { currentExperimentMetadata, currentLocationMetadata } = storeToRefs(dataSetSelectionStore);
-
-    // const aggregateTableName = `${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata_aggregate`
-
+const initialState = (): SelectionState => ({
+    attributeCharts: ref<AttributeChart[]>([]),
+    dataSelections: ref<DataSelection[]>([]),
+    dataFilters: ref<DataSelection[]>([]),
+})
 
-    const dataSelections = ref<DataSelection[]>([]);
-    const dataFilters = ref<DataSelection[]>([]);
-    const selectedTrackingIds = ref<string[] | null>(null);
-    const unfilteredTrackingIds = ref<string[] | null>(null);
 
-    const modifiedSelections = computed<DataSelection[]>(() => {
-        return dataSelections.value.filter(
-            (s) =>
-                s.range[0] !== s.maxRange[0] || s.range[1] !== s.maxRange[1]
-        );
-    })
+export const useSelectionStore = defineStore('selectionStore', () => {
 
-    interface TrackingIdQueryResult {
-        id: string
+    // Declare initial state
+    let {
+        attributeCharts,
+        dataSelections,
+        dataFilters
+    } = initialState();
+
+    // create resetState function
+    function resetState(): void {
+        let newState = initialState();
+        attributeCharts.value = newState.attributeCharts.value;
+        dataSelections.value = newState.dataSelections.value;
+        dataFilters.value = newState.dataFilters.value;
     }
 
-    // Watch variable for getting selections
-    watch([dataSelections, dataFilters], async ([newDataSelections, newDataFilters]) => {
-        const queryPrefix = `
-            SELECT CAST(tracking_id as VARCHAR) AS id
-            FROM ${currentExperimentMetadata?.value?.name}_composite_experiment_cell_metadata_aggregate
-            WHERE location = '${currentLocationMetadata?.value?.id}'
-        `;
-
-        const selectionPredicate = newDataSelections.map(selection => getPredicate(selection)).join(' AND ');
-
-        if (selectionPredicate.length > 0) {
-            const selectionQuery = `${queryPrefix} AND ${selectionPredicate}`;
-            const selectionRes: TrackingIdQueryResult[] = await vg.coordinator().query(selectionQuery, { 'type': 'json' });
-            selectedTrackingIds.value = selectionRes.map((entry: TrackingIdQueryResult) => entry.id);
-        } else {
-            selectedTrackingIds.value = null;
-        }
-
-
-        const filterPredicate = newDataFilters.map(filter => getPredicate(filter)).join(' AND ');
-
-        if (filterPredicate.length > 0) {
-            const filterQuery = `${queryPrefix} AND ${filterPredicate}`;
-            const filterRes: TrackingIdQueryResult[] = await vg.coordinator().query(filterQuery, { 'type': 'json' });
-            unfilteredTrackingIds.value = filterRes.map((entry: TrackingIdQueryResult) => entry.id);
-        } else {
-            unfilteredTrackingIds.value = null;
+    // Toggle button for showing relative charts.
+    const showRelativeCell = ref<boolean>(false);
+    const showRelativeTrack = ref<boolean>(false);
+
+    const datasetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata, experimentDataInitialized } = storeToRefs(datasetSelectionStore);
+
+    // Watches for new experiment data. Initializes with basic attribute charts.
+    watch([experimentDataInitialized, currentExperimentMetadata], ([isInitialized, newExperimentMetadata], [prevInit, prevMeta]) => {
+        // Resets state when initialization or experiment data changes.
+        if (
+            isInitialized &&
+            newExperimentMetadata &&
+            newExperimentMetadata.headerTransforms
+        ) {
+            const { mass } = newExperimentMetadata.headerTransforms;
+            // Add mass plot.
+            addPlot(mass, 'cell');
+            // Add average mass plot.
+            addPlot(`AVG ${mass}`, 'track');
         }
-
-
-    }, { deep: true })
-
-
+    }, { immediate: true, deep: true })
 
     // Private
-    function _resetSelection(index: number) {
-        dataSelections.value[index].range = [
-            ...dataSelections.value[index].maxRange,
-        ];
-    }
-
-    // Private
-    async function _getMaxRange(plotName: string): Promise<[number, number]> {
-        const selection = getSelection(plotName);
-        if (!selection) {
-            throw new Error(`Selection "${plotName}" does not exist.`);
-        }
-        const { currentExperimentMetadata } = useDatasetSelectionStore();
+    async function _getInitialMaxRange(plotName: string, type: SelectionType): Promise<[number, number]> {
 
         try {
+
             // Loading
             let minVal = -Infinity;
             let maxVal = Infinity;
@@ -117,26 +97,15 @@ export const useSelectionStore = defineStore('selectionStore', () => {
             // Escape the column name to handle spaces and special characters
             const escapedPlotName = `${plotName.replace(/"/g, '""')}`;
 
-            let query = '';
-            if (selection.type === 'cell') {
-                query = `
-            SELECT
-                MIN("${escapedPlotName}") AS min_value,
-                MAX("${escapedPlotName}") AS max_value
-            FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata
-        `;
-            } else if (selection.type === 'track') {
-                query = `
-            SELECT
-                MIN("${escapedPlotName}") AS min_value,
-                MAX("${escapedPlotName}") AS max_value
-            FROM ${currentExperimentMetadata?.name}_composite_experiment_cell_metadata_aggregate
-        `;
-            } else {
-                throw new Error(
-                    `Unknown type "${selection.type}" for plot "${plotName}"`
-                );
-            }
+            const tablePrefix = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata`
+            const tableName = type === 'cell' ? tablePrefix : `${tablePrefix}_aggregate`
+
+            let query = `
+                SELECT
+                    MIN("${escapedPlotName}") AS min_value,
+                    MAX("${escapedPlotName}") AS max_value
+                FROM ${tableName}
+            `;
 
             const result = await vg.coordinator().query(query);
 
@@ -167,17 +136,6 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         }
     }
 
-    // Private
-    async function _setMaxRange(plotName: string) {
-        const selection = getSelection(plotName);
-        if (selection === null) {
-            throw Error(`Selection ${plotName} does not exist`);
-        }
-        const [minVal, maxVal] = await _getMaxRange(plotName);
-        selection.range = [minVal, maxVal];
-        selection.maxRange = [minVal, maxVal];
-    }
-
     function addSelection(selection: DataSelection) {
         const existingIndex = dataSelections.value.findIndex(
             (s) => s.plotName === selection.plotName
@@ -193,6 +151,16 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         dataSelections.value = [];
     }
 
+    function convertToFilters() {
+        dataSelections.value.forEach(selection => {
+            addFilter({
+                ...selection,
+                range: [...selection.range],
+            })
+        })
+        clearAllSelections();
+    }
+
     function updateSelection(
         plotName: string,
         range: [number, number],
@@ -208,8 +176,6 @@ export const useSelectionStore = defineStore('selectionStore', () => {
                 plotName,
                 range,
                 type: type ?? 'cell', // Default value
-                maxRange: [...range], // Using the provided range as maxRange
-                displayChart: true, // Default value
             });
         }
     }
@@ -229,7 +195,14 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         );
         if (index !== -1) {
             dataSelections.value.splice(index, 1);
+
+            // Update selection range when removing selection.
+            const correspondingAttributeChart = attributeCharts.value.find(entry => entry.plotName === plotName);
+            if (correspondingAttributeChart) {
+                correspondingAttributeChart.range = [...correspondingAttributeChart.maxRange]
+            }
         }
+
     }
 
     function removePlotWithErrors(plotName: string) {
@@ -240,17 +213,6 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         dataSelections.value.splice(index, 1);
     }
 
-    function resetSelectionByPlotName(plotName: string) {
-        const index = dataSelections.value.findIndex(
-            (s) => s.plotName === plotName
-        );
-        if (index === -1) return;
-        // window.dispatchEvent(
-        //     new CustomEvent('selectionRemoved', { detail: plotName })
-        // );
-        _resetSelection(index);
-    }
-
     function getSelection(name: string): DataSelection | null {
         const s = dataSelections.value.find(
             (s: DataSelection) => s.plotName === name
@@ -259,30 +221,29 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         return s;
     }
 
-    function addPlot(name: string, type: DataSelection['type']) {
-        const existingIndex = dataSelections.value.findIndex(
+    async function addPlot(name: string, type: DataSelection['type']) {
+        const existingIndex = attributeCharts.value.findIndex(
             (s) => s.plotName === name
         );
         if (existingIndex !== -1) {
-            const existingPlot = dataSelections.value[existingIndex];
-            if (existingPlot.type !== type) {
-                console.warn(
-                    `Changing type of plot "${name}" from "${existingPlot.type}" to "${type}"`
-                );
-                existingPlot.type = type;
-                _setMaxRange(name);
-            }
+
+            // Not sure when above would ever be triggered. Just warning for now, do nothing otherwise.
+            console.warn('Chart already exists.')
             return;
         }
-        const selection: DataSelection = {
+
+        // Get initial range
+        const [minVal, maxVal] = await _getInitialMaxRange(name, type);
+
+        // Create chart.
+        const chart: AttributeChart = {
             plotName: name,
-            range: [-Infinity, Infinity],
-            maxRange: [-Infinity, Infinity],
-            type: type,
-            displayChart: true,
-        };
-        dataSelections.value.push(selection);
-        _setMaxRange(name);
+            range: [minVal, maxVal],
+            maxRange: [minVal, maxVal],
+            type: type
+        }
+        attributeCharts.value.push(chart);
+
     }
 
 
@@ -299,6 +260,8 @@ export const useSelectionStore = defineStore('selectionStore', () => {
 
     function removeFilter(index: number) {
         dataFilters.value.splice(index, 1);
+        // When we remove a selection, we update to the max range.
+        // When we remove a filter, we have other items in place in the mosaicSelectionStore to update the range.
     }
 
     function updateFilter(
@@ -316,8 +279,6 @@ export const useSelectionStore = defineStore('selectionStore', () => {
                 plotName,
                 range,
                 type: type ?? 'cell',
-                maxRange: [0, 1000],
-                displayChart: true,
             });
         }
     }
@@ -329,9 +290,10 @@ export const useSelectionStore = defineStore('selectionStore', () => {
     return {
         dataSelections,
         dataFilters,
-        modifiedSelections,
-        selectedTrackingIds,
-        unfilteredTrackingIds,
+        attributeCharts,
+        showRelativeCell,
+        showRelativeTrack,
+        resetState,
         clearAllSelections,
         updateSelection,
         updateFilter,
@@ -339,11 +301,12 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         removeSelectionByPlotName,
         removeFilterByPlotName,
         removePlotWithErrors,
-        resetSelectionByPlotName,
         addPlot,
         getSelection,
+        addSelection,
         addFilter,
-        removeFilter
+        removeFilter,
+        convertToFilters
     }
 
 
diff --git a/apps/client/src/util/predicateGenerator.ts b/apps/client/src/util/predicateGenerator.ts
new file mode 100644
index 00000000..d65c9542
--- /dev/null
+++ b/apps/client/src/util/predicateGenerator.ts
@@ -0,0 +1,185 @@
+import type { DataSelection } from "@/stores/interactionStores/selectionStore";
+import { useDatasetSelectionStore } from "@/stores/dataStores/datasetSelectionUntrrackedStore";
+import { storeToRefs } from "pinia";
+
+function _escapeSource(source: string) {
+    return `"${source.replace(/"/g, '""')}"`;
+}
+
+// If ranges are using the JS Infinity key word, 
+// then escape with single quotes for use in SQL
+function _escapeRange(range: number[]) {
+    const newRange: Array<string | number> = [];
+    range.forEach(number => {
+        if (number === Infinity) {
+            newRange.push("'Infinity'")
+        } else if (number === -Infinity) {
+            newRange.push("'-Infinity'")
+        } else {
+            newRange.push(number)
+        }
+    })
+    return newRange;
+}
+
+// Predicate for 'selection' queries with data source as the composite table.
+export function getPredicateSelectionComposite(selection: DataSelection) {
+
+    /*----------------------------------------------
+
+        Charts Using This Type of Predicate:
+        
+        Image
+        Line Chart
+        Condition Chart
+        Cell Attributes
+
+    ----------------------------------------------*/
+
+    const { plotName, type, range: unescapedRange } = selection;
+    const range = _escapeRange(unescapedRange);
+
+    const escapedSource = _escapeSource(plotName);
+
+    const dataSetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata } = storeToRefs(dataSetSelectionStore);
+
+    // Get ID Column
+    const idColumn =
+        currentExperimentMetadata.value?.headerTransforms?.['id'];
+
+    // Aggregate Table Name
+    const aggTableName = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`;
+
+    if (currentExperimentMetadata.value) {
+        if (type === 'cell') {
+            return range
+                ? `${escapedSource} BETWEEN ${range[0]} AND ${range[1]}`
+                : null;
+        } else if (type === 'track') {
+            return range
+                ? `"${idColumn}" IN (SELECT tracking_id FROM ${aggTableName} WHERE ${escapedSource} between ${range[0]} and ${range[1]} )`
+                : null;
+        } else {
+            console.warn(`Type '${type}' not implemented.`)
+            return null
+        }
+    } else {
+        console.warn('Cell Metadata not yet initialized.')
+        return null
+    }
+}
+
+// Predicate for 'selection' queries with data source as the agg table.
+export function getPredicateSelectionAgg(selection: DataSelection) {
+
+    /*----------------------------------------------
+
+        Charts Using This Type of Predicate:
+        
+        Track Attributes Plot
+
+    ----------------------------------------------*/
+
+    const { plotName, type, range: unescapedRange } = selection;
+    const range = _escapeRange(unescapedRange);
+
+    const escapedSource = _escapeSource(plotName);
+
+    const dataSetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata } = storeToRefs(dataSetSelectionStore);
+
+
+    if (currentExperimentMetadata.value) {
+        if (type === 'cell') {
+            return range
+                ? `NOT ( "MAX ${plotName}" <= ${range[0]} OR "MIN ${plotName}" >= ${range[1]} )`
+                : null;
+        } else if (type === 'track') {
+            return range ? `${escapedSource} between ${range[0]} and ${range[1]}` : null;
+        } else {
+            console.warn(`Type '${type}' not implemented.`)
+            return null
+        }
+    } else {
+        console.warn('Cell Metadata not yet initialized.')
+        return null
+    }
+
+}
+
+// Predicate for 'filter' queries with data source as the composite table
+export function getPredicateFilterComposite(filter: DataSelection) {
+
+    /*----------------------------------------------
+
+        Charts Using This Type of Predicate:
+        
+
+        Condition Chart
+        Cell Attributes
+
+    ----------------------------------------------*/
+
+    const { plotName, type, range: unescapedRange } = filter;
+    const range = _escapeRange(unescapedRange);
+
+    const dataSetSelectionStore = useDatasetSelectionStore();
+    const { currentExperimentMetadata } = storeToRefs(dataSetSelectionStore);
+
+    // Get ID Column
+    const idColumn =
+        currentExperimentMetadata.value?.headerTransforms?.['id'];
+
+    // Aggregate Table Name
+    const aggTableName = `${currentExperimentMetadata.value?.name}_composite_experiment_cell_metadata_aggregate`;
+
+    if (currentExperimentMetadata.value) {
+        if (type === 'cell') {
+            return range
+                ? `"${idColumn}" IN (
+                    SELECT tracking_id
+                    FROM ${aggTableName}
+                    WHERE NOT (
+                        "MAX ${plotName}" <= ${range[0]} 
+                        OR "MIN ${plotName}" >= ${range[1]}
+                    )
+                )`
+                : null;
+        } else if (type === 'track') {
+            return range
+                ? `"${idColumn}" IN (
+                SELECT tracking_id
+                FROM ${aggTableName}
+                WHERE "${plotName}" >= ${range[0]} 
+                    AND "${plotName}" <= ${range[1]}
+            )`
+                : null;
+        } else {
+            console.warn(`Type '${type}' not implemented.`)
+            return null
+        }
+    } else {
+        console.warn('Cell Metadata not yet initialized.')
+        return null
+    }
+
+
+}
+
+// Predicate for 'filter' queries with data source as the aggregate table
+export function getPredicateFilterAgg(filter: DataSelection) {
+    /*----------------------------------------------
+
+        Charts Using This Type of Predicate:
+
+        Image 
+        Line Chart
+        Track Attributes Plot
+
+        Note: Image and Line chart use this type of filtering because they eventually just pull from a list of Ids -- they don't have the same idea of a mosaic data source. So, we just generate the list of ids by pulling from the aggregate table since it makes the most sense.
+    ----------------------------------------------*/
+    // Same as the selection. May re-write
+    return getPredicateSelectionAgg(filter);
+
+}

From bb556fe6f56cfd75c71c007e4429ac8cfa62fa14 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Sun, 24 Nov 2024 14:59:33 -0700
Subject: [PATCH 61/64] Fixed selections not updating range

---
 .../stores/interactionStores/selectionStore.ts    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/stores/interactionStores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
index 9b5f6e53..2af452fd 100644
--- a/apps/client/src/stores/interactionStores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -166,11 +166,20 @@ export const useSelectionStore = defineStore('selectionStore', () => {
         range: [number, number],
         type?: DataSelection['type']
     ) {
-        const existingIndex = dataSelections.value.findIndex(
+        const plot = dataSelections.value.find(
             (s) => s.plotName === plotName
         );
-        if (existingIndex !== -1) {
-            dataSelections.value[existingIndex].range = range;
+        const chart = attributeCharts.value.find(
+            (s) => s.plotName === plotName
+        )
+
+        if (plot) {
+            plot.range = [...range];
+            if (chart) {
+                chart.range = [...range];
+            } else {
+                console.error('Could not find corresponding plot.')
+            }
         } else {
             addSelection({
                 plotName,

From 5b58ab599bb54a41e2667b86e943edcdcfaf6699 Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:35:46 -0700
Subject: [PATCH 62/64] toggleRelativeChart icon color changes

---
 .../components/plotSelector/PlotSelector.vue  | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/components/plotSelector/PlotSelector.vue b/apps/client/src/components/plotSelector/PlotSelector.vue
index f1345c0c..5e87b58f 100644
--- a/apps/client/src/components/plotSelector/PlotSelector.vue
+++ b/apps/client/src/components/plotSelector/PlotSelector.vue
@@ -8,7 +8,7 @@ import LBtn from '../custom/LBtn.vue';
 import {
     useSelectionStore,
     emitter,
-    type AttributeChart
+    type AttributeChart,
 } from '@/stores/interactionStores/selectionStore';
 import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useNotificationStore } from '@/stores/misc/notificationStore';
@@ -20,7 +20,8 @@ const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
     datasetSelectionStore
 );
 const selectionStore = useSelectionStore();
-const { dataSelections, attributeCharts, showRelativeCell, showRelativeTrack } = storeToRefs(selectionStore);
+const { dataSelections, attributeCharts, showRelativeCell, showRelativeTrack } =
+    storeToRefs(selectionStore);
 
 // Are these plots track or cell level?
 const props = defineProps({
@@ -37,7 +38,6 @@ const selectedTrackAttribute = ref('');
 const selectedAggregation = ref('');
 const errorPlotName = ref('');
 
-
 const aggregationOptions = [
     { label: 'Sum', value: 'SUM' },
     { label: 'Average', value: 'AVG' },
@@ -90,13 +90,19 @@ function addTrackPlotFromMenu(atr: string, agg: string) {
     trackPlotDialogOpen.value = false;
     selectionStore.addPlot(`${agg} ${atr}`, 'track');
 }
+// New reactive constant for icon color state
+const isRelativeChartShown = ref(false);
 
+// Shows or hides relative chart. Changes icon color.
+function onToggleRelativeChart() {
+    isRelativeChartShown.value = !isRelativeChartShown.value;
 
-
-function onToggleRelativeChart(){
-    props.selectorType === 'cell' ? showRelativeCell.value = !showRelativeCell.value : showRelativeTrack.value = !showRelativeTrack.value
+    if (props.selectorType === 'cell') {
+        showRelativeCell.value = !showRelativeCell.value;
+    } else if (props.selectorType === 'track') {
+        showRelativeTrack.value = !showRelativeTrack.value;
+    }
 }
-
 </script>
 <template>
     <div>
@@ -114,7 +120,7 @@ function onToggleRelativeChart(){
                     dense
                     round
                     icon="mdi-chart-areaspline"
-                    color="grey-7"
+                    :color="isRelativeChartShown ? 'blue-8' : 'grey-7'"
                     @click="onToggleRelativeChart"
                 >
                     <q-tooltip>Show Relative Chart</q-tooltip>

From c45e31810acf686207eba4ffa82f3366db811e7e Mon Sep 17 00:00:00 2001
From: Luke-Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:43:14 -0700
Subject: [PATCH 63/64] dark mode for dialogs + attribute select menu position
 fix

---
 apps/client/src/components/plotSelector/PlotSelector.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/client/src/components/plotSelector/PlotSelector.vue b/apps/client/src/components/plotSelector/PlotSelector.vue
index 5e87b58f..a1cb5b4e 100644
--- a/apps/client/src/components/plotSelector/PlotSelector.vue
+++ b/apps/client/src/components/plotSelector/PlotSelector.vue
@@ -151,6 +151,9 @@ function onToggleRelativeChart() {
                                         label="Select Attribute"
                                         :options="allAttributeNames"
                                         v-model="selectedCellAttribute"
+                                        :dark="globalSettings.darkMode"
+                                        menu-anchor="top left"
+                                        menu-self="bottom left"
                                         clickable
                                     >
                                     </q-select>
@@ -196,6 +199,7 @@ function onToggleRelativeChart() {
                                         label="Select Attribute"
                                         :options="allAttributeNames"
                                         v-model="selectedTrackAttribute"
+                                        :dark="globalSettings.darkMode"
                                         clickable
                                     >
                                     </q-select>
@@ -205,6 +209,7 @@ function onToggleRelativeChart() {
                                         option-value="value"
                                         option-label="label"
                                         v-model="selectedAggregation"
+                                        :dark="globalSettings.darkMode"
                                         emit-value
                                         clickable
                                     >

From 12403e8292290104332667022269cfa4abfbd1d2 Mon Sep 17 00:00:00 2001
From: Brian Bollen <briancbollen@gmail.com>
Date: Tue, 26 Nov 2024 07:40:49 -0700
Subject: [PATCH 64/64] Commented out exemplar view

---
 .../interactionStores/gridstackLayoutStore.ts      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
index ab6bd26d..ef666cae 100644
--- a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
+++ b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
@@ -291,13 +291,13 @@ export const useGridstackLayoutStore = defineStore(
                 icon: 'table_chart',
                 noPadding: true,
             },
-            {
-                component: 'ExemplarView',
-                displayName: 'Exemplar View',
-                id: 'ExemplarView',
-                icon: 'table_chart',
-                noPadding: true,
-            },
+            // {
+            //     component: 'ExemplarView',
+            //     displayName: 'Exemplar View',
+            //     id: 'ExemplarView',
+            //     icon: 'table_chart',
+            //     noPadding: true,
+            // },
             {
                 component: 'LooneageViewGL',
                 displayName: 'Looneage',