matterviz 0.3.0 → 0.3.2

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

@@ -64,12 +64,12 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         selected_series_idx?: number;
         wrapper?: HTMLDivElement;
         data_loader?: DataLoaderFn<Metadata>;
-        on_axis_change?: (axis: `x` | `y` | `y2`, key: string, new_series: DataSeries<Metadata>[]) => void;
+        on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries<Metadata>[]) => void;
         on_error?: (error: AxisLoadError) => void;
         pan?: PanConfig;
     };
     exports: {};
-    bindings: "display" | "fullscreen" | "series" | "hovered" | "ref_lines" | "x_axis" | "y_axis" | "y2_axis" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
+    bindings: "display" | "series" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "hovered" | "ref_lines" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
     slots: {};
     events: {};
 };
@@ -77,7 +77,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "display" | "fullscreen" | "series" | "hovered" | "ref_lines" | "x_axis" | "y_axis" | "y2_axis" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
+    bindings(): "display" | "series" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "hovered" | "ref_lines" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -71,7 +71,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         controls_extra?: Snippet;
     };
     exports: {};
-    bindings: "fullscreen" | "hovered" | "camera_position" | "scene" | "camera" | "orbit_controls" | "wrapper" | "tooltip_point";
+    bindings: "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "scene" | "camera" | "orbit_controls";
     slots: {};
     events: {};
 };
@@ -79,7 +79,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "fullscreen" | "hovered" | "camera_position" | "scene" | "camera" | "orbit_controls" | "wrapper" | "tooltip_point";
+    bindings(): "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "scene" | "camera" | "orbit_controls";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/ScatterPlot3DControls.svelte

@@ -44,10 +44,32 @@ const toggle_projection = (plane) => () => {
         projections: { ...display.projections, [plane]: !display.projections?.[plane] },
     };
 };
+// Round to 4 decimal places for display
+const round4 = (val) => Math.round(val * 1e4) / 1e4;
 // Helper for axis label updates
 const update_axis_label = (axis, setter) => (event) => {
     setter({ ...axis, label: get_input_value(event) });
 };
+const axes = $derived([
+    {
+        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
@@ -138,263 +160,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"
-      />
+  <!-- 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>
-    <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],
-          }
-        }}
-      />
-    </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 +335,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 +343,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/ScatterPlot3DScene.svelte

@@ -11,6 +11,7 @@ import { Line2 } from 'three/examples/jsm/lines/Line2.js';
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
 import { get_series_color } from './data-transform';
+import { normalize_to_scene } from './reference-line';
 import ReferenceLine3D from './ReferenceLine3D.svelte';
 import ReferencePlane from './ReferencePlane.svelte';
 import { create_color_scale, create_size_scale } from './scales';
@@ -131,13 +132,9 @@ let z_range = $derived(compute_range([
     ...all_points.map((p) => p.z),
     ...surface_samples.map((p) => p.z),
 ], z_axis.range));
-// Normalize value to scene coordinates (centered around 0)
-function normalize(value, [min_val, max_val], scene_size) {
-    return ((value - min_val) / (max_val - min_val || 1) - 0.5) * scene_size;
-}
-const normalize_x = (v) => normalize(v, x_range, scene_x);
-const normalize_y = (v) => normalize(v, y_range, scene_y);
-const normalize_z = (v) => normalize(v, z_range, scene_z);
+const normalize_x = (value) => normalize_to_scene(value, x_range, scene_x);
+const normalize_y = (value) => normalize_to_scene(value, y_range, scene_y);
+const normalize_z = (value) => normalize_to_scene(value, z_range, scene_z);
 // Color/size scales
 let all_color_values = $derived(all_points.map((pt) => pt.color_value).filter((v) => v != null));
 let auto_color_range = $derived.by(() => {

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

@@ -51,7 +51,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         height?: number;
     };
     exports: {};
-    bindings: "scene" | "camera" | "orbit_controls" | "hovered_point";
+    bindings: "hovered_point" | "scene" | "camera" | "orbit_controls";
     slots: {};
     events: {};
 };
@@ -59,7 +59,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "scene" | "camera" | "orbit_controls" | "hovered_point";
+    bindings(): "hovered_point" | "scene" | "camera" | "orbit_controls";
     exports(): {};
 }
 interface $$IsomorphicComponent {