From b62d57f24b8b7c287a2279bf278698cb64c02a46 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 27 Mar 2024 11:13:32 -0400
Subject: [PATCH 1/5] Implement composable to allow filtering by object store
 other places.

---
 .../Common/FilterMenuObjectStore.vue          | 12 +++---------
 client/src/composables/useObjectStores.ts     | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 client/src/composables/useObjectStores.ts

diff --git a/client/src/components/Common/FilterMenuObjectStore.vue b/client/src/components/Common/FilterMenuObjectStore.vue
index b28b4ca986d3..dd0dea4756ed 100644
--- a/client/src/components/Common/FilterMenuObjectStore.vue
+++ b/client/src/components/Common/FilterMenuObjectStore.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
-import { useObjectStoreStore } from "@/stores/objectStoreStore";
+import { useSelectableObjectStores } from "@/composables/useObjectStores";
 import { ValidFilter } from "@/utils/filtering";
 
 import FilterObjectStoreLink from "./FilterObjectStoreLink.vue";
@@ -40,12 +39,7 @@ watch(
     }
 );
 
-const store = useObjectStoreStore();
-const { selectableObjectStores } = storeToRefs(store);
-
-const hasObjectStores = computed(() => {
-    return selectableObjectStores.value && selectableObjectStores.value.length > 0;
-});
+const { selectableObjectStores, hasSelectableObjectStores } = useSelectableObjectStores();
 
 function onChange(value: string | null) {
     localValue.value = (value || undefined) as FilterType;
@@ -53,7 +47,7 @@ function onChange(value: string | null) {
 </script>
 
 <template>
-    <div v-if="hasObjectStores">
+    <div v-if="hasSelectableObjectStores">
         <small>Filter by storage source:</small>
         <FilterObjectStoreLink :object-stores="selectableObjectStores" :value="localValue" @change="onChange" />
     </div>
diff --git a/client/src/composables/useObjectStores.ts b/client/src/composables/useObjectStores.ts
new file mode 100644
index 000000000000..75efbc93f9df
--- /dev/null
+++ b/client/src/composables/useObjectStores.ts
@@ -0,0 +1,19 @@
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+
+import { useObjectStoreStore } from "@/stores/objectStoreStore";
+
+
+export function useSelectableObjectStores() {
+    const store = useObjectStoreStore();
+    const { selectableObjectStores } = storeToRefs(store);
+    
+    const hasSelectableObjectStores = computed(() => {
+        return selectableObjectStores.value && selectableObjectStores.value.length > 0;
+    });
+
+    return {
+        selectableObjectStores,
+        hasSelectableObjectStores,
+    };
+}

From a29a21a53e3a5a15d62ab70503134c4971580062 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 27 Mar 2024 13:11:36 -0400
Subject: [PATCH 2/5] Add ability to filter by object store in History storage
 summary.

---
 .../Visualizations/Charts/BarChart.vue        | 13 ++-
 .../Visualizations/HistoryStorageOverview.vue | 84 ++++++++++++++++---
 .../User/DiskUsage/Visualizations/service.ts  | 14 +++-
 .../User/DiskUsage/Visualizations/util.ts     | 26 +++++-
 4 files changed, 117 insertions(+), 20 deletions(-)

diff --git a/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue b/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue
index c45717d6f1f4..cf28d4543388 100644
--- a/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BCard } from "bootstrap-vue";
 import * as d3 from "d3";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 
 import type { DataValuePoint } from ".";
 
@@ -63,8 +63,14 @@ watch(
         props.valueFormatter,
     ],
     () => {
-        clearChart();
-        renderBarChart();
+        // make sure v-if to conditionally display the div we're rendering this in
+        // is available in the DOM before actually doing the rendering. Without
+        // nextTick you cannot go from empty data -> chart when tweaking filtering
+        // parameters.
+        nextTick(() => {
+            clearChart();
+            renderBarChart();
+        });
     }
 );
 
