@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/components/TableRow.svelte

@@ -2,8 +2,7 @@
   import chroma from 'chroma-js'
   import InlineDelta from './InlineDelta.svelte'
   import TableCell from './TableCell.svelte'
-  import {safeExtractColumn} from '../component-utilities/tableUtils'
-  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {formatFromField} from '../component-utilities/format.ts'
   import {getThemeStores} from '../component-utilities/themeStores'
 
   interface Props {
@@ -13,7 +12,7 @@
     rowNumbers?: boolean | string
     rowLines?: boolean | string
     index?: number
-    columnSummary?: any[]
+    columnLookup?: Record<string, any>
     grouped?: boolean
     groupType?: 'accordion' | 'section'
     groupColumn?: string
@@ -26,7 +25,7 @@
   let {
     displayedData = [], rowShading: rowShadingProp = undefined, link = undefined,
     rowNumbers: rowNumbersProp = undefined, rowLines: rowLinesProp = undefined, index = 0,
-    columnSummary = [], grouped = false, groupType = undefined, groupColumn = undefined,
+    columnLookup = {}, grouped = false, groupType = undefined, groupColumn = undefined,
     rowSpan = 1, groupNamePosition = 'middle', orderedColumns = [], compact: compactProp = undefined,
   }: Props = $props()
 
@@ -58,7 +57,7 @@
 
     try {
       return chroma.scale(column.colorScale).domain(domain)
-    } catch (error) {
+    } catch(error) {
       console.warn('Unable to build color scale for column', column.id, error)
       return undefined
     }
@@ -124,10 +123,9 @@
     {/if}
 
     {#each orderedColumns as column, k (k)}
-      {@const summary = safeExtractColumn(column, columnSummary)}
-      {@const scaleSummary = column.scaleColumn ? columnSummary.find((d) => d.id === column.scaleColumn) : summary}
-      {@const columnMin = column.colorMin ?? scaleSummary?.columnUnitSummary?.min}
-      {@const columnMax = column.colorMax ?? scaleSummary?.columnUnitSummary?.max}
+      {@const scaleSummary = column.scaleColumn ? columnLookup[column.scaleColumn] : column}
+      {@const columnMin = column.colorMin ?? scaleSummary?.stats?.min}
+      {@const columnMax = column.colorMax ?? scaleSummary?.stats?.max}
       {@const colorScale = column.contentType === 'colorscale'
         ? computeColorScale(column, columnMin, columnMax)
         : undefined}
@@ -145,21 +143,15 @@
         if (contentContrast < backgroundContrast) return $theme.colors['base-100']
         return $theme.colors['base-content']
       })()}
-      {@const columnFormat = (() => {
-        if (column.fmt) return getFormatObjectFromString(column.fmt, summary.format?.valueType)
-        if (column.fmtColumn && row[column.fmtColumn]) {
-          return getFormatObjectFromString(row[column.fmtColumn], summary.format?.valueType)
-        }
-        return summary.format
-      })()}
       {@const paddingLeft = k === 0 && grouped && groupType === 'accordion' && !rowNumbers ? '28px' : undefined}
-      {@const shouldShow = !(groupType === 'section' && groupColumn === summary.id && i !== 0)}
+      {@const shouldShow = !(groupType === 'section' && groupColumn === column.id && i !== 0)}
       <TableCell
-        class={summary?.type}
+        class={column?.type}
         {compact}
         verticalAlign={groupType === 'section' ? groupNamePosition : undefined}
-        rowSpan={groupType === 'section' && groupColumn === summary.id && i === 0 ? rowSpan : 1}
+        rowSpan={groupType === 'section' && groupColumn === column.id && i === 0 ? rowSpan : 1}
         {paddingLeft}
+        align={column.align}
         wrap={column.wrap}
         cellColor={formattedColor}
         fontColor={fontColor}
@@ -185,21 +177,12 @@
             >
               {#if column.linkLabel != undefined}
                 {#if row[column.linkLabel] != undefined}
-                  {@const labelSummary = safeExtractColumn({id: column.linkLabel}, columnSummary)}
-                  {formatValue(
-                    row[column.linkLabel],
-                    column.fmt ? getFormatObjectFromString(column.fmt, labelSummary.format?.valueType) : labelSummary.format,
-                    labelSummary.columnUnitSummary,
-                  )}
+                  {formatFromField(columnLookup[column.linkLabel]?.field, row[column.linkLabel])}
                 {:else}
                   {column.linkLabel}
                 {/if}
               {:else}
-                {formatValue(
-                  row[column.id],
-                  column.fmt ? getFormatObjectFromString(column.fmt, summary.format?.valueType) : summary.format,
-                  summary.columnUnitSummary,
-                )}
+                {formatFromField(column.field, row[column.id])}
               {/if}
             </a>
           {/if}
@@ -207,8 +190,7 @@
           <InlineDelta
             value={row[column.id]}
             downIsGood={column.downIsGood}
-            formatObject={columnFormat}
-            columnUnitSummary={summary.columnUnitSummary}
+            field={column.field}
             showValue={column.showValue}
             showSymbol={column.deltaSymbol}
             align={column.align}
@@ -217,13 +199,7 @@
             chip={column.chip}
           />
         {:else}
-          {#if row[column.id] === null || row[column.id] === undefined}
-            –
-          {:else if summary.type === 'number'}
-            {formatValue(row[column.id], columnFormat, summary.columnUnitSummary)}
-          {:else}
-            {formatValue(row[column.id], columnFormat, summary.columnUnitSummary)}
-          {/if}
+          {formatFromField(column.field, row[column.id])}
         {/if}
       </TableCell>
     {/each}

package/dist/ui/components/TableSubtotalRow.svelte

@@ -1,44 +1,53 @@
 <script lang="ts">
   import InlineDelta from './InlineDelta.svelte'
-  import {aggregateColumn, safeExtractColumn} from '../component-utilities/tableUtils'
-  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {summarizeColumn, type SummaryMetric} from '../component-utilities/dataSummary.ts'
+  import {formatFromField} from '../component-utilities/format.ts'
   import TableCell from './TableCell.svelte'
+  import {toBoolean} from '../component-utilities/inputUtils'
 
   interface Props {
     groupName?: string
     currentGroupData?: any[]
-    columnSummary?: any[]
     rowColor?: string
     groupBy?: string
     groupType?: 'accordion' | 'section'
+    rowNumbers?: boolean | string
     fontColor?: string
     orderedColumns?: any[]
     compact?: boolean | string
   }
 
   let {
-    groupName = undefined, currentGroupData = [], columnSummary = [], rowColor = undefined,
-    groupBy = undefined, groupType = undefined, fontColor = undefined, orderedColumns = [], compact = undefined,
+    groupName = undefined, currentGroupData = [], rowColor = undefined,
+    groupBy = undefined, groupType = undefined, rowNumbers: rowNumbersProp = undefined,
+    fontColor = undefined, orderedColumns = [], compact = undefined,
   }: Props = $props()
+
+  let rowNumbers = $derived(toBoolean(rowNumbersProp) ?? false)
+
+  const SUPPORTED_METRICS: SummaryMetric[] = ['sum', 'mean', 'median', 'min', 'max', 'count', 'countDistinct']
+
+  const getAggregateValue = (rows: Record<string, unknown>[], column: any) => {
+    let metric = column?.totalAgg as SummaryMetric | undefined
+    if (!metric && String(column?.type || '').toLowerCase() === 'number') metric = 'sum'
+    if (!metric || !SUPPORTED_METRICS.includes(metric)) return '-'
+    let summary = summarizeColumn(rows, column.field ?? {name: column.id, type: column.type}, [metric])
+    return summary[metric] ?? null
+  }
 </script>
 
 <tr class="subtotal-row" style:background-color={rowColor} style:color={fontColor}>
+  {#if rowNumbers && groupType !== 'section'}
+    <TableCell class="index" {compact}></TableCell>
+  {/if}
   {#each orderedColumns as column (column.id)}
-    {@const summary = safeExtractColumn(column, columnSummary)}
-    {@const baseFormat = column.fmt ? getFormatObjectFromString(column.fmt, summary.format?.valueType) : summary.format}
-    {@const format = (() => {
-      if (column.subtotalFmt) return getFormatObjectFromString(column.subtotalFmt)
-      if (column.totalFmt) return getFormatObjectFromString(column.totalFmt)
-      return baseFormat
-    })()}
-    <TableCell class={summary.type} {compact} align={column.align}>
+    <TableCell class={column.type} {compact} align={column.align}>
       {#if column.id !== groupBy}
         {#if column.contentType === 'delta'}
           <InlineDelta
-            value={aggregateColumn(currentGroupData, column.id, column.totalAgg, summary.type, column.weightCol)}
+            value={getAggregateValue(currentGroupData, column)}
             downIsGood={column.downIsGood}
-            formatObject={baseFormat}
-            columnUnitSummary={summary.columnUnitSummary}
+            field={column.field}
             showValue={column.showValue}
             showSymbol={column.deltaSymbol}
             align={column.align}
@@ -47,11 +56,7 @@
             chip={column.chip}
           />
         {:else}
-          {formatValue(
-            aggregateColumn(currentGroupData, column.id, column.totalAgg, summary.type, column.weightCol),
-            format,
-            summary.columnUnitSummary,
-          )}
+          {formatFromField(column.field, getAggregateValue(currentGroupData, column))}
         {/if}
       {:else if groupType === 'section'}
         {groupName}

package/dist/ui/components/TableTotalRow.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import InlineDelta from './InlineDelta.svelte'
   import TableCell from './TableCell.svelte'
-  import {safeExtractColumn, weightedMean} from '../component-utilities/tableUtils'
-  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {summarizeColumn, type SummaryMetric} from '../component-utilities/dataSummary.ts'
+  import {formatFromField} from '../component-utilities/format.ts'
 
   interface Props {
     data?: any[]
     rowNumbers?: boolean | string
-    columnSummary?: any[]
     rowColor?: string
     fontColor?: string
     groupType?: 'accordion' | 'section'
@@ -16,7 +15,7 @@
   }
 
   let {
-    data = [], rowNumbers: rowNumbersProp = undefined, columnSummary = [], rowColor = undefined,
+    data = [], rowNumbers: rowNumbersProp = undefined, rowColor = undefined,
     fontColor = undefined, groupType = undefined, orderedColumns = [], compact: compactProp = undefined,
   }: Props = $props()
 
@@ -32,6 +31,16 @@
 
   let rowNumbers = $derived(toBool(rowNumbersProp))
   let compact = $derived(toBool(compactProp))
+
+  const SUPPORTED_METRICS: SummaryMetric[] = ['sum', 'mean', 'median', 'min', 'max', 'count', 'countDistinct']
+
+  const getAggregateValue = (rows: Record<string, unknown>[], column: any, aggType: string | undefined) => {
+    let metric = aggType as SummaryMetric | undefined
+    if (!metric && String(column?.type || '').toLowerCase() === 'number') metric = 'sum'
+    if (!metric || !SUPPORTED_METRICS.includes(metric)) return '-'
+    let summary = summarizeColumn(rows, column.field ?? {name: column.id, type: column.type}, [metric])
+    return summary[metric] ?? null
+  }
 </script>
 
 <tr class="total-row" style:background-color={rowColor} style:color={fontColor}>
@@ -40,49 +49,30 @@
   {/if}
 
   {#each orderedColumns as column (column.id)}
-    {@const summary = safeExtractColumn(column, columnSummary)}
-    {@const format = (() => {
-      if (column.totalFmt) return getFormatObjectFromString(column.totalFmt)
-      if (column.fmt) return getFormatObjectFromString(column.fmt, summary.format?.valueType)
-      return summary.format
-    })()}
     {@const totalAgg = column.totalAgg ?? 'sum'}
     <TableCell
       {compact}
-      dataType={summary.type}
+      dataType={column.type}
       align={column.align}
       height={column.height}
       width={column.width}
       wrap={column.wrap}
       topBorder="1px solid rgba(107, 114, 128, 0.5)"
     >
-      {#if ['sum', 'mean', 'weightedMean', 'median', 'min', 'max', 'count', 'countDistinct'].includes(totalAgg)}
-        {#if column.contentType === 'delta'}
-          <InlineDelta
-            value={totalAgg === 'weightedMean' ? weightedMean(data, column.id, column.weightCol) : summary.columnUnitSummary?.[totalAgg]}
-            downIsGood={column.downIsGood}
-            formatObject={format}
-            columnUnitSummary={summary.columnUnitSummary}
-            showValue={column.showValue}
-            showSymbol={column.deltaSymbol}
-            align={column.align}
-            neutralMin={column.neutralMin ?? 0}
-            neutralMax={column.neutralMax ?? 0}
-            chip={column.chip}
-          />
-        {:else}
-          {formatValue(
-            totalAgg === 'weightedMean' ? weightedMean(data, column.id, column.weightCol) : summary.columnUnitSummary?.[totalAgg],
-            format,
-            summary.columnUnitSummary,
-          )}
-        {/if}
+      {#if column.contentType === 'delta'}
+        <InlineDelta
+          value={getAggregateValue(data, column, totalAgg)}
+          downIsGood={column.downIsGood}
+          field={column.field}
+          showValue={column.showValue}
+          showSymbol={column.deltaSymbol}
+          align={column.align}
+          neutralMin={column.neutralMin ?? 0}
+          neutralMax={column.neutralMax ?? 0}
+          chip={column.chip}
+        />
       {:else}
-        {#if column.totalFmt}
-          {formatValue(totalAgg, format, summary.columnUnitSummary)}
-        {:else}
-          {totalAgg}
-        {/if}
+        {formatFromField(column.field, getAggregateValue(data, column, totalAgg))}
       {/if}
     </TableCell>
   {/each}

package/dist/ui/components/TextInput.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {toBoolean} from '../component-utilities/inputUtils'
+  import {captureInitial, getPageInputs} from '../internal/pageInputs.svelte.js'
 
   interface Props {
     name: string
@@ -17,33 +19,31 @@
     placeholder = 'Type to search', defaultValue = undefined, hideDuringPrint = true, unsafe = false,
   }: Props = $props()
 
-  // svelte-ignore state_referenced_locally - intentionally capturing initial value only
-  let value = $state(defaultValue ?? '')
+  let pageInputs = getPageInputs()
+  let field = captureInitial(() => pageInputs.text(name))
 
   let hidePrint = $derived(toBoolean(hideDuringPrint))
   let allowUnsafe = $derived(toBoolean(unsafe))
   let displayLabel = $derived(title || label)
 
-  // Push value changes to parent
-  $effect(() => {
-    pushValue(value)
+  onMount(() => {
+    if (!field.hasExternalValue) field.set(defaultValue ?? '')
+    return () => field.destroy()
   })
 
-  function sanitize (input: string): string {
+  function sanitize(input: string): string {
     if (allowUnsafe) return input
     return input.replace(/'/g, "''")
   }
 
-  function pushValue (input: string) {
+  function pushValue(input: string) {
     let trimmed = input ?? ''
-    let _safe = sanitize(trimmed)
-    let paramValue = trimmed === '' ? null : trimmed
-    window.$GRAPHENE.updateParam(name, paramValue)
+    sanitize(trimmed)
+    field.set(trimmed)
   }
 
-  function onInput (event: Event) {
-    value = (event.currentTarget as HTMLInputElement).value
-    pushValue(value)
+  function onInput(event: Event) {
+    pushValue((event.currentTarget as HTMLInputElement).value)
   }
 </script>
 
@@ -58,7 +58,7 @@
     id={`text-input-${name}`}
     class="text-input"
     type="text"
-    value={value}
+    value={field.value}
     placeholder={placeholder}
     oninput={onInput}
   />
@@ -77,6 +77,7 @@
     }
   }
   .input-label {
+    font-family: var(--font-ui);
     font-size: 12px;
     font-weight: 600;
     color: var(--input-label-color, #374151);
@@ -91,5 +92,7 @@
     border-radius: 6px;
     border: 1px solid rgba(107, 114, 128, 0.4);
     font-size: 14px;
+    font-family: var(--font-ui);
+    font-synthesis: none;
   }
 </style>

package/dist/ui/components/Value.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import QueryLoad from './QueryLoad.svelte'
+    import {formatFromField} from '../component-utilities/format.ts'
+    import type {QueryResult} from '../component-utilities/types.ts'
+
+    interface Props {
+      data: string | QueryResult
+      column: string
+      row?: number
+    }
+
+    let {data, column, row = 0}: Props = $props()
+
+    function formatValue(input: any, loaded: QueryResult) {
+      if (input === null || input === undefined) return '—'
+      let field = loaded?.fields?.find((entry: any) => entry?.name === column)
+      return formatFromField(field as any, input)
+    }
+</script>
+
+{#snippet valueContent(loaded: QueryResult)}
+  <span>{formatValue(loaded?.rows?.[row]?.[column], loaded)}</span>
+{/snippet}
+
+<QueryLoad {data} fields={{column}} inline children={valueContent} />