Git add --update fix...

Author: charles-turner-1

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/__tests__/MultipleCellMethodsWarning.spec.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MultipleCellMethodsWarning from '../MultipleCellMethodsWarning.vue';
+
+describe('MultipleCellMethodsWarning', () => {
+  // Helper to create wrapper
+  const createWrapper = (props: any) => {
+    return mount(MultipleCellMethodsWarning, {
+      props,
+    });
+  };
+
+  // Test that the component renders when visible is true
+  it('renders warning when visible is true', () => {
+    const wrapper = createWrapper({
+      visible: true,
+    });
+
+    expect(wrapper.html()).toBeTruthy();
+    expect(wrapper.text()).toContain('Multiple Cell Methods Detected:');
+    expect(wrapper.text()).toContain('variable_cell_methods');
+    expect(wrapper.text()).toContain('to_dask()');
+  });
+
+  // Test that the component does not render when visible is false
+  it('does not render when visible is false', () => {
+    const wrapper = createWrapper({
+      visible: false,
+    });
+
+    expect(wrapper.find('.bg-orange-50').exists()).toBe(false);
+  });
+
+  // Test that warning icon is displayed
+  it('displays warning icon', () => {
+    const wrapper = createWrapper({
+      visible: true,
+    });
+
+    const icon = wrapper.find('.pi-exclamation-triangle');
+    expect(icon.exists()).toBe(true);
+  });
+
+  // Test that code elements are rendered for technical terms
+  it('renders code elements for technical terms', () => {
+    const wrapper = createWrapper({
+      visible: true,
+    });
+
+    const codeElements = wrapper.findAll('code');
+    expect(codeElements.length).toBeGreaterThanOrEqual(2);
+    expect(codeElements.some((el) => el.text().includes('variable_cell_methods'))).toBe(true);
+    expect(codeElements.some((el) => el.text().includes('to_dask()'))).toBe(true);
+  });
+
+  // Test that the component has proper styling classes
+  it('has proper warning styling classes', () => {
+    const wrapper = createWrapper({
+      visible: true,
+    });
+
+    const outerDiv = wrapper.find('div');
+    expect(outerDiv.classes()).toContain('bg-orange-50');
+    expect(outerDiv.classes()).toContain('border-orange-200');
+  });
+});