@@ -313,6 +319,7 @@ function setTooltipPosition(mouseX: number, mouseY: number): void {
                 </slot>
             </h3>
         </template>
+        <slot name="options" />
         <div v-if="hasData">
             <p class="chart-description">{{ description }}</p>
             <div class="chart-area">
diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
index fa6c69c17b24..16a016394de4 100644
--- a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BForm, BFormGroup, BFormSelect,BInputGroup } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { useSelectableObjectStores } from "@/composables/useObjectStores";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
 import type { DataValuePoint } from "./Charts";
 import { fetchHistoryContentsSizeSummary, type ItemSizeSummary } from "./service";
-import { buildTopNDatasetsBySizeData, byteFormattingForChart, useDataLoading, useDatasetsToDisplay } from "./util";
+import { buildTopNDatasetsBySizeData, byteFormattingForChart, useAdvancedFiltering,useDataLoading, useDatasetsToDisplay } from "./util";
 
 import BarChart from "./Charts/BarChart.vue";
 import OverviewPage from "./OverviewPage.vue";
 import RecoverableItemSizeTooltip from "./RecoverableItemSizeTooltip.vue";
 import SelectedItemActions from "./SelectedItemActions.vue";
 import WarnDeletedDatasets from "./WarnDeletedDatasets.vue";
+import FilterObjectStoreLink from "@/components/Common/FilterObjectStoreLink.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const router = useRouter();
@@ -38,16 +42,30 @@ const {
 } = useDatasetsToDisplay();
 
 const { isLoading, loadDataOnMount } = useDataLoading();
+const { isAdvanced, toggleAdvanced, inputGroupClasses, faAngleDoubleDown, faAngleDoubleUp } = useAdvancedFiltering();
+const { selectableObjectStores, hasSelectableObjectStores } = useSelectableObjectStores();
 
-loadDataOnMount(async () => {
+const objectStore = ref<string | null>(null);
+
+function onChangeObjectStore(value: string | null) {
+    objectStore.value = value;
+    reloadDataFromServer();
+}
+
+async function reloadDataFromServer() {
+    console.log("reloading with " + objectStore.value);
     const allDatasetsInHistorySizeSummary = await fetchHistoryContentsSizeSummary(
         props.historyId,
-        numberOfDatasetsLimit
+        numberOfDatasetsLimit,
+        objectStore.value,
     );
+    datasetsSizeSummaryMap.clear();
     allDatasetsInHistorySizeSummary.forEach((dataset) => datasetsSizeSummaryMap.set(dataset.id, dataset));
 
     buildGraphsData();
-});
+}
+
+loadDataOnMount(reloadDataFromServer);
 
 function buildGraphsData() {
     const allDatasetsInHistorySizeSummary = Array.from(datasetsSizeSummaryMap.values());
@@ -124,15 +142,55 @@ function onUndelete(datasetId: string) {
                 v-bind="byteFormattingForChart">
                 <template v-slot:title>
                     <b>{{ localize(`Top ${numberOfDatasetsToDisplay} Datasets by Size`) }}</b>
-                    <b-form-select
-                        v-model="numberOfDatasetsToDisplay"
-                        :options="numberOfDatasetsToDisplayOptions"
-                        :disabled="isLoading"
-                        title="Number of datasets to show"
-                        class="float-right w-auto"
-                        size="sm"
-                        @change="buildGraphsData()">
-                    </b-form-select>
+                    <BInputGroup size="sm" :class="inputGroupClasses">
+                        <BFormSelect
+                            v-if="!isAdvanced"
+                            v-model="numberOfDatasetsToDisplay"
+                            :options="numberOfDatasetsToDisplayOptions"
+                            :disabled="isLoading"
+                            title="Number of histories to show"
+                            size="sm"
+                            @change="buildGraphsData()">
+                        </BFormSelect>
+                        <BButton
+                            v-b-tooltip.hover.bottom.noninteractive
+                            aria-haspopup="true"
+                            size="sm"
+                            title="Toggle Advanced Filtering"
+                            data-description="wide toggle advanced filter"
+                            @click="toggleAdvanced">
+                            <FontAwesomeIcon :icon="isAdvanced ? faAngleDoubleUp : faAngleDoubleDown" />
+                        </BButton>
+                    </BInputGroup>
+                </template>
+                <template v-slot:options>
+                    <div v-if="isAdvanced" class="clear-fix">
+                        <BForm>
+                            <BFormGroup
+                                id="input-group-num-histories"
+                                label="Number of histories:"
+                                label-for="input-num-histories"
+                                description="This is the maximum number of histories that will be displayed."
+                            >
+                                <BFormSelect
+                                    v-model="numberOfDatasetsToDisplay"
+                                    :options="numberOfDatasetsToDisplayOptions"
+                                    :disabled="isLoading"
+                                    title="Number of histories to show"
+                                    @change="buildGraphsData()">
+                                </BFormSelect>
+                            </BFormGroup>
+                            <BFormGroup
+                                v-if="hasSelectableObjectStores"
+                                id="input-group-object-store"
+                                label="Storage location:"
+                                label-for="input-object-store"
+                                description="This will constrain history size calculations to a particular object store."
+                            >
+                                <FilterObjectStoreLink :object-stores="selectableObjectStores" :value="objectStore" @change="onChangeObjectStore" />
+                            </BFormGroup>
+                        </BForm>
+                    </div>
                 </template>
                 <template v-slot:tooltip="{ data }">
                     <RecoverableItemSizeTooltip
diff --git a/client/src/components/User/DiskUsage/Visualizations/service.ts b/client/src/components/User/DiskUsage/Visualizations/service.ts
index e656f0014cb0..79c2c78464f0 100644
--- a/client/src/components/User/DiskUsage/Visualizations/service.ts
+++ b/client/src/components/User/DiskUsage/Visualizations/service.ts
@@ -33,14 +33,22 @@ export async function fetchAllHistoriesSizeSummary(): Promise<ItemSizeSummary[]>
     return allHistoriesTakingStorageResponse;
 }
 
-export async function fetchHistoryContentsSizeSummary(historyId: string, limit = 5000) {
+export async function fetchHistoryContentsSizeSummary(historyId: string, limit : number = 5000, objectStoreId : string | null = null) {
+    const q = ["purged", "history_content_type"];
+    const qv = ["false", "dataset"];
+
+    if (objectStoreId) {
+        q.push("object_store_id");
+        qv.push(objectStoreId);
+    }
+
     const response = await datasetsFetcher({
         history_id: historyId,
         keys: itemSizeSummaryFields,
         limit,
         order: "size-dsc",
-        q: ["purged", "history_content_type"],
-        qv: ["false", "dataset"],
+        q: q,
+        qv: qv,
     });
     return response.data as unknown as ItemSizeSummary[];
 }
diff --git a/client/src/components/User/DiskUsage/Visualizations/util.ts b/client/src/components/User/DiskUsage/Visualizations/util.ts
index cfa80d2c0cd9..56fcfeaf74eb 100644
--- a/client/src/components/User/DiskUsage/Visualizations/util.ts
+++ b/client/src/components/User/DiskUsage/Visualizations/util.ts
@@ -1,4 +1,6 @@
-import { onMounted, ref } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown,faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { computed, onMounted, ref } from "vue";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useToast } from "@/composables/toast";
@@ -8,6 +10,8 @@ import type { DataValuePoint } from "./Charts";
 import { bytesLabelFormatter, bytesValueFormatter } from "./Charts/formatters";
 import { type ItemSizeSummary, purgeDatasetById, undeleteDatasetById } from "./service";
 
+library.add(faAngleDoubleUp, faAngleDoubleDown);
+
 interface DataLoader {
     (): Promise<void>;
 }
@@ -117,3 +121,23 @@ export const byteFormattingForChart = {
     labelFormatter: bytesLabelFormatter,
     valueFormatter: bytesValueFormatter,
 };
+
+export function useAdvancedFiltering() {
+    const isAdvanced = ref<boolean>(false);
+
+    function toggleAdvanced() {
+        isAdvanced.value = !isAdvanced.value;
+    }
+
+    const inputGroupClasses = computed(() => {
+        return ["float-right", "auto"];
+    });
+
+    return {
+        faAngleDoubleUp,
+        faAngleDoubleDown,
+        isAdvanced,
+        inputGroupClasses,
+        toggleAdvanced,
+    };
+}
\ No newline at end of file

From 14fdf99ea11229e7ca0411f25b679d67164bb4d5 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 28 Mar 2024 10:56:02 -0400
Subject: [PATCH 3/5] Rename undeleteHistoryDataset for consistency.

Per PR review request.
---
 client/src/api/datasets.ts                                    | 2 +-
 .../src/components/User/DiskUsage/Visualizations/service.ts   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index 914a87a21651..703a9d30c190 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -51,7 +51,7 @@ export async function fetchDatasetDetails(params: { id: string }): Promise<Datas
 
 const updateDataset = fetcher.path("/api/datasets/{dataset_id}").method("put").create();
 
-export async function undeleteHistoryDataset(datasetId: string) {
+export async function undeleteDataset(datasetId: string) {
     const { data } = await updateDataset({
         dataset_id: datasetId,
         type: "dataset",
diff --git a/client/src/components/User/DiskUsage/Visualizations/service.ts b/client/src/components/User/DiskUsage/Visualizations/service.ts
index 79c2c78464f0..07c861572694 100644
--- a/client/src/components/User/DiskUsage/Visualizations/service.ts
+++ b/client/src/components/User/DiskUsage/Visualizations/service.ts
@@ -1,4 +1,4 @@
-import { datasetsFetcher, purgeDataset, undeleteHistoryDataset } from "@/api/datasets";
+import { datasetsFetcher, purgeDataset, undeleteDataset } from "@/api/datasets";
 import { archivedHistoriesFetcher, deleteHistory, historiesFetcher, undeleteHistory } from "@/api/histories";
 
 export interface ItemSizeSummary {
@@ -75,7 +75,7 @@ export async function purgeHistoryById(historyId: string): Promise<PurgeableItem
 }
 
 export async function undeleteDatasetById(datasetId: string): Promise<ItemSizeSummary> {
-    const data = await undeleteHistoryDataset(datasetId);
+    const data = await undeleteDataset(datasetId);
     return data as unknown as ItemSizeSummary;
 }
 

From f396634f2ba4f44e986b8ddea226e35b2df77f79 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 2 Apr 2024 11:09:41 -0400
Subject: [PATCH 4/5] Format client.

---
 .../Visualizations/HistoryStorageOverview.vue | 23 ++++++++++++-------
 .../User/DiskUsage/Visualizations/service.ts  |  6 ++++-
 .../User/DiskUsage/Visualizations/util.ts     |  4 ++--
 client/src/composables/useObjectStores.ts     |  3 +--
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
index 16a016394de4..b9271e59c458 100644
--- a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BForm, BFormGroup, BFormSelect,BInputGroup } from "bootstrap-vue";
+import { BButton, BForm, BFormGroup, BFormSelect, BInputGroup } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -10,7 +10,13 @@ import localize from "@/utils/localization";
 
 import type { DataValuePoint } from "./Charts";
 import { fetchHistoryContentsSizeSummary, type ItemSizeSummary } from "./service";
-import { buildTopNDatasetsBySizeData, byteFormattingForChart, useAdvancedFiltering,useDataLoading, useDatasetsToDisplay } from "./util";
+import {
+    buildTopNDatasetsBySizeData,
+    byteFormattingForChart,
+    useAdvancedFiltering,
+    useDataLoading,
+    useDatasetsToDisplay,
+} from "./util";
 
 import BarChart from "./Charts/BarChart.vue";
 import OverviewPage from "./OverviewPage.vue";
@@ -57,7 +63,7 @@ async function reloadDataFromServer() {
     const allDatasetsInHistorySizeSummary = await fetchHistoryContentsSizeSummary(
         props.historyId,
         numberOfDatasetsLimit,
-        objectStore.value,
+        objectStore.value
     );
     datasetsSizeSummaryMap.clear();
     allDatasetsInHistorySizeSummary.forEach((dataset) => datasetsSizeSummaryMap.set(dataset.id, dataset));
@@ -170,8 +176,7 @@ function onUndelete(datasetId: string) {
                                 id="input-group-num-histories"
                                 label="Number of histories:"
                                 label-for="input-num-histories"
-                                description="This is the maximum number of histories that will be displayed."
-                            >
+                                description="This is the maximum number of histories that will be displayed.">
                                 <BFormSelect
                                     v-model="numberOfDatasetsToDisplay"
                                     :options="numberOfDatasetsToDisplayOptions"
@@ -185,9 +190,11 @@ function onUndelete(datasetId: string) {
                                 id="input-group-object-store"
                                 label="Storage location:"
                                 label-for="input-object-store"
-                                description="This will constrain history size calculations to a particular object store."
-                            >
-                                <FilterObjectStoreLink :object-stores="selectableObjectStores" :value="objectStore" @change="onChangeObjectStore" />
+                                description="This will constrain history size calculations to a particular object store.">
+                                <FilterObjectStoreLink
+                                    :object-stores="selectableObjectStores"
+                                    :value="objectStore"
+                                    @change="onChangeObjectStore" />
                             </BFormGroup>
                         </BForm>
                     </div>
diff --git a/client/src/components/User/DiskUsage/Visualizations/service.ts b/client/src/components/User/DiskUsage/Visualizations/service.ts
index 07c861572694..4f5f7200084c 100644
--- a/client/src/components/User/DiskUsage/Visualizations/service.ts
+++ b/client/src/components/User/DiskUsage/Visualizations/service.ts
@@ -33,7 +33,11 @@ export async function fetchAllHistoriesSizeSummary(): Promise<ItemSizeSummary[]>
     return allHistoriesTakingStorageResponse;
 }
 
-export async function fetchHistoryContentsSizeSummary(historyId: string, limit : number = 5000, objectStoreId : string | null = null) {
+export async function fetchHistoryContentsSizeSummary(
+    historyId: string,
+    limit: number = 5000,
+    objectStoreId: string | null = null
+) {
     const q = ["purged", "history_content_type"];
     const qv = ["false", "dataset"];
 
diff --git a/client/src/components/User/DiskUsage/Visualizations/util.ts b/client/src/components/User/DiskUsage/Visualizations/util.ts
index 56fcfeaf74eb..58581a001190 100644
--- a/client/src/components/User/DiskUsage/Visualizations/util.ts
+++ b/client/src/components/User/DiskUsage/Visualizations/util.ts
@@ -1,5 +1,5 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faAngleDoubleDown,faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { computed, onMounted, ref } from "vue";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
@@ -140,4 +140,4 @@ export function useAdvancedFiltering() {
         inputGroupClasses,
         toggleAdvanced,
     };
-}
\ No newline at end of file
+}
diff --git a/client/src/composables/useObjectStores.ts b/client/src/composables/useObjectStores.ts
index 75efbc93f9df..e2653d5ad70c 100644
--- a/client/src/composables/useObjectStores.ts
+++ b/client/src/composables/useObjectStores.ts
@@ -3,11 +3,10 @@ import { computed } from "vue";
 
 import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
-
 export function useSelectableObjectStores() {
     const store = useObjectStoreStore();
     const { selectableObjectStores } = storeToRefs(store);
-    
+
     const hasSelectableObjectStores = computed(() => {
         return selectableObjectStores.value && selectableObjectStores.value.length > 0;
     });

From b7ec41f5848423a9ecec6c397d5b09e50974ede3 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 3 Apr 2024 13:02:58 -0400
Subject: [PATCH 5/5] Update
 client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../User/DiskUsage/Visualizations/HistoryStorageOverview.vue     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
index b9271e59c458..e6a6dd35431b 100644
--- a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
@@ -59,7 +59,6 @@ function onChangeObjectStore(value: string | null) {
 }
 
 async function reloadDataFromServer() {
-    console.log("reloading with " + objectStore.value);
     const allDatasetsInHistorySizeSummary = await fetchHistoryContentsSizeSummary(
         props.historyId,
         numberOfDatasetsLimit,