matterviz 0.3.5 → 0.3.7

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

@@ -0,0 +1,66 @@
+import type { Sides } from './layout';
+import { type DensityBin, type DenseInternalPoint, type DensePointSeries } from './adaptive-density';
+import type { AxisConfig, ScatterHandlerProps } from './types';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BinnedDensityConfig, BinnedOverlaysConfig, BinnedPointDataFn, BinnedPointLabelsConfig, BinnedPointTooltipPayload, BinnedSizeScaleConfig } from './binned-scatter-types';
+declare function $$render<Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        series: DensePointSeries<Metadata>[];
+        x_axis?: AxisConfig;
+        y_axis?: AxisConfig;
+        size_scale?: BinnedSizeScaleConfig;
+        density?: BinnedDensityConfig;
+        overlays?: BinnedOverlaysConfig;
+        padding?: Sides;
+        tooltip?: Snippet<[BinnedPointTooltipPayload<Metadata, PointData>]>;
+        point_data?: BinnedPointDataFn<Metadata, PointData>;
+        point_labels?: BinnedPointLabelsConfig<Metadata, PointData>;
+        selected_point_id?: string | number | null;
+        on_point_click?: (payload: ScatterHandlerProps<Metadata> & {
+            point: DenseInternalPoint<Metadata>;
+            event: MouseEvent;
+            color?: string;
+            point_data?: PointData;
+        }) => void;
+        on_density_zoom?: (payload: {
+            bin: DensityBin;
+            event: MouseEvent;
+        }) => void;
+        render_mode?: "density" | "points";
+        wrapper?: HTMLDivElement;
+        fullscreen?: boolean;
+        fullscreen_toggle?: boolean;
+        children?: Snippet<[{
+            height: number;
+            width: number;
+            fullscreen: boolean;
+        }]>;
+        header_controls?: Snippet<[{
+            height: number;
+            width: number;
+            fullscreen: boolean;
+        }]>;
+    };
+    exports: {};
+    bindings: "render_mode" | "fullscreen" | "wrapper";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<Metadata, PointData>>['props'];
+    events(): ReturnType<typeof $$render<Metadata, PointData>>['events'];
+    slots(): ReturnType<typeof $$render<Metadata, PointData>>['slots'];
+    bindings(): "render_mode" | "fullscreen" | "wrapper";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Metadata, PointData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Metadata, PointData>['props']>, ReturnType<__sveltets_Render<Metadata, PointData>['events']>, ReturnType<__sveltets_Render<Metadata, PointData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Metadata, PointData>['bindings']>;
+    } & ReturnType<__sveltets_Render<Metadata, PointData>['exports']>;
+    <Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<Metadata, PointData>['props']> & {}): ReturnType<__sveltets_Render<Metadata, PointData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const BinnedScatterPlot: $$IsomorphicComponent;
+type BinnedScatterPlot<Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof BinnedScatterPlot<Metadata, PointData>>;
+export default BinnedScatterPlot;

package/dist/plot/ColorBar.svelte

@@ -168,7 +168,7 @@
   let ticks_array: number[] = $derived.by(() => {
     if (Array.isArray(tick_labels)) {
       // Use user-provided ticks directly
-      return tick_labels.map(Number).filter((n) => !isNaN(n))
+      return tick_labels.map(Number).filter((num) => !isNaN(num))
     }
 
     // Handle edge cases for number of ticks
@@ -230,8 +230,8 @@
         const log_min = Math.log10(scale_min)
         const log_max = Math.log10(scale_max)
         return [...Array(n_ticks).keys()].map((idx) => {
-          const t = idx / (n_ticks - 1)
-          const log_val = log_min + t * (log_max - log_min)
+          const fraction = idx / (n_ticks - 1)
+          const log_val = log_min + fraction * (log_max - log_min)
           return Math.pow(10, log_val)
         })
       }
@@ -241,8 +241,8 @@
       else {
         // Generate exactly n_ticks evenly spaced linear ticks
         return [...Array(n_ticks).keys()].map((idx) => {
-          const t = idx / (n_ticks - 1)
-          return scale_min + t * (scale_max - scale_min)
+          const fraction = idx / (n_ticks - 1)
+          return scale_min + fraction * (scale_max - scale_min)
         })
       }
     }
@@ -374,19 +374,19 @@
     }
 
     return [...Array(n_steps).keys()].map((_, idx) => {
-      const t = idx / (n_steps - 1) // Normalized position 0 to 1
+      const fraction = idx / (n_steps - 1) // Normalized position 0 to 1
       let data_value: number
 
       if (use_log_interp) {
         data_value = log_span === 0
           ? adjusted_min_ramp
-          : Math.pow(10, log_min + t * log_span)
+          : Math.pow(10, log_min + fraction * log_span)
       } else if (type_name === `arcsinh`) {
         data_value = asinh_span === 0
           ? min_ramp_domain
-          : Math.sinh(asinh_min + t * asinh_span) * asinh_threshold
+          : Math.sinh(asinh_min + fraction * asinh_span) * asinh_threshold
       } else {
-        data_value = min_ramp_domain + t * linear_span
+        data_value = min_ramp_domain + fraction * linear_span
       }
       return actual_color_scale_fn(data_value) ?? `transparent`
     })
@@ -470,17 +470,18 @@
   )
   let has_any_select = $derived(has_property_select || has_color_scale_select)
 
-  // Initialize selected keys to first option when options provided but key undefined
-  // This ensures state matches UI (which shows first option by default)
+  // Keep bindable selected keys valid so state matches the select's first-option fallback.
   $effect(() => {
-    if (has_property_select && selected_property_key === undefined) {
-      selected_property_key = property_options?.[0]?.key
-    }
+    if (!property_options?.length) return
+    if (property_options.some((option) => option.key === selected_property_key)) return
+    selected_property_key = property_options[0]?.key
   })
   $effect(() => {
-    if (has_color_scale_select && selected_color_scale_key === undefined) {
-      selected_color_scale_key = color_scale_options?.[0]?.key
-    }
+    if (!color_scale_options?.length) return
+    if (color_scale_options.some((option) => option.key === selected_color_scale_key)) return
+    const first_option = color_scale_options[0]
+    selected_color_scale_key = first_option.key
+    color_scale = first_option.scale
   })
 
   async function handle_property_change(new_key: string, prev_key?: string) {
@@ -697,6 +698,7 @@
     width: auto;
     &:is(.left, .right) {
       flex-direction: column;
+      justify-content: center; /* center title vertically along the bar height */
     }
     /* Rotate only the label element, not the entire row (keeps selects usable) */
     /* Only rotate when orientation is vertical AND title is on left/right side */

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

@@ -26,6 +26,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     selected_color_scale_key?: string;
     on_color_scale_change?: (key: string) => void;
 };
-declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "title" | "range" | "color_scale" | "tick_labels" | "nice_range" | "selected_property_key" | "selected_color_scale_key">;
+declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "title" | "color_scale" | "range" | "tick_labels" | "nice_range" | "selected_property_key" | "selected_color_scale_key">;
 type ColorBar = ReturnType<typeof ColorBar>;
 export default ColorBar;

package/dist/plot/FillArea.svelte

@@ -17,7 +17,7 @@
     clip_path_id,
     x_scale_fn,
     y_scale_fn,
-    hovered_region = null,
+    is_hovered = false,
     on_click,
     on_hover,
     tween_options,
@@ -28,7 +28,7 @@
     clip_path_id: string
     x_scale_fn: ((x: number) => number) & { invert?: (y: number) => number | Date }
     y_scale_fn: ((y: number) => number) & { invert?: (y: number) => number }
-    hovered_region?: number | null
+    is_hovered?: boolean
     on_click?: (event: FillHandlerEvent) => void
     on_hover?: (event: FillHandlerEvent | null) => void
     tween_options?: TweenOptions<string>
@@ -40,8 +40,6 @@
     `fill-gradient-${region.id ?? region_idx}-${instance_id}`,
   )
 
-  // Effective styling based on hover state
-  let is_hovered = $derived(hovered_region === region_idx)
   let effective_opacity = $derived(
     is_hovered && region.hover_style?.fill_opacity != null
       ? region.hover_style.fill_opacity

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

@@ -11,7 +11,7 @@ type $$ComponentProps = {
     y_scale_fn: ((y: number) => number) & {
         invert?: (y: number) => number;
     };
-    hovered_region?: number | null;
+    is_hovered?: boolean;
     on_click?: (event: FillHandlerEvent) => void;
     on_hover?: (event: FillHandlerEvent | null) => void;
     tween_options?: TweenOptions<string>;