Merge pull request #3 from node-red/feature/comparison-mode

feat: add comparison mode for side-by-side segment analysis

Author: dimitrieh

public/node_red_survey.duckdb

@@ -2,9 +2,10 @@ import { useState, useCallback, memo } from 'react';
 import {
   serializeFiltersToURL,
   getFullURLWithFiltersState,
+  getFullURLWithComparisonState,
   generateSectionId,
 } from '../utils/url-utils';
-import { useFilters } from '../contexts/FilterContext';
+import { useFilters, useComparison } from '../contexts/FilterContext';
 import Tooltip from './Tooltip';
 import { getTooltipPosition } from '../utils/tooltip-utils';
 
@@ -24,6 +25,8 @@ const ChartHeader = ({ title, compact = false, className }) => {
 
   // Get filters from context - this is the source of truth
   const filters = useFilters();
+  // Get comparison state from context
+  const { comparisonMode, filtersA, filtersB } = useComparison();
   const sectionId = generateSectionId(title);
 
   const handleAnchorClick = useCallback((e) => {
@@ -32,19 +35,30 @@ const ChartHeader = ({ title, compact = false, className }) => {
 
     if (!sectionId) return;
 
+    let newHash, fullUrl;
+
+    if (comparisonMode) {
+      // Comparison mode - include both filter sets
+      const comparisonState = { comparisonMode: true, filtersA, filtersB };
+      newHash = serializeFiltersToURL(null, sectionId, comparisonState);
+      fullUrl = getFullURLWithComparisonState(comparisonState, sectionId);
+    } else {
+      // Normal mode
+      newHash = serializeFiltersToURL(filters, sectionId);
+      fullUrl = getFullURLWithFiltersState(filters, sectionId);
+    }
+
     // Build hash from React state (source of truth, not potentially stale URL)
-    const newHash = serializeFiltersToURL(filters, sectionId);
     window.history.pushState(null, '', newHash);
 
     // Copy full URL with current filters from React state
-    const fullUrl = getFullURLWithFiltersState(filters, sectionId);
     navigator.clipboard.writeText(fullUrl).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     }).catch(() => {
       // Fallback: just update the hash without clipboard notification
     });
-  }, [sectionId, filters]);
+  }, [sectionId, filters, comparisonMode, filtersA, filtersB]);
 
   const handleMouseEnter = useCallback((e) => {
     if (!copied) {

src/App.jsx

@@ -107,7 +107,7 @@ const ChoroplethMap = ({ questionId, questionTitle, filters, _color, wasmService
   // Once we have data, keep showing it while loading new filtered data
   if (loading && data.length === 0) {
     return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-300 flex">
+      <div className="bg-white rounded-[5px] overflow-hidden shadow-sm border border-gray-300 flex">
         <div className="flex items-center justify-center w-8 min-w-[32px] text-sm text-gray-600 bg-gray-100 border-r border-gray-300">
           <svg
             width="20"
@@ -135,7 +135,7 @@ const ChoroplethMap = ({ questionId, questionTitle, filters, _color, wasmService
 
   if (error) {
     return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-300 flex">
+      <div className="bg-white rounded-[5px] overflow-hidden shadow-sm border border-gray-300 flex">
         <div className="flex items-center justify-center w-8 min-w-[32px] text-sm text-gray-600 bg-gray-100 border-r border-gray-300">
           <svg
             width="20"

src/components/ChartHeader.jsx

@@ -0,0 +1,46 @@
+import { memo } from 'react';
+
+/**
+ * Wrapper component for comparison mode.
+ * Renders the same chart component twice side-by-side with different filter configurations.
+ *
+ * @param {Object} props
+ * @param {React.ComponentType} props.ChartComponent - The chart component to render
+ * @param {Object} props.chartProps - Props to pass to the chart component (excluding filters)
+ * @param {Object} props.filtersA - Filter configuration for column A
+ * @param {Object} props.filtersB - Filter configuration for column B
+ */
+const ComparisonChartWrapper = (props) => {
+  const {
+    ChartComponent,
+    chartProps,
+    filtersA,
+    filtersB,
+  } = props;
+
+  return (
+    <div className="flex gap-4">
+      {/* Column A */}
+      <div className="flex-1 min-w-[500px]">
+        <div className="border-l-2 border-blue-500 pl-3 relative">
+          <span className="absolute -top-5 -left-px -translate-x-1/2 inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-500 text-white text-xs font-bold">
+            A
+          </span>
+          <ChartComponent {...chartProps} filters={filtersA} />
+        </div>
+      </div>
+
+      {/* Column B */}
+      <div className="flex-1 min-w-[500px]">
+        <div className="border-l-2 border-orange-500 pl-3 relative">
+          <span className="absolute -top-5 -left-px -translate-x-1/2 inline-flex items-center justify-center w-5 h-5 rounded-full bg-orange-500 text-white text-xs font-bold">
+            B
+          </span>
+          <ChartComponent {...chartProps} filters={filtersB} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ComparisonChartWrapper);