fixed line plots for logs

Author: jamesholcombe

package-lock.json

@@ -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`}>

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

@@ -3,7 +3,7 @@ import {
   type PlotDefinition,
 } from "@common/db/schema/plot";
 
-import { scaleLinear, scaleLog, scaleOrdinal } from "@visx/scale";
+import { scaleLinear, scaleLog } from "@visx/scale";
 import { extent } from "@visx/vendor/d3-array";
 import {
   GlyphCircle,
@@ -75,9 +75,12 @@ export interface DataPoint extends Record<string, unknown> {
 export interface DataTransformationOptions {
   xColumn: string;
   yColumn?: string;
-  colorColumn?: string;
-  symbolColumn?: string;
-  lineColumn?: string;
+  colorColumns?: string[]; // Changed to array to support multiple columns
+  symbolColumns?: string[]; // Changed to array to support multiple columns
+  lineColumns?: string[]; // Changed to array to support multiple columns
+  colorSeparator?: string; // Separator for combining multiple color values
+  symbolSeparator?: string; // Separator for combining multiple symbol values
+  lineSeparator?: string; // Separator for combining multiple line values
   xAxisType?: "number" | "category";
 }
 
@@ -88,9 +91,12 @@ export function transformData(
   const {
     xColumn,
     yColumn,
-    colorColumn,
-    symbolColumn,
-    lineColumn,
+    colorColumns,
+    symbolColumns,
+    lineColumns,
+    colorSeparator = " | ",
+    symbolSeparator = " | ",
+    lineSeparator = " | ",
     xAxisType = "number",
   } = options;
 
@@ -116,52 +122,74 @@ export function transformData(
       if (xAxisType === "number" && isNaN(xValue as number)) return null;
       if (yColumn && isNaN(y as number)) return null;
 
-      // Handle abbreviation objects for color
-      let colorValue: string | undefined;
-      let colorObject:
-        | { code: string; description?: string; color?: string }
-        | undefined;
-      if (colorColumn && row[colorColumn]) {
-        if (typeof row[colorColumn] === "object" && row[colorColumn] !== null) {
-          colorObject = row[colorColumn] as {
+      // Helper function to extract value from column (handles abbreviation objects)
+      const extractColumnValue = (columnName: string): string | undefined => {
+        const value = row[columnName];
+        if (!value) return undefined;
+
+        if (typeof value === "object" && value !== null) {
+          const objectValue = value as {
             code: string;
             description?: string;
             color?: string;
           };
-          if (colorObject && colorObject.code) {
-            colorValue = colorObject.code;
+          return objectValue.code ? objectValue.code : undefined;
+        }
+        return String(value);
+      };
+
+      // Handle multiple color columns
+      let colorValue: string | undefined;
+      let colorObject:
+        | { code: string; description?: string; color?: string }
+        | undefined;
+      if (colorColumns && colorColumns.length > 0) {
+        const colorValues = colorColumns
+          .map((col) => extractColumnValue(col))
+          .filter((val) => val !== undefined);
+
+        if (colorValues.length > 0) {
+          colorValue = colorValues.join(colorSeparator);
+
+          // For color objects, use the first column that has color information
+          for (const col of colorColumns) {
+            const value = row[col];
+            if (typeof value === "object" && value !== null) {
+              const objValue = value as {
+                code: string;
+                description?: string;
+                color?: string;
+              };
+              if (objValue.color) {
+                colorObject = objValue;
+                break;
+              }
+            }
           }
-        } else {
-          colorValue = String(row[colorColumn]);
         }
       }
 
-      // Handle abbreviation objects for symbol
+      // Handle multiple symbol columns
       let symbolValue: string | undefined;
-      if (symbolColumn && row[symbolColumn]) {
-        if (
-          typeof row[symbolColumn] === "object" &&
-          row[symbolColumn] !== null
-        ) {
-          const symbolObject = row[symbolColumn] as { code: string };
-          if (symbolObject && symbolObject.code) {
-            symbolValue = symbolObject.code;
-          }
-        } else {
-          symbolValue = String(row[symbolColumn]);
+      if (symbolColumns && symbolColumns.length > 0) {
+        const symbolValues = symbolColumns
+          .map((col) => extractColumnValue(col))
+          .filter((val) => val !== undefined);
+
+        if (symbolValues.length > 0) {
+          symbolValue = symbolValues.join(symbolSeparator);
         }
       }
 
-      // Handle abbreviation objects for line
+      // Handle multiple line columns
       let lineValue: string | undefined;
-      if (lineColumn && row[lineColumn]) {
-        if (typeof row[lineColumn] === "object" && row[lineColumn] !== null) {
-          const lineObject = row[lineColumn] as { code: string };
-          if (lineObject && lineObject.code) {
-            lineValue = lineObject.code;
-          }
-        } else {
-          lineValue = String(row[lineColumn]);
+      if (lineColumns && lineColumns.length > 0) {
+        const lineValues = lineColumns
+          .map((col) => extractColumnValue(col))
+          .filter((val) => val !== undefined);
+
+        if (lineValues.length > 0) {
+          lineValue = lineValues.join(lineSeparator);
         }
       }
 
@@ -238,11 +266,12 @@ export function useFilteredData<T extends DataPoint>(points: T[]) {
 
 export function assignAbbreviationColorsAndSymbols<T extends DataPoint>(
   points: T[],
-  colorColumn?: string,
-  symbolColumn?: string,
-  lineColumn?: string,
+  colorColumns?: string[],
+  symbolColumns?: string[],
+  lineColumns?: string[],
 ): T[] {
-  if (!colorColumn && !symbolColumn && !lineColumn) return points;
+  if (!colorColumns?.length && !symbolColumns?.length && !lineColumns?.length)
+    return points;
 
   // Create color mappings that prioritize abbreviation colors
   const colorMap = new Map<string, string>();
@@ -251,12 +280,12 @@ export function assignAbbreviationColorsAndSymbols<T extends DataPoint>(
   let defaultColorIndex = 0;
 
   // Get unique colors in sorted order for consistent assignment
-  const uniqueColors = colorColumn
+  const uniqueColors = colorColumns?.length
     ? Array.from(new Set(points.map((p) => p.color).filter(Boolean))).sort()
     : [];
 
   uniqueColors.forEach((color) => {
-    if (colorColumn && color && !processedColors.has(color)) {
+    if (colorColumns?.length && color && !processedColors.has(color)) {
       processedColors.add(color);
 
       // Find the point with this color to check for abbreviation color
@@ -277,10 +306,10 @@ export function assignAbbreviationColorsAndSymbols<T extends DataPoint>(
   });
 
   // Get unique values for symbol and line columns (sorted for consistent ordering)
-  const uniqueSymbols = symbolColumn
+  const uniqueSymbols = symbolColumns?.length
     ? Array.from(new Set(points.map((p) => p.symbol).filter(Boolean))).sort()
     : [];
-  const uniqueLines = lineColumn
+  const uniqueLines = lineColumns?.length
     ? Array.from(new Set(points.map((p) => p.line).filter(Boolean))).sort()
     : [];
 
@@ -289,7 +318,7 @@ export function assignAbbreviationColorsAndSymbols<T extends DataPoint>(
   let defaultSymbolIndex = 0;
 
   uniqueSymbols.forEach((symbol) => {
-    if (symbolColumn && symbol) {
+    if (symbolColumns?.length && symbol) {
       symbolMap.set(
         symbol,
         AVAILABLE_SYMBOLS[defaultSymbolIndex % AVAILABLE_SYMBOLS.length],
@@ -303,17 +332,17 @@ export function assignAbbreviationColorsAndSymbols<T extends DataPoint>(
   // Assign colors and symbols to points while preserving original values
   return points.map((point) => ({
     ...point,
-    ...(colorColumn &&
+    ...(colorColumns?.length &&
       point.color && {
         originalColor: point.color,
         color: colorMap.get(point.color) || OBSERVABLE_COLORS[0],
       }),
-    ...(symbolColumn &&
+    ...(symbolColumns?.length &&
       point.symbol && {
         originalSymbol: point.symbol,
         symbol: symbolMap.get(point.symbol),
       }),
-    ...(lineColumn &&
+    ...(lineColumns?.length &&
       point.line && {
         originalLine: point.line,
         line: lineMap.get(point.line),

packages/app/src/components/data/plot/plots/common.tsx

@@ -106,7 +106,7 @@ function BaseHistogramPlot({
 
   // Group data by color if grouping is enabled
   const colorGroups = new Map<string, DataPoint[]>();
-  if (grouping?.color) {
+  if (grouping?.color?.columns?.length) {
     // First pass: collect all unique colors
     const uniqueColors = Array.from(
       new Set(data.map((d) => String(d.originalColor || ""))),