Fix/log plot

packages/app/src/components/data/plot/form/grouping-form.tsx

@@ -4,6 +4,8 @@ import { useFormContext } from "react-hook-form";
 import { Input } from "@/components/ui/input";
 import { LabelWithBadge } from "./label-badge";
 import AutoComplete from "@/components/ui/auto-complete";
+import { Badge } from "@/components/ui/badge";
+import { X } from "lucide-react";
 import { type PlotDefinition } from "@common/db/schema/plot";
 import { isDefined } from "@/utils/helpers";
 import {
@@ -42,15 +44,17 @@ export function GroupingForm({
     label: column.label,
   }));
 
-  const handleColumnChange = async (value: string | null) => {
-    const newValue = isDefined(value)
-      ? {
-          ...currentValue,
-          column: value,
-          showInLegend: currentValue?.showInLegend ?? true,
-          schemeType: name === "color" ? "categorical" : undefined,
-        }
-      : null;
+  const handleMultiColumnChange = async (columns: string[]) => {
+    const newValue =
+      columns.length > 0
+        ? {
+            ...currentValue,
+            columns: columns,
+            showInLegend: currentValue?.showInLegend ?? true,
+            schemeType: name === "color" ? "categorical" : undefined,
+            separator: currentValue?.separator ?? " | ",
+          }
+        : null;
     setValue(`grouping.${name}`, newValue, {
       shouldDirty: true,
       shouldTouch: true,
@@ -59,6 +63,16 @@ export function GroupingForm({
     handleSubmit(onSubmit)();
   };
 
+  const handleSeparatorChange = async (separator: string) => {
+    if (currentValue?.columns?.length) {
+      setValue(`grouping.${name}.separator`, separator, {
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+      handleSubmit(onSubmit)();
+    }
+  };
+
   const handleShowInLegendChange = async (value: boolean) => {
     setValue(`grouping.${name}.showInLegend`, value, {
       shouldDirty: true,
@@ -84,19 +98,59 @@ export function GroupingForm({
       <div className="grid grid-cols-2 gap-6">
         <div className="col-span-2 space-y-2">
           <LabelWithBadge
-            description={`Group data points by ${name} based on a column's values`}
+            description={`Group data points by ${name} based on one or more column values`}
           >
-            Column
+            Columns
           </LabelWithBadge>
+
+          {/* Selected columns display */}
+          {currentValue?.columns && currentValue.columns.length > 0 && (
+            <div className="mb-2 flex flex-wrap gap-2">
+              {currentValue.columns.map((col, index) => {
+                const column = availableColumns.find((c) => c.name === col);
+                return (
+                  <Badge
+                    key={index}
+                    variant="secondary"
+                    className="flex items-center gap-1"
+                  >
+                    {column?.label || col}
+                    <X
+                      className="h-3 w-3 cursor-pointer hover:text-destructive"
+                      onClick={() => {
+                        const newColumns = currentValue.columns!.filter(
+                          (_, i) => i !== index,
+                        );
+                        handleMultiColumnChange(newColumns);
+                      }}
+                    />
+                  </Badge>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Add new column */}
           <AutoComplete
-            options={columnOptions}
-            selectedOption={currentValue?.column ?? null}
-            setSelectedOption={handleColumnChange}
+            options={columnOptions.filter(
+              (opt) => !currentValue?.columns?.includes(opt.value),
+            )}
+            selectedOption={null}
+            setSelectedOption={(value) => {
+              if (value) {
+                const currentColumns = currentValue?.columns || [];
+                handleMultiColumnChange([...currentColumns, value]);
+              }
+            }}
             label=""
-            showClearButton={true}
+            showClearButton={false}
             popoverClassName="w-[300px]"
             triggerClassName="max-w-[200px]"
-            placeholder="Select column"
+            placeholder={
+              currentValue?.columns?.length
+                ? "Add another column"
+                : "Select first column"
+            }
           />
         </div>
 
@@ -111,6 +165,23 @@ export function GroupingForm({
             />
           </div>
         )}
+        {isDefined(currentValue) &&
+          currentValue?.columns &&
+          currentValue.columns.length > 1 && (
+            <div className="space-y-2">
+              <LabelWithBadge
+                description={`Separator used to combine multiple ${name} values`}
+              >
+                Separator
+              </LabelWithBadge>
+              <Input
+                placeholder=" | "
+                value={currentValue?.separator ?? " | "}
+                onChange={(e) => handleSeparatorChange(e.target.value)}
+              />
+            </div>
+          )}
+
         {isDefined(currentValue) && (
           <div className="space-y-2">
             <LabelWithBadge description={`Show the ${name} in the legend`}>