matterviz 0.3.0 → 0.3.2

package/dist/table/HeatmapTable.svelte.d.ts

@@ -17,6 +17,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     default_num_format?: string;
     show_heatmap?: boolean;
     heatmap_class?: string;
+    onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void;
     onrowdblclick?: (event: MouseEvent, row: RowData) => void;
     column_order?: string[];
     export_data?: ExportData;
@@ -27,11 +28,22 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     selected_rows?: RowData[];
     hidden_columns?: string[];
     scroll_style?: string;
+    root_style?: string;
     onsort?: (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
     onsorterror?: (error: unknown, column: string, dir: `asc` | `desc`) => void;
     loading?: boolean;
     sort_data?: boolean;
+    heatmap_opacity?: number;
+    empty_message?: string;
+    show_row_numbers?: boolean;
+    allow_better_toggle?: boolean;
+    show_controls?: boolean;
+    controls_open?: boolean;
+    header_cell?: Snippet<[{
+        col: Label;
+    }]>;
+    footer?: Snippet;
 };
-declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "loading" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns">;
+declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "controls_open" | "loading" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
 type HeatmapTable = ReturnType<typeof HeatmapTable>;
 export default HeatmapTable;

package/dist/table/ToggleMenu.svelte

@@ -1,12 +1,124 @@
 <script lang="ts">import Icon from '../Icon.svelte';
 import { click_outside, tooltip } from 'svelte-multiselect/attachments';
-let { columns = $bindable([]), column_panel_open = $bindable(false) } = $props();
-function toggle_column_visibility(idx, event) {
-    columns[idx].visible = event.target.checked;
-    columns = [...columns]; // needed to trigger reactivity
+import { slide } from 'svelte/transition';
+let { columns = $bindable([]), column_panel_open = $bindable(false), n_columns, collapsed_sections = $bindable([]), on_reset, } = $props();
+const col_id = (col) => col.key ?? col.label;
+// Snapshot default visibility when column set changes (new dataset).
+// Compare by column keys to avoid re-snapshotting on internal columns = [...columns] reactivity.
+// Intentionally non-reactive: mutated only inside snapshot_defaults() and compared manually.
+let prev_col_keys = ``;
+let default_visibility = {};
+function snapshot_defaults() {
+    default_visibility = {};
+    for (const col of columns) {
+        default_visibility[col_id(col)] = col.visible !== false;
+    }
+    prev_col_keys = columns.map(col_id).join(`\0`);
+}
+snapshot_defaults();
+$effect(() => {
+    const current_keys = columns.map(col_id).join(`\0`);
+    if (current_keys !== prev_col_keys) {
+        snapshot_defaults();
+    }
+});
+// Check if a column's visibility differs from its default
+const is_changed = (col) => (col.visible !== false) !== (default_visibility[col_id(col)] ?? true);
+let has_any_changes = $derived(columns.some(is_changed));
+// Reset columns to default visibility
+function reset_columns(items) {
+    for (const col of items) {
+        col.visible = default_visibility[col_id(col)] ?? true;
+    }
+    columns = [...columns];
+}
+function reset_all() {
+    reset_columns(columns);
+    on_reset?.();
+}
+function reset_section(section_name) {
+    const section = sections.find((sec) => sec.name === section_name);
+    if (!section)
+        return;
+    reset_columns(section.items);
+    on_reset?.(section_name);
 }
+// Group columns by their group property
+let sections = $derived.by(() => {
+    const grouped = {};
+    const ungrouped = [];
+    for (const col of columns) {
+        if (col.group) {
+            grouped[col.group] ??= [];
+            grouped[col.group].push(col);
+        }
+        else {
+            ungrouped.push(col);
+        }
+    }
+    const result = Object.entries(grouped).map(([name, items]) => ({ name, items }));
+    if (ungrouped.length > 0)
+        result.push({ name: ``, items: ungrouped });
+    return result;
+});
+// Check if any column defines a group (to decide whether to show sections)
+let has_sections = $derived(columns.some((col) => col.group));
+function toggle_section(name) {
+    collapsed_sections = collapsed_sections.includes(name)
+        ? collapsed_sections.filter((s) => s !== name)
+        : [...collapsed_sections, name];
+}
+function toggle_column_visibility(col, event) {
+    if (!(event.target instanceof HTMLInputElement))
+        return;
+    col.visible = event.target.checked;
+    columns = [...columns]; // trigger reactivity on parent binding
+}
+// Grid template for section items
+let grid_template = $derived(n_columns
+    ? `repeat(${n_columns}, max-content)`
+    : `repeat(auto-fill, minmax(135px, 1fr))`);
+// Reposition dropdown: left-aligned by default, switch to right if it overflows viewport
+let details_el;
+$effect(() => {
+    if (!column_panel_open || !details_el)
+        return;
+    // Re-run when section state changes while open
+    void n_columns;
+    void collapsed_sections;
+    void sections;
+    const dropdown = details_el.querySelector(`.column-menu, .sections-container`);
+    if (!dropdown)
+        return;
+    // Reset to left-aligned
+    dropdown.style.left = `0`;
+    dropdown.style.right = `auto`;
+    requestAnimationFrame(() => {
+        const rect = dropdown.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            dropdown.style.left = `auto`;
+            dropdown.style.right = `0`;
+        }
+    });
+});
 </script>
 
+{#snippet toggle_item(col: Label)}
+  <label
+    class="toggle-label"
+    class:disabled={col.disabled}
+    {@attach tooltip({ content: col.description })}
+  >
+    <input
+      type="checkbox"
+      checked={col.visible !== false}
+      disabled={col.disabled}
+      onchange={(event) => toggle_column_visibility(col, event)}
+    />
+    {@html col.label}
+  </label>
+{/snippet}
+
 <svelte:window
   onkeydown={(event) => {
     if (event.key === `Escape` && column_panel_open) {
@@ -18,65 +130,193 @@ function toggle_column_visibility(idx, event) {
 
 <details
   class="column-toggles"
+  bind:this={details_el}
   bind:open={column_panel_open}
   {@attach click_outside({ callback: () => (column_panel_open = false) })}
 >
   <summary aria-expanded={column_panel_open}>
     Columns <Icon icon="Columns" />
-  </summary>
-  <div class="column-menu" role="menu">
-    {#each columns as col, idx (col.key ?? col.label ?? idx)}
-      <label
-        class="toggle-label"
-        title={col.description}
+    {#if has_any_changes}
+      <button
+        class="reset-btn"
+        onclick={(event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          reset_all()
+        }}
+        type="button"
+        aria-label="Reset all columns to defaults"
         {@attach tooltip()}
       >
-        <input
-          type="checkbox"
-          checked={col.visible !== false}
-          onchange={(event) => toggle_column_visibility(idx, event)}
-        />
-        {@html col.label}
-      </label>
-    {/each}
-  </div>
+        <Icon icon="Reset" width="12px" />
+      </button>
+    {/if}
+  </summary>
+
+  {#if has_sections}
+    <div class="sections-container" role="group">
+      {#each sections as section (section.name)}
+        {@const is_collapsed = section.name !== `` &&
+        collapsed_sections.includes(section.name)}
+        <div class="section">
+          {#if section.name}
+            <div class="section-header-row">
+              <button
+                class="section-header"
+                aria-expanded={!is_collapsed}
+                onclick={() => toggle_section(section.name)}
+                type="button"
+              >
+                <span class="collapse-icon">{is_collapsed ? `▶` : `▼`}</span>
+                {section.name}
+              </button>
+              {#if section.items.some(is_changed)}
+                <button
+                  class="reset-btn"
+                  onclick={() => reset_section(section.name)}
+                  type="button"
+                  aria-label="Reset {section.name} to defaults"
+                  {@attach tooltip()}
+                >
+                  <Icon icon="Reset" width="12px" />
+                </button>
+              {/if}
+            </div>
+          {/if}
+          {#if !is_collapsed}
+            <div
+              class="section-items"
+              style:grid-template-columns={grid_template}
+              transition:slide={{ duration: 200 }}
+            >
+              {#each section.items as col, idx (col.key ?? col.label ?? idx)}
+                {@render toggle_item(col)}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <div class="column-menu" role="group" style:grid-template-columns={grid_template}>
+      {#each columns as col, idx (col.key ?? col.label ?? idx)}
+        {@render toggle_item(col)}
+      {/each}
+    </div>
+  {/if}
 </details>
 
 <style>
   .column-toggles {
     position: relative;
+    summary {
+      background: var(--tgl-btn-bg, var(--btn-bg));
+      padding: 0 6pt;
+      margin: 4pt 0;
+      border-radius: var(--tgl-border-radius, 4pt);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      &:hover {
+        background: var(--tgl-hover-bg, var(--nav-bg));
+      }
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  /* Shared dropdown styling */
+  .column-menu,
+  .sections-container {
+    font-size: var(--tgl-font-size, 1.1em);
+    position: absolute;
+    left: 0;
+    top: calc(100% + 1pt);
+    background: var(--tgl-dropdown-bg, var(--page-bg));
+    border: 1px solid
+      var(--tgl-dropdown-border, color-mix(in srgb, currentColor 10%, transparent));
+    border-radius: var(--tgl-border-radius, 4pt);
+    box-shadow: var(
+      --tgl-dropdown-shadow,
+      0 4px 12px color-mix(in srgb, currentColor 8%, transparent)
+    );
+    min-width: 150px;
+    max-height: var(--tgl-dropdown-max-height, min(70vh, 600px));
+    overflow-y: auto;
+    z-index: 1;
+  }
+  .column-menu {
+    padding: 3pt 5pt;
+    display: grid;
   }
-  .column-toggles summary {
-    background: var(--btn-bg);
-    padding: 0 6pt;
-    margin: 4pt 0;
-    border-radius: 4pt;
+  .sections-container {
+    padding: 6pt 8pt;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .reset-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2pt;
+    border: none;
+    border-radius: var(--tgl-border-radius, 3pt);
+    background: transparent;
     cursor: pointer;
+    color: inherit;
+    opacity: 0.5;
+    flex-shrink: 0;
+    &:hover {
+      background: color-mix(in srgb, currentColor 12%, transparent);
+      opacity: 1;
+    }
+  }
+  summary .reset-btn {
+    margin-left: auto;
+  }
+  .section-header-row {
     display: flex;
     align-items: center;
     gap: 4px;
+    margin-bottom: 4pt;
+    padding: 2pt 4pt;
+    border-radius: var(--tgl-border-radius, 3pt);
+    background: var(
+      --tgl-section-header-bg,
+      color-mix(in srgb, currentColor 5%, transparent)
+    );
+    &:hover {
+      background: var(
+        --tgl-section-header-hover-bg,
+        color-mix(in srgb, currentColor 12%, transparent)
+      );
+    }
   }
-  .column-toggles summary:hover {
-    background: var(--nav-bg);
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 600;
+    font-size: 0.9em;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    flex: 1;
+    text-align: left;
+    color: inherit;
   }
-  .column-toggles summary::-webkit-details-marker {
-    display: none;
+  .collapse-icon {
+    font-size: 0.7em;
+    width: 1em;
+    flex-shrink: 0;
   }
-  .column-menu {
-    font-size: 1.1em;
-    position: absolute;
-    right: 0;
-    top: calc(100% + 4pt);
-    background: var(--page-bg);
-    border: 1px solid var(--border);
-    border-radius: 4pt;
-    padding: 3pt 5pt;
-    min-width: 150px;
+  .section-items {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
-    z-index: 1; /* needed to ensure column toggle menu is above HeatmapTable header row */
   }
-  .column-menu .toggle-label {
+  .toggle-label {
     display: inline-block;
     margin: 1px 2px;
     border-radius: 3px;
@@ -85,9 +325,16 @@ function toggle_column_visibility(idx, event) {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
-  .column-menu .toggle-label:hover {
-    background: var(--nav-bg);
+    &:hover:not(.disabled) {
+      background: var(--tgl-hover-bg, var(--nav-bg));
+    }
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      input {
+        cursor: not-allowed;
+      }
+    }
   }
   details :global(:is(sub, sup)) {
     transform: translate(-3pt, 6pt);

package/dist/table/ToggleMenu.svelte.d.ts

@@ -2,7 +2,10 @@ import type { Label } from './';
 type $$ComponentProps = {
     columns: Label[];
     column_panel_open?: boolean;
+    n_columns?: number;
+    collapsed_sections?: string[];
+    on_reset?: (section?: string) => void;
 };
-declare const ToggleMenu: import("svelte").Component<$$ComponentProps, {}, "columns" | "column_panel_open">;
+declare const ToggleMenu: import("svelte").Component<$$ComponentProps, {}, "columns" | "column_panel_open" | "collapsed_sections">;
 type ToggleMenu = ReturnType<typeof ToggleMenu>;
 export default ToggleMenu;

package/dist/table/index.d.ts

@@ -22,6 +22,8 @@ export type Label = {
     sticky?: boolean;
     visible?: boolean;
     sortable?: boolean;
+    show_sort_indicator?: boolean;
+    disabled?: boolean;
     style?: string;
     cell_style?: string;
 };
@@ -50,6 +52,7 @@ export type InitialSort = string | {
 };
 export type Pagination = boolean | {
     page_size?: number;
+    page_sizes?: number[];
 };
 export type Search = boolean | {
     placeholder?: string;

package/dist/tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { default as TooltipContent } from './TooltipContent.svelte';
-export type { TooltipConfig, TooltipProp } from './types';
+export * from './types';

package/dist/tooltip/index.js

@@ -1 +1,2 @@
 export { default as TooltipContent } from './TooltipContent.svelte';
+export * from './types';