matterviz 0.3.1 → 0.3.3

package/dist/plot/ScatterPlot3DControls.svelte

@@ -1,61 +1,133 @@
-<script lang="ts">// NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
-// Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
-import { SettingsSection } from '../layout';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-// Unique ID prefix to avoid conflicts when multiple instances on same page
-const uid = crypto.randomUUID().slice(0, 8);
-let { x_axis = $bindable({}), y_axis = $bindable({}), z_axis = $bindable({}), display = $bindable({}), camera_projection = $bindable(`perspective`), auto_rotate = $bindable(0), series = [], surfaces = [], toggle_props, pane_props, children, } = $props();
-// Calculate auto ranges for reset
-function calc_auto_range(values) {
-    if (values.length === 0)
-        return [0, 1];
-    let [min_val, max_val] = [values[0], values[0]];
+<script lang="ts">
+  // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
+  // Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
+  import { SettingsSection } from '../layout'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type {
+    AxisConfig3D,
+    CameraProjection3D,
+    DataSeries3D,
+    DisplayConfig3D,
+    Surface3DConfig,
+  } from './types'
+  import type { ComponentProps, Snippet } from 'svelte'
+
+  // Unique ID prefix to avoid conflicts when multiple instances on same page
+  const uid = crypto.randomUUID().slice(0, 8)
+
+  let {
+    show = $bindable(false),
+    x_axis = $bindable({}),
+    y_axis = $bindable({}),
+    z_axis = $bindable({}),
+    display = $bindable({}),
+    camera_projection = $bindable(`perspective`),
+    auto_rotate = $bindable(0),
+    series = [],
+    surfaces = [],
+    toggle_props,
+    pane_props,
+    children,
+  }: {
+    show?: boolean
+    x_axis?: AxisConfig3D
+    y_axis?: AxisConfig3D
+    z_axis?: AxisConfig3D
+    display?: DisplayConfig3D
+    camera_projection?: CameraProjection3D
+    auto_rotate?: number
+    series?: DataSeries3D[]
+    surfaces?: Surface3DConfig[]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    children?: Snippet
+  } = $props()
+
+  // Calculate auto ranges for reset
+  function calc_auto_range(values: number[]): [number, number] {
+    if (values.length === 0) return [0, 1]
+    let [min_val, max_val] = [values[0], values[0]]
     for (const v of values) {
-        if (v < min_val)
-            min_val = v;
-        else if (v > max_val)
-            max_val = v;
+      if (v < min_val) min_val = v
+      else if (v > max_val) max_val = v
     }
-    const padding = (max_val - min_val) * 0.05 || 0.5;
-    return [min_val - padding, max_val + padding];
-}
-// flatMap already creates new array, no need to spread
-let all_x_values = $derived(series.flatMap((srs) => srs.x));
-let all_y_values = $derived(series.flatMap((srs) => srs.y));
-let all_z_values = $derived(series.flatMap((srs) => srs.z));
-let auto_x_range = $derived(calc_auto_range(all_x_values));
-let auto_y_range = $derived(calc_auto_range(all_y_values));
-let auto_z_range = $derived(calc_auto_range(all_z_values));
-// Helper to extract input value from event - DRYs up event handler casts
-const get_input_value = (event) => event.target.value;
-// Helpers to update display properties - avoids verbose inline handlers
-const update_display = (key) => (event) => {
-    const parsed = parseFloat(get_input_value(event));
+    const padding = (max_val - min_val) * 0.05 || 0.5
+    return [min_val - padding, max_val + padding]
+  }
+
+  // flatMap already creates new array, no need to spread
+  let all_x_values = $derived(series.flatMap((srs) => srs.x))
+  let all_y_values = $derived(series.flatMap((srs) => srs.y))
+  let all_z_values = $derived(series.flatMap((srs) => srs.z))
+
+  let auto_x_range = $derived(calc_auto_range(all_x_values))
+  let auto_y_range = $derived(calc_auto_range(all_y_values))
+  let auto_z_range = $derived(calc_auto_range(all_z_values))
+
+  // Helper to extract input value from event - DRYs up event handler casts
+  const get_input_value = (event: Event) => (event.target as HTMLInputElement).value
+
+  // Helpers to update display properties - avoids verbose inline handlers
+  const update_display = (key: keyof DisplayConfig3D) => (event: Event) => {
+    const parsed = parseFloat(get_input_value(event))
     // Guard against NaN when input is cleared - preserve existing value
-    if (!Number.isNaN(parsed))
-        display = { ...display, [key]: parsed };
-};
-const toggle_display = (key) => () => {
-    display = { ...display, [key]: !display[key] };
-};
-const toggle_projection = (plane) => () => {
+    if (!Number.isNaN(parsed)) display = { ...display, [key]: parsed }
+  }
+  const toggle_display = (key: keyof DisplayConfig3D) => () => {
+    display = { ...display, [key]: !display[key] }
+  }
+  const toggle_projection = (plane: `xy` | `xz` | `yz`) => () => {
     display = {
-        ...display,
-        projections: { ...display.projections, [plane]: !display.projections?.[plane] },
-    };
-};
-// Helper for axis label updates
-const update_axis_label = (axis, setter) => (event) => {
-    setter({ ...axis, label: get_input_value(event) });
-};
+      ...display,
+      projections: { ...display.projections, [plane]: !display.projections?.[plane] },
+    }
+  }
+
+  // Round to 4 decimal places for display
+  const round4 = (val: number) => Math.round(val * 1e4) / 1e4
+
+  // Helper for axis label updates
+  const update_axis_label =
+    <T extends { label?: string }>(axis: T, setter: (val: T) => void) =>
+    (event: Event) => {
+      setter({ ...axis, label: get_input_value(event) })
+    }
+
+  type AxisEntry = {
+    name: string
+    axis: AxisConfig3D
+    auto_range: [number, number]
+    set: (val: AxisConfig3D) => void
+  }
+  const axes = $derived<AxisEntry[]>([
+    {
+      name: `X`,
+      axis: x_axis,
+      auto_range: auto_x_range,
+      set: (val) => (x_axis = val),
+    },
+    {
+      name: `Y`,
+      axis: y_axis,
+      auto_range: auto_y_range,
+      set: (val) => (y_axis = val),
+    },
+    {
+      name: `Z`,
+      axis: z_axis,
+      auto_range: auto_z_range,
+      set: (val) => (z_axis = val),
+    },
+  ])
 </script>
 
 <DraggablePane
+  bind:show
   {toggle_props}
   pane_props={{
     title: `3D Plot Settings`,
     ...pane_props,
-    style: `max-height: 80cqh; overflow-y: auto; ${pane_props?.style ?? ``}`,
+    style: `--pane-max-height: 80cqh; ${pane_props?.style ?? ``}`,
   }}
 >
   <!-- Camera Controls -->
@@ -138,263 +210,160 @@ const update_axis_label = (axis, setter) => (event) => {
     </label>
   </SettingsSection>
 
-  <!-- Projections -->
+  <!-- Projections: only when there's data to project -->
+  {#if series.length > 0}
+    <SettingsSection
+      title="Projections"
+      current_values={{
+        xy: display.projections?.xy,
+        xz: display.projections?.xz,
+        yz: display.projections?.yz,
+        opacity: display.projection_opacity,
+        scale: display.projection_scale,
+      }}
+      on_reset={() => {
+        display = {
+          ...display,
+          projections: { xy: false, xz: false, yz: false },
+          projection_opacity: 0.3,
+          projection_scale: 0.5,
+        }
+      }}
+    >
+      <div style="display: flex; flex-wrap: wrap; gap: 1ex">
+        <label>
+          <input
+            type="checkbox"
+            checked={display.projections?.xy}
+            onchange={toggle_projection(`xy`)}
+          /> XY
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={display.projections?.xz}
+            onchange={toggle_projection(`xz`)}
+          /> XZ
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={display.projections?.yz}
+            onchange={toggle_projection(`yz`)}
+          /> YZ
+        </label>
+      </div>
+      <div class="pane-row">
+        <label for="{uid}-proj-opacity">Opacity:</label>
+        <input
+          id="{uid}-proj-opacity"
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          value={display.projection_opacity ?? 0.3}
+          oninput={update_display(`projection_opacity`)}
+        />
+        <input
+          type="number"
+          min="0"
+          max="1"
+          step="0.05"
+          value={display.projection_opacity ?? 0.3}
+          oninput={update_display(`projection_opacity`)}
+          style="width: 3.5em"
+        />
+      </div>
+      <div class="pane-row">
+        <label for="{uid}-proj-scale">Size:</label>
+        <input
+          id="{uid}-proj-scale"
+          type="range"
+          min="0.1"
+          max="1"
+          step="0.05"
+          value={display.projection_scale ?? 0.5}
+          oninput={update_display(`projection_scale`)}
+        />
+        <input
+          type="number"
+          min="0.1"
+          max="1"
+          step="0.05"
+          value={display.projection_scale ?? 0.5}
+          oninput={update_display(`projection_scale`)}
+          style="width: 3.5em"
+        />
+      </div>
+    </SettingsSection>
+  {/if}
+
+  <!-- Axes (merged X/Y/Z) -->
   <SettingsSection
-    title="Projections"
+    title="Axes"
     current_values={{
-      xy: display.projections?.xy,
-      xz: display.projections?.xz,
-      yz: display.projections?.yz,
-      opacity: display.projection_opacity,
-      scale: display.projection_scale,
+      x_range: x_axis.range,
+      y_range: y_axis.range,
+      z_range: z_axis.range,
     }}
     on_reset={() => {
-      display = {
-        ...display,
-        projections: { xy: false, xz: false, yz: false },
-        projection_opacity: 0.3,
-        projection_scale: 0.5,
-      }
+      x_axis = { ...x_axis, range: [null, null] }
+      y_axis = { ...y_axis, range: [null, null] }
+      z_axis = { ...z_axis, range: [null, null] }
     }}
   >
-    <div style="display: flex; flex-wrap: wrap; gap: 1ex">
-      <label>
+    {#each axes as { name, axis, auto_range, set } (name)}
+      <div class="axis-row">
+        <span class="axis-name">{name}</span>
         <input
-          type="checkbox"
-          checked={display.projections?.xy}
-          onchange={toggle_projection(`xy`)}
-        /> XY
-      </label>
-      <label>
+          type="text"
+          value={axis.label}
+          oninput={update_axis_label(axis, set)}
+          placeholder="{name} label"
+          aria-label="{name} label"
+          class="axis-label-input"
+        />
         <input
-          type="checkbox"
-          checked={display.projections?.xz}
-          onchange={toggle_projection(`xz`)}
-        /> XZ
-      </label>
-      <label>
+          type="number"
+          step="any"
+          value={round4(axis.range?.[0] ?? auto_range[0])}
+          oninput={(event) => {
+            const val = parseFloat((event.target as HTMLInputElement).value)
+            if (Number.isNaN(val)) return
+            set({ ...axis, range: [val, axis.range?.[1] ?? auto_range[1]] })
+          }}
+          aria-label="{name} min"
+          class="axis-range-input"
+        />
+        <span class="axis-to">–</span>
         <input
-          type="checkbox"
-          checked={display.projections?.yz}
-          onchange={toggle_projection(`yz`)}
-        /> YZ
-      </label>
-    </div>
-    <div class="pane-row">
-      <label for="{uid}-proj-opacity">Opacity:</label>
-      <input
-        id="{uid}-proj-opacity"
-        type="range"
-        min="0"
-        max="1"
-        step="0.05"
-        value={display.projection_opacity ?? 0.3}
-        oninput={update_display(`projection_opacity`)}
-      />
-      <input
-        type="number"
-        min="0"
-        max="1"
-        step="0.05"
-        value={display.projection_opacity ?? 0.3}
-        oninput={update_display(`projection_opacity`)}
-        style="width: 3.5em"
-      />
-    </div>
-    <div class="pane-row">
-      <label for="{uid}-proj-scale">Size:</label>
-      <input
-        id="{uid}-proj-scale"
-        type="range"
-        min="0.1"
-        max="1"
-        step="0.05"
-        value={display.projection_scale ?? 0.5}
-        oninput={update_display(`projection_scale`)}
-      />
-      <input
-        type="number"
-        min="0.1"
-        max="1"
-        step="0.05"
-        value={display.projection_scale ?? 0.5}
-        oninput={update_display(`projection_scale`)}
-        style="width: 3.5em"
-      />
-    </div>
-  </SettingsSection>
-
-  <!-- X Axis Range -->
-  <SettingsSection
-    title="X Axis"
-    current_values={{ range: x_axis.range }}
-    on_reset={() => (x_axis = { ...x_axis, range: [null, null] })}
-  >
-    <div class="pane-row">
-      <label for="{uid}-x-label">Label:</label>
-      <input
-        id="{uid}-x-label"
-        type="text"
-        value={x_axis.label}
-        oninput={update_axis_label(x_axis, (val) => (x_axis = val))}
-        placeholder="X"
-      />
-    </div>
-    <div class="pane-row">
-      <label for="{uid}-x-range-min">Range:</label>
-      <input
-        id="{uid}-x-range-min"
-        type="number"
-        step="any"
-        value={x_axis.range?.[0] ?? auto_x_range[0]}
-        oninput={(event) => {
-          const val = parseFloat((event.target as HTMLInputElement).value)
-          if (Number.isNaN(val)) return
-          x_axis = {
-            ...x_axis,
-            range: [val, x_axis.range?.[1] ?? auto_x_range[1]],
-          }
-        }}
-      />
-      <span>to</span>
-      <input
-        id="{uid}-x-range-max"
-        type="number"
-        step="any"
-        value={x_axis.range?.[1] ?? auto_x_range[1]}
-        oninput={(event) => {
-          const val = parseFloat((event.target as HTMLInputElement).value)
-          if (Number.isNaN(val)) return
-          x_axis = {
-            ...x_axis,
-            range: [x_axis.range?.[0] ?? auto_x_range[0], val],
-          }
-        }}
-      />
-    </div>
-  </SettingsSection>
-
-  <!-- Y Axis Range -->
-  <SettingsSection
-    title="Y Axis"
-    current_values={{ range: y_axis.range }}
-    on_reset={() => (y_axis = { ...y_axis, range: [null, null] })}
-  >
-    <div class="pane-row">
-      <label for="{uid}-y-label">Label:</label>
-      <input
-        id="{uid}-y-label"
-        type="text"
-        value={y_axis.label}
-        oninput={update_axis_label(y_axis, (val) => (y_axis = val))}
-        placeholder="Y"
-      />
-    </div>
-    <div class="pane-row">
-      <label for="{uid}-y-range-min">Range:</label>
-      <input
-        id="{uid}-y-range-min"
-        type="number"
-        step="any"
-        value={y_axis.range?.[0] ?? auto_y_range[0]}
-        oninput={(event) => {
-          const val = parseFloat((event.target as HTMLInputElement).value)
-          if (Number.isNaN(val)) return
-          y_axis = {
-            ...y_axis,
-            range: [val, y_axis.range?.[1] ?? auto_y_range[1]],
-          }
-        }}
-      />
-      <span>to</span>
-      <input
-        id="{uid}-y-range-max"
-        type="number"
-        step="any"
-        value={y_axis.range?.[1] ?? auto_y_range[1]}
-        oninput={(event) => {
-          const val = parseFloat((event.target as HTMLInputElement).value)
-          if (Number.isNaN(val)) return
-          y_axis = {
-            ...y_axis,
-            range: [y_axis.range?.[0] ?? auto_y_range[0], val],
-          }
-        }}
-      />
-    </div>
+          type="number"
+          step="any"
+          value={round4(axis.range?.[1] ?? auto_range[1])}
+          oninput={(event) => {
+            const val = parseFloat((event.target as HTMLInputElement).value)
+            if (Number.isNaN(val)) return
+            set({ ...axis, range: [axis.range?.[0] ?? auto_range[0], val] })
+          }}
+          aria-label="{name} max"
+          class="axis-range-input"
+        />
+      </div>
+    {/each}
   </SettingsSection>
 
-  <!-- Z Axis Range -->
-  <SettingsSection
-    title="Z Axis"
-    current_values={{ range: z_axis.range }}
-    on_reset={() => (z_axis = { ...z_axis, range: [null, null] })}
-  >
-    <div class="pane-row">
-      <label for="{uid}-z-label">Label:</label>
-      <input
-        id="{uid}-z-label"
-        type="text"
-        value={z_axis.label}
-        oninput={update_axis_label(z_axis, (val) => (z_axis = val))}
-        placeholder="Z"
-      />
-    </div>
-    <div class="pane-row">
-      <label for="{uid}-z-range-min">Range:</label>
-      <input
-        id="{uid}-z-range-min"
-        type="number"
-        step="any"
-        value={z_axis.range?.[0] ?? auto_z_range[0]}
-        oninput={(event) => {
-          const val = parseFloat((event.target as HTMLInputElement).value)
-          if (Number.isNaN(val)) return
-          z_axis = {
-            ...z_axis,
-            range: [val, z_axis.range?.[1] ?? auto_z_range[1]],
-          }
-        }}
-      />
-      <span>to</span>
-      <input
-        id="{uid}-z-range-max"
-        type="number"
-        step="any"
-        value={z_axis.range?.[1] ?? auto_z_range[1]}
-        oninput={(event) => {
-          const val = parseFloat((event.target as HTMLInputElement).value)
-          if (Number.isNaN(val)) return
-          z_axis = {
-            ...z_axis,
-            range: [z_axis.range?.[0] ?? auto_z_range[0], val],
-          }
-        }}
-      />
+  <!-- Data summary: only when there's data -->
+  {#if series.length > 0 || surfaces.length > 0}
+    <div class="data-summary">
+      {#if series.length > 0}
+        <span>{series.length} series · {
+            series.reduce((sum, srs) => sum + srs.x.length, 0).toLocaleString()
+          } points</span>
+      {/if}
+      {#if surfaces.length > 0}
+        <span>{surfaces.length} {surfaces.length === 1 ? `surface` : `surfaces`}</span>
+      {/if}
     </div>
-  </SettingsSection>
-
-  <!-- Series Info -->
-  {#if series.length > 0}
-    <SettingsSection title="Data" current_values={{ series_count: series.length }}>
-      <div class="pane-row">
-        <span>Series: {series.length}</span>
-      </div>
-      <div class="pane-row">
-        <span>
-          Points: {series.reduce((sum, srs) => sum + srs.x.length, 0).toLocaleString()}
-        </span>
-      </div>
-    </SettingsSection>
-  {/if}
-
-  <!-- Surfaces Info -->
-  {#if surfaces.length > 0}
-    <SettingsSection title="Surfaces" current_values={{ surface_count: surfaces.length }}>
-      <div class="pane-row">
-        <span>Surfaces: {surfaces.length}</span>
-      </div>
-    </SettingsSection>
   {/if}
 
   <!-- User-provided children -->
@@ -416,10 +385,6 @@ const update_axis_label = (axis, setter) => (event) => {
   .pane-row input[type='number'] {
     width: 5em;
   }
-  .pane-row input[type='text'] {
-    flex: 1;
-    min-width: 0;
-  }
   .pane-row input[type='range'] {
     flex: 1;
     min-width: 4em;
@@ -428,7 +393,45 @@ const update_axis_label = (axis, setter) => (event) => {
     flex: 1;
     min-width: 0;
   }
-  .pane-row span {
+  .axis-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 2px 0;
+    font-size: 0.9em;
+  }
+  .axis-row input {
+    box-sizing: border-box;
+    height: 1.4em;
+    padding: 0 3px;
+    font-size: inherit;
+    line-height: 1;
+  }
+  .axis-name {
+    font-weight: 600;
+    width: 1.2em;
     flex-shrink: 0;
   }
+  .axis-label-input {
+    width: 6em;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+  .axis-range-input {
+    width: 7em;
+    flex: 1;
+    min-width: 5em;
+  }
+  .axis-to {
+    flex-shrink: 0;
+    opacity: 0.5;
+  }
+  .data-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ex;
+    font-size: 0.85em;
+    opacity: 0.7;
+    margin-top: 4px;
+  }
 </style>

package/dist/plot/ScatterPlot3DControls.svelte.d.ts

@@ -2,6 +2,7 @@ import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AxisConfig3D, CameraProjection3D, DataSeries3D, DisplayConfig3D, Surface3DConfig } from './types';
 import type { ComponentProps, Snippet } from 'svelte';
 type $$ComponentProps = {
+    show?: boolean;
     x_axis?: AxisConfig3D;
     y_axis?: AxisConfig3D;
     z_axis?: AxisConfig3D;
@@ -14,6 +15,6 @@ type $$ComponentProps = {
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     children?: Snippet;
 };
-declare const ScatterPlot3DControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x_axis" | "y_axis" | "camera_projection" | "auto_rotate" | "z_axis">;
+declare const ScatterPlot3DControls: import("svelte").Component<$$ComponentProps, {}, "display" | "show" | "x_axis" | "y_axis" | "camera_projection" | "auto_rotate" | "z_axis">;
 type ScatterPlot3DControls = ReturnType<typeof ScatterPlot3DControls>;
 export default ScatterPlot3DControls;