add palette support to color from source/uri helpers

Author: marekprochazka

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@molstar/molstar-components",
-  "version": "0.6.0-experimental.20",
+  "version": "0.6.0-experimental.21",
   "license": "MIT",
   "exports": {
     ".": "./src/mod.ts",

src/state-builder-ui/components/PaletteSection.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRightIcon } from 'lucide-react';
+import { Input } from '../base/input.tsx';
+import { Label } from '../base/label.tsx';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../base/select.tsx';
+import { cn } from '../lib/utils.ts';
+
+export type PaletteKind = 'categorical' | 'discrete' | 'continuous';
+
+export interface PaletteValue {
+  kind: PaletteKind;
+  colors: string;
+  missing_color: string;
+}
+
+interface PaletteSectionProps {
+  value: PaletteValue | null;
+  onChange: (value: PaletteValue | null) => void;
+}
+
+const DEFAULT_PALETTE: PaletteValue = { kind: 'categorical', colors: '', missing_color: '' };
+
+export function paletteFromParams(params: Record<string, unknown>): PaletteValue | null {
+  const p = params.palette as Record<string, unknown> | null | undefined;
+  if (!p || typeof p !== 'object') return null;
+  return {
+    kind: (p.kind as PaletteKind) ?? 'categorical',
+    colors: typeof p.colors === 'string' ? p.colors : '',
+    missing_color: typeof p.missing_color === 'string' ? p.missing_color : '',
+  };
+}
+
+export function paletteToParams(value: PaletteValue | null): Record<string, unknown> | undefined {
+  if (!value) return undefined;
+  const result: Record<string, unknown> = { kind: value.kind };
+  if (value.colors) result.colors = value.colors;
+  if (value.missing_color && value.kind === 'categorical') result.missing_color = value.missing_color;
+  return result;
+}
+
+export function PaletteSection({ value, onChange }: PaletteSectionProps) {
+  const [open, setOpen] = useState(false);
+
+  const palette = value ?? DEFAULT_PALETTE;
+
+  const handleEnable = () => {
+    if (!value) onChange(DEFAULT_PALETTE);
+    setOpen(true);
+  };
+
+  const update = (patch: Partial<PaletteValue>) => {
+    onChange({ ...palette, ...patch });
+  };
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <button type='button' className='flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground w-fit' onClick={() => { if (!value) handleEnable(); else setOpen(o => !o); }}>
+        <ChevronRightIcon className={cn('size-3 transition-transform', open && value && 'rotate-90')} />
+        Palette
+        {value && !open && <span className='text-foreground'>({value.kind})</span>}
+      </button>
+      {open && (
+        <div className='flex flex-col gap-2 pl-4 pt-1'>
+          <div className='flex gap-2 items-end'>
+            <div className='flex flex-col gap-1'>
+              <Label className='text-xs'>Kind</Label>
+              <Select value={palette.kind} onValueChange={(v) => update({ kind: v as PaletteKind })}>
+                <SelectTrigger size='sm' className='w-32'><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='categorical'>categorical</SelectItem>
+                  <SelectItem value='discrete'>discrete</SelectItem>
+                  <SelectItem value='continuous'>continuous</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className='flex flex-col gap-1 flex-1'>
+              <Label className='text-xs'>Colors <span className='text-muted-foreground font-normal'>(name or leave blank)</span></Label>
+              <Input className='h-7 text-xs font-mono' placeholder='ResidueName, Viridis, …' value={palette.colors} onChange={(e) => update({ colors: e.target.value })} />
+            </div>
+          </div>
+          {palette.kind === 'categorical' && (
+            <div className='flex flex-col gap-1 w-36'>
+              <Label className='text-xs'>Missing color <span className='text-muted-foreground font-normal'>(optional)</span></Label>
+              <Input className='h-7 text-xs font-mono' placeholder='yellow' value={palette.missing_color} onChange={(e) => update({ missing_color: e.target.value })} />
+            </div>
+          )}
+          <button type='button' className='text-xs text-muted-foreground hover:text-destructive w-fit' onClick={() => { onChange(null); setOpen(false); }}>
+            Remove palette
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/state-builder-ui/helpers/ColorFromSourceHelper.tsx

@@ -7,6 +7,7 @@ import { Label } from '../base/label.tsx';
 import type { UINode } from '../../state-builder/index.ts';
 import { NodeHelperBase } from './NodeHelperBase.tsx';
 import { FieldRemappingSection, type RemapEntry } from '../components/FieldRemappingSection.tsx';
+import { PaletteSection, paletteFromParams, paletteToParams, type PaletteValue } from '../components/PaletteSection.tsx';
 
 interface ColorFromSourceHelperProps {
   node: UINode;
@@ -18,12 +19,13 @@ interface ColorFromSourceHelperProps {
 }
 
 function initFromNode(node: UINode) {
-  const p = node.params;
+  const p = node.params as Record<string, unknown>;
   return {
     categoryName: (p.category_name as string) ?? '',
     fieldName: (p.field_name as string) ?? '',
     blockIndex: p.block_index as number | undefined,
     fieldRemapping: Object.entries((p.field_remapping as Record<string, string>) ?? {}).map(([key, value]) => ({ key, value })),
+    palette: paletteFromParams(p),
   };
 }
 
@@ -33,13 +35,15 @@ export function ColorFromSourceHelper({ node, onUpdate, open, onOpenChange, trig
   const [fieldName, setFieldName] = useState(init.fieldName);
   const [blockIndex, setBlockIndex] = useState<number | undefined>(init.blockIndex);
   const [fieldRemapping, setFieldRemapping] = useState<RemapEntry[]>(init.fieldRemapping);
+  const [palette, setPalette] = useState<PaletteValue | null>(init.palette);
 
   const handleDialogOpen = () => {
     const s = initFromNode(node);
     setCategoryName(s.categoryName);
     setFieldName(s.fieldName);
     setBlockIndex(s.blockIndex);
     setFieldRemapping(s.fieldRemapping);
+    setPalette(s.palette);
   };
 
   const handleApply = (ref: string) => {
@@ -49,6 +53,9 @@ export function ColorFromSourceHelper({ node, onUpdate, open, onOpenChange, trig
     const remapping = Object.fromEntries(fieldRemapping.filter(e => e.key).map(e => [e.key, e.value]));
     if (Object.keys(remapping).length > 0) params.field_remapping = remapping;
     else delete params.field_remapping;
+    const paletteParams = paletteToParams(palette);
+    if (paletteParams) params.palette = paletteParams;
+    else delete params.palette;
     onUpdate({ params, ...(ref ? { ref } : {}) });
   };
 
@@ -82,6 +89,7 @@ export function ColorFromSourceHelper({ node, onUpdate, open, onOpenChange, trig
               <Label className='text-xs'>Block index</Label>
               <Input className='h-7 text-xs font-mono' type='number' min='0' placeholder='optional' value={blockIndex ?? ''} onChange={(e) => setBlockIndex(e.target.value === '' ? undefined : parseInt(e.target.value))} />
             </div>
+            <PaletteSection value={palette} onChange={setPalette} />
             <FieldRemappingSection entries={fieldRemapping} onChange={setFieldRemapping} />
           </div>
         ),

src/state-builder-ui/helpers/ColorFromUriHelper.tsx

@@ -7,6 +7,7 @@ import { Label } from '../base/label.tsx';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../base/select.tsx';
 import type { UINode } from '../../state-builder/index.ts';
 import { NodeHelperBase } from './NodeHelperBase.tsx';
+import { PaletteSection, paletteFromParams, paletteToParams, type PaletteValue } from '../components/PaletteSection.tsx';
 
 interface ColorFromUriHelperProps {
   node: UINode;
@@ -25,13 +26,14 @@ const SCHEMAS = [
 ] as const;
 
 function initFromNode(node: UINode) {
-  const p = node.params;
+  const p = node.params as Record<string, unknown>;
   return {
     uri: (p.uri as string) ?? '',
     format: (p.format as string) ?? 'cif',
     schema: (p.schema as string) ?? 'all_atomic',
     categoryName: (p.category_name as string) ?? '',
     fieldName: (p.field_name as string) ?? '',
+    palette: paletteFromParams(p),
   };
 }
 
@@ -42,6 +44,7 @@ export function ColorFromUriHelper({ node, onUpdate, open, onOpenChange, trigger
   const [schema, setSchema] = useState(init.schema);
   const [categoryName, setCategoryName] = useState(init.categoryName);
   const [fieldName, setFieldName] = useState(init.fieldName);
+  const [palette, setPalette] = useState<PaletteValue | null>(init.palette);
 
   const handleDialogOpen = () => {
     const s = initFromNode(node);
@@ -50,6 +53,7 @@ export function ColorFromUriHelper({ node, onUpdate, open, onOpenChange, trigger
     setSchema(s.schema);
     setCategoryName(s.categoryName);
     setFieldName(s.fieldName);
+    setPalette(s.palette);
   };
 
   const handleApply = (ref: string) => {
@@ -61,6 +65,9 @@ export function ColorFromUriHelper({ node, onUpdate, open, onOpenChange, trigger
       category_name: categoryName || undefined,
       field_name: fieldName || undefined,
     };
+    const paletteParams = paletteToParams(palette);
+    if (paletteParams) params.palette = paletteParams;
+    else delete params.palette;
     onUpdate({ params, ...(ref ? { ref } : {}) });
   };
 
@@ -112,6 +119,7 @@ export function ColorFromUriHelper({ node, onUpdate, open, onOpenChange, trigger
                 <Input className='h-7 text-xs font-mono' placeholder='color' value={fieldName} onChange={(e) => setFieldName(e.target.value)} />
               </div>
             </div>
+            <PaletteSection value={palette} onChange={setPalette} />
           </div>
         ),
       }]}