@graphenedata/cli 0.0.15 → 0.0.16

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,16 +19,16 @@
     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 {
@@ -36,14 +38,12 @@
 
   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)
+    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,7 +92,7 @@
     border-radius: 6px;
     border: 1px solid rgba(107, 114, 128, 0.4);
     font-size: 14px;
-    font-family: var(--ui-font-family);
+    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} />

package/dist/ui/components/_Table.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import {setContext, untrack, type Snippet} from 'svelte'
   import {writable} from 'svelte/store'
-  import {propKey, strictBuild} from '../component-utilities/chartContext.js'
-  import getColumnSummary from '../component-utilities/getColumnSummary.js'
-  import {convertColumnToDate} from '../component-utilities/dateParsing.js'
-  import checkInputs from '../component-utilities/checkInputs.js'
+  import {formatTitle} from '../component-utilities/format.ts'
+  import {summarizeColumn} from '../component-utilities/dataSummary.ts'
   import ErrorDisplay from '../internal/ErrorDisplay.svelte'
   import TableHeader from './TableHeader.svelte'
   import TableRow from './TableRow.svelte'
@@ -12,13 +10,13 @@
   import TableSubtotalRow from './TableSubtotalRow.svelte'
   import TableTotalRow from './TableTotalRow.svelte'
   import Column from './Column.svelte'
-  import {getFinalColumnOrder} from '../component-utilities/tableUtils'
   import {getThemeStores} from '../component-utilities/themeStores'
-  import {toBoolean} from '../component-utilities/convert'
-  import {logError} from '../internal/telemetry.js'
+  import {toBoolean} from '../component-utilities/inputUtils'
+  import {componentLogger} from '../internal/telemetry.js'
+  import type {QueryResult} from '../component-utilities/types.ts'
 
   interface Props {
-    data?: any[], rows?: number | string, title?: string, subtitle?: string, rowNumbers?: boolean | string
+    data?: QueryResult, rows?: number | string, title?: string, rowNumbers?: boolean | string
     sort?: string, sortable?: boolean | string, groupBy?: string, groupsOpen?: boolean | string
     groupType?: 'accordion' | 'section', accordionRowColor?: string, groupNamePosition?: 'top' | 'middle' | 'bottom'
     subtotals?: boolean | string, subtotalRowColor?: string, subtotalFontColor?: string
@@ -32,7 +30,7 @@
   const {resolveColor} = getThemeStores()
 
   let {
-    data = [], rows = 10, title = undefined, subtitle = undefined, rowNumbers = false, sort = undefined,
+    data = {rows: [], fields: []}, rows = 10, title = undefined, rowNumbers = false, sort = undefined,
     sortable = true, groupBy = undefined, groupsOpen = true, groupType = 'accordion',
     accordionRowColor = undefined, groupNamePosition = 'middle', subtotals = false,
     subtotalRowColor = undefined, subtotalFontColor = undefined, rowShading = false, rowLines = true,
@@ -64,15 +62,14 @@
 
   // Initialize store without data - it will be populated by the effect below
   const tablePropsStore = writable<{data: any[]; columns: any[]; priorityColumns:(string | undefined)[]}>({data: [], columns: [], priorityColumns: []})
-  setContext(propKey, tablePropsStore)
+  setContext('tableProps', tablePropsStore)
 
   // Update store when data or groupBy changes
   $effect(() => {
-    // Track data and groupBy
-    let currentData = data
+    let currentRows = data?.rows ?? []
     let currentGroupBy = groupBy
     untrack(() => {
-      tablePropsStore.update((state) => ({...state, data: currentData, priorityColumns: [currentGroupBy]}))
+      tablePropsStore.update((state) => ({...state, data: currentRows, priorityColumns: [currentGroupBy]}))
     })
   })
 
@@ -85,6 +82,7 @@
   let headerFontColorStore = $derived(resolveColor(headerFontColor))
   let backgroundColorStore = $derived(resolveColor(backgroundColor))
 
+  let logger = untrack(() => componentLogger('DataTable'))
   let priorityColumns = $derived<(string | undefined)[]>([groupBy])
 
   $effect(() => {
@@ -97,11 +95,6 @@
   // Use $derived to reactively read from the store
   let tablePropsColumns = $derived($tablePropsStore.columns ?? [])
 
-  let finalColumnOrder = $derived(getFinalColumnOrder(tablePropsColumns.map((column: any) => column.id), priorityColumns))
-  let orderedColumns = $derived([...tablePropsColumns].sort(
-    (a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id),
-  ))
-
   let sortObj: {col: string | null; ascending: boolean | null} = $state({col: null, ascending: null})
 
   // Parse initial sort on mount
@@ -129,69 +122,83 @@
   // Process data - combine all data processing into one $derived.by block to avoid loops
   let processedState = $derived.by(() => {
     let resultError: string | undefined = undefined
-    let resultColumnSummary: any[] = []
+    let resultColumns: any[] = []
     let resultProcessedData: any[] = []
     let resultDataTestId: string | undefined = undefined
     let resultNormalizedData: any[] = []
 
     try {
-      // First normalize data - extract rows array from object if needed
-      let inputData: any[]
-      if (!Array.isArray(data)) {
-        let raw = data as any
-        resultDataTestId = coerceId(raw?.id)
-        let candidate = raw?.rows
-        inputData = Array.isArray(candidate) ? candidate : []
-      } else {
-        resultDataTestId = coerceId((data as any)?.id)
-        inputData = data
+      let inputRows = Array.isArray(data?.rows) ? data.rows : []
+      let inputFields = Array.isArray(data?.fields) ? data.fields : []
+      resultDataTestId = coerceId((data as any)?.id)
+
+      if (!Array.isArray(inputFields) || inputFields.length === 0) throw new Error('Table data is missing field metadata.')
+      if (Array.isArray(inputRows) && inputRows.length > 0) {
+        for (let colName of Object.keys(inputRows[0])) {
+          let field = inputFields.find(item => item?.name?.toLowerCase() === colName?.toLowerCase())
+          let type = String(field?.type || '').toLowerCase()
+          let resolvedField = field ?? {name: colName, type}
+          let stats = type === 'number' ? summarizeColumn(inputRows, resolvedField, ['min', 'max']) : {}
+
+          resultColumns.push({
+            id: colName,
+            defaultTitle: formatTitle(colName),
+            type,
+            field: resolvedField,
+            stats,
+          })
+        }
       }
 
-      checkInputs(inputData)
-      resultColumnSummary = getColumnSummary(inputData, 'array')
+      if (link && !showLinkColBool) resultColumns = resultColumns.filter((column) => column.id !== link)
 
       if (initialSort.sortBy) {
-        let columnNames = resultColumnSummary.map((col) => col.id)
+        let columnNames = resultColumns.map((col) => col.id)
         if (!columnNames.includes(initialSort.sortBy)) {
           throw new Error(`${initialSort.sortBy} is not a column in the dataset. sort should contain one column name and optionally a direction (asc or desc).`)
         }
       }
 
-      let dateCols = resultColumnSummary
-        .filter((col) => col.type === 'date' && !(inputData?.[0]?.[col.id] instanceof Date))
-        .map((col) => col.id)
-
-      let tempData = inputData
-      for (let columnId of dateCols) {
-        tempData = convertColumnToDate(tempData, columnId)
-      }
-      resultProcessedData = tempData
-      resultNormalizedData = tempData
-
-      if (link && !showLinkColBool) {
-        let linkIndex = resultColumnSummary.findIndex((col) => col.id === link)
-        if (linkIndex !== -1) {
-          resultColumnSummary = [...resultColumnSummary.slice(0, linkIndex), ...resultColumnSummary.slice(linkIndex + 1)]
-        }
-      }
+      resultProcessedData = inputRows
+      resultNormalizedData = inputRows
     } catch(thrown) {
       let message = thrown instanceof Error ? thrown.message : 'Unable to prepare dataset'
-      logError(thrown, {queryId: 'DataTable'})
       resultError = message
-      if (strictBuild) throw thrown
     }
+    logger.error(resultError)
 
     return {
       error: resultError,
-      columnSummary: resultColumnSummary,
+      columns: resultColumns,
       processedData: resultProcessedData,
       dataTestId: resultDataTestId,
       normalizedData: resultNormalizedData,
     }
   })
 
+  let columnLookup = $derived.by(() => {
+    let lookup: Record<string, any> = {}
+    for (let column of processedState.columns) lookup[column.id] = column
+    return lookup
+  })
+
+  let resolvedColumns = $derived(tablePropsColumns.map((column: any) => {
+    let meta = columnLookup[column.id] || {}
+    return {
+      ...column,
+      defaultTitle: meta.defaultTitle ?? formatTitle(column.id),
+      type: meta.type,
+      field: meta.field,
+      stats: meta.stats,
+    }
+  }))
+
+  let finalColumnOrder = $derived(getFinalColumnOrder(resolvedColumns.map((column: any) => column.id), priorityColumns))
+  let orderedColumns = $derived([...resolvedColumns].sort(
+    (a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id),
+  ))
+
   // Extract processed state
-  let columnSummary = $derived(processedState.columnSummary)
   let normalizedData = $derived(processedState.normalizedData)
   let dataTestId = $derived(processedState.dataTestId)
 
@@ -213,6 +220,12 @@
     return String(value).toLowerCase()
   }
 
+  const getFinalColumnOrder = (columns: string[], priorityColumns: Array<string | undefined>): string[] => {
+    let priorities = priorityColumns.filter(Boolean) as string[]
+    let restColumns = columns.filter(key => !priorities.includes(key))
+    return [...priorities, ...restColumns]
+  }
+
   const compareValues = (a: unknown, b: unknown, ascending: boolean) => {
     let modifier = ascending ? 1 : -1
     if (a === b) return 0
@@ -352,7 +365,7 @@
   {#if children}
     {@render children()}
   {:else}
-    {#each columnSummary as column (column.id)}
+    {#each processedState.columns as column (column.id)}
       <Column id={column.id} />
     {/each}
   {/if}
@@ -361,10 +374,9 @@
     class={`table-container ${paginated ? 'table-container--has-pagination' : ''}`}
     data-testid={isFullPageBool ? undefined : `DataTable-${dataTestId ?? 'no-id'}`}
   >
-    {#if title || subtitle}
+    {#if title}
       <div class="table-title">
-        {#if title}<div class="table-title__headline">{title}</div>{/if}
-        {#if subtitle}<div class="table-title__subhead">{subtitle}</div>{/if}
+        <div class="table-title__headline">{title}</div>
       </div>
     {/if}
 
@@ -375,7 +387,6 @@
           headerColor={$headerColorStore}
           headerFontColor={$headerFontColorStore}
           {orderedColumns}
-          {columnSummary}
           sortable={sortableBool}
           {sortClick}
           formatColumnTitles={formatColumnTitlesBool}
@@ -392,7 +403,6 @@
                 {groupName}
                 currentGroupData={sortedGroupedData[groupName]}
                 toggled={groupToggleStates[groupName]}
-                {columnSummary}
                 rowNumbers={effectiveRowNumbers}
                 rowColor={$accordionRowColorStore}
                 subtotals={subtotalsBool}
@@ -409,12 +419,12 @@
                 rowNumbers={effectiveRowNumbers}
                 rowLines={rowLinesBool}
                 compact={compactBool}
-                {columnSummary}
                 grouped={true}
                 {groupType}
                 groupColumn={groupBy}
                 groupNamePosition={groupNamePosition}
                 orderedColumns={orderedColumns}
+                columnLookup={columnLookup}
                 index={groupOffsets[groupName] ?? 0}
                 rowSpan={sortedGroupedData[groupName].length}
               />
@@ -422,7 +432,6 @@
                 <TableSubtotalRow
                   {groupName}
                   currentGroupData={sortedGroupedData[groupName]}
-                  {columnSummary}
                   rowColor={$subtotalRowColorStore}
                   fontColor={$subtotalFontColorStore}
                   groupBy={groupBy}
@@ -442,12 +451,12 @@
             rowNumbers={effectiveRowNumbers}
             rowLines={rowLinesBool}
             compact={compactBool}
-            {columnSummary}
             grouped={false}
             {groupType}
             groupColumn={groupBy}
             groupNamePosition={groupNamePosition}
             orderedColumns={orderedColumns}
+            columnLookup={columnLookup}
             index={rowsNum * (currentPage - 1)}
           />
         {/if}
@@ -456,7 +465,6 @@
           <TableTotalRow
             data={tableData}
             rowNumbers={effectiveRowNumbers}
-            {columnSummary}
             rowColor={$totalRowColorStore}
             fontColor={$totalFontColorStore}
             groupType={groupType}
@@ -492,7 +500,7 @@
     margin: 8px 0;
     position: relative;
     color: var(--color-base-content, #1f2937);
-    font-family: var(--ui-font-family, system-ui);
+    font-family: var(--font-ui, system-ui);
     line-height: 1.45;
   }
 
@@ -510,12 +518,6 @@
     line-height: 1.3;
   }
 
-  .table-title__subhead {
-    color: var(--color-base-content-muted, #6b7280);
-    font-size: 13px;
-    margin-top: 2px;
-  }
-
   .scrollbox {
     width: 100%;
     overflow-x: auto;