Add big orange warning for multiple dataset detection (#92)

* Add big organge warning for multiple dataset detection

* Git add --update fix...

Author: charles-turner-1

src/components/DatastoreDetail.vue

@@ -82,13 +82,14 @@
           :datastore-name="datastoreName"
           :current-filters="currentFilters"
           :raw-data="filteredData"
+          :dynamic-filter-options="dynamicFilterOptions"
           class="mb-6"
         />
 
         <FilterSelectors
           v-model="currentFilters"
           :filter-options="filterOptions"
-          :raw-data="rawData"
+          :dynamic-filter-options="dynamicFilterOptions"
           @clear="clearFilters"
         />
 
@@ -168,6 +169,45 @@ const filteredData = computed(() => {
   return data;
 });
 
+const dynamicFilterOptions = computed(() => {
+  const result: Record<string, string[]> = {};
+
+  for (const [column, allOptions] of Object.entries(filterOptions.value)) {
+    let availableData = rawData.value;
+
+    // Apply all OTHER active filters (not the current column)
+    for (const [filterColumn, filterValues] of Object.entries(currentFilters.value)) {
+      if (filterColumn !== column && filterValues && filterValues.length > 0) {
+        availableData = availableData.filter((row: Record<string, any>) => {
+          const cellValue = row[filterColumn];
+          return filterValues.some((fv) => {
+            if (Array.isArray(cellValue))
+              return cellValue.some((it: any) => String(it).toLowerCase().includes(fv.toLowerCase()));
+            return String(cellValue || '')
+              .toLowerCase()
+              .includes(fv.toLowerCase());
+          });
+        });
+      }
+    }
+
+    // Find which options from this column exist in the filtered data
+    const validOptions = new Set<string>();
+    for (const row of availableData) {
+      const cellValue = row[column];
+      if (Array.isArray(cellValue)) {
+        cellValue.forEach((val: any) => validOptions.add(String(val)));
+      } else if (cellValue !== null && cellValue !== undefined) {
+        validOptions.add(String(cellValue));
+      }
+    }
+
+    result[column] = allOptions.filter((option) => validOptions.has(option));
+  }
+
+  return result;
+});
+
 const loadDatastore = async () => {
   const existingCache = catalogStore.getDatastoreFromCache(datastoreName.value);
   if (existingCache && existingCache.data.length > 0) {

src/components/FilterSelectors.vue

@@ -7,7 +7,7 @@
         <MultiSelect
           :model-value="modelValue[column]"
           @update:model-value="updateFilter(column, $event)"
-          :options="dynamicFilterOptions[column] || options"
+          :options="props.dynamicFilterOptions[column] || options"
           display="chip"
           class="w-full"
           filter
@@ -23,14 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import Button from 'primevue/button';
 import MultiSelect from 'primevue/multiselect';
 
 interface Props {
   filterOptions: Record<string, string[]>;
   modelValue: Record<string, string[]>;
-  rawData: Array<Record<string, any>>;
+  dynamicFilterOptions: Record<string, string[]>;
 }
 
 interface Emits {
@@ -50,50 +49,6 @@ const formatColumnName = (c: string) =>
     })
     .join(' ');
 
-// Compute dynamic filter options based on current filter selections
-// This ensures users can't select filter combinations that result in 0 rows
-const dynamicFilterOptions = computed(() => {
-  const result: Record<string, string[]> = {};
-
-  // For each filter column, compute which options would yield results
-  for (const [column, allOptions] of Object.entries(props.filterOptions)) {
-    // Start with raw data
-    let availableData = props.rawData;
-
-    // Apply all OTHER active filters (not the current column)
-    for (const [filterColumn, filterValues] of Object.entries(props.modelValue)) {
-      if (filterColumn !== column && filterValues && filterValues.length > 0) {
-        availableData = availableData.filter((row: Record<string, any>) => {
-          const cellValue = row[filterColumn];
-          return filterValues.some((fv) => {
-            if (Array.isArray(cellValue))
-              return cellValue.some((it: any) => String(it).toLowerCase().includes(fv.toLowerCase()));
-            return String(cellValue || '')
-              .toLowerCase()
-              .includes(fv.toLowerCase());
-          });
-        });
-      }
-    }
-
-    // Now find which options from this column exist in the filtered data
-    const validOptions = new Set<string>();
-    for (const row of availableData) {
-      const cellValue = row[column];
-      if (Array.isArray(cellValue)) {
-        cellValue.forEach((val: any) => validOptions.add(String(val)));
-      } else if (cellValue !== null && cellValue !== undefined) {
-        validOptions.add(String(cellValue));
-      }
-    }
-
-    // Filter the original options to only include valid ones
-    result[column] = allOptions.filter((option) => validOptions.has(option));
-  }
-
-  return result;
-});
-
 const updateFilter = (column: string, value: string[]) => {
   const updatedFilters = { ...props.modelValue, [column]: value };
   emit('update:modelValue', updatedFilters);

src/components/MultipleCellMethodsWarning.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    v-if="visible"
+    class="mb-4 p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded"
+  >
+    <div class="flex items-center mb-2">
+      <i class="pi pi-exclamation-triangle text-orange-600 mr-2"></i>
+      <strong class="text-orange-800 dark:text-orange-200 text-sm">Multiple Cell Methods Detected:</strong>
+    </div>
+    <p class="text-orange-700 dark:text-orange-300 text-sm">
+      This dataset contains multiple variable cell methods. You will need to filter by
+      <code class="px-1 py-0.5 bg-orange-100 dark:bg-orange-900 rounded text-xs font-mono">variable_cell_methods</code>
+      to select the specific temporal aggregation you need before calling
+      <code class="px-1 py-0.5 bg-orange-100 dark:bg-orange-900 rounded text-xs font-mono">to_dask()</code>.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Component props for MultipleCellMethodsWarning.
+ *
+ * Displays a warning message when a single dataset has multiple variable_cell_methods
+ * options available, indicating the user should apply additional filtering before
+ * converting to an xarray dataset.
+ */
+interface Props {
+  /**
+   * Whether to display the warning. Should be true when:
+   * - The user has filtered down to a single dataset (to_dask mode)
+   * - There are multiple options available for variable_cell_methods
+   * - xarray mode is enabled
+   */
+  visible: boolean;
+}
+
+defineProps<Props>();
+</script>

src/components/QuickStartCode.vue

@@ -20,6 +20,8 @@
 
     <RequiredProjectsWarning :projects="requiredProjects" />
 
+    <MultipleCellMethodsWarning :visible="shouldShowCellMethodsWarning" />
+
     <pre class="bg-gray-800 text-green-400 p-3 rounded text-sm overflow-x-auto"><code>{{ quickStartCode }}</code></pre>
 
     <div class="mt-3 relative inline-block">
@@ -65,6 +67,7 @@ import ToggleSwitch from 'primevue/toggleswitch';
 import Toast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
 import RequiredProjectsWarning from './RequiredProjectsWarning.vue';
+import MultipleCellMethodsWarning from './MultipleCellMethodsWarning.vue';
 import LongUrlConfirmDialog from './LongUrlConfirmDialog.vue';
 
 // Props
@@ -92,6 +95,12 @@ interface Props {
    * to be an object and may contain fields such as `path` and `file_id`.
    */
   rawData: any[];
+
+  /**
+   * Dynamic filter options for each column (filtered based on other active filters).
+   * Used to determine if there are multiple variable_cell_methods options available.
+   */
+  dynamicFilterOptions: Record<string, string[]>;
 }
 
 /** The typed props object (available in <script setup> via defineProps). */
@@ -189,6 +198,29 @@ const numDatasets = computed(() => {
   return fileIds.size;
 });
 
+/**
+ * Determine whether to show the MultipleCellMethodsWarning.
+ *
+ * The warning should be displayed when:
+ * 1. xarray mode is enabled (isXArrayMode is true)
+ * 2. User has filtered down to a single dataset (numDatasets === 1)
+ * 3. There are multiple variable_cell_methods options available in dynamicFilterOptions
+ *
+ * This indicates the user may need to further filter by variable_cell_methods
+ * before calling to_dask().
+ */
+const shouldShowCellMethodsWarning = computed((): boolean => {
+  if (!isXArrayMode.value) return false;
+  if (numDatasets.value !== 1) return false;
+
+  // Don't show warning if user has already filtered by variable_cell_methods
+  const hasFilteredCellMethods = (props.currentFilters['variable_cell_methods']?.length ?? 0) > 0;
+  if (hasFilteredCellMethods) return false;
+
+  const cellMethodsOptions = props.dynamicFilterOptions['variable_cell_methods'];
+  return !!(cellMethodsOptions && cellMethodsOptions.length > 1);
+});
+
 /**
  * Generates the quick-start Python code snippet shown to users.
  *

src/components/__tests__/DatastoreDetail.spec.ts

@@ -375,7 +375,7 @@ describe('DatastoreDetail', () => {
       frequency: ['daily', 'monthly'],
       realm: ['ocean', 'atmosphere'],
     });
-    expect(filters.props('rawData')).toEqual(mockDatastoreData);
+    expect(filters.props('dynamicFilterOptions')).toBeDefined();
 
     // Check DatastoreTable props
     const table = wrapper.findComponent({ name: 'DatastoreTable' });