@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/components/_Table.svelte

@@ -1,24 +1,22 @@
 <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 ErrorChart from './ErrorChart.svelte'
+  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'
   import TableGroupRow from './TableGroupRow.svelte'
   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)]
-        }
-      }
-    } catch (thrown) {
+      resultProcessedData = inputRows
+      resultNormalizedData = inputRows
+    } catch(thrown) {
       let message = thrown instanceof Error ? thrown.message : 'Unable to prepare dataset'
-      logError(thrown, {id: '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
@@ -290,8 +303,7 @@
     }
   })
 
-  const handleToggle = (event: CustomEvent<{groupName: string}>) => {
-    let {groupName} = event.detail
+  const handleToggle = ({groupName}: {groupName: string}) => {
     groupToggleStates = {...groupToggleStates, [groupName]: !groupToggleStates[groupName]}
   }
 
@@ -353,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}
@@ -362,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}
 
@@ -376,7 +387,6 @@
           headerColor={$headerColorStore}
           headerFontColor={$headerFontColorStore}
           {orderedColumns}
-          {columnSummary}
           sortable={sortableBool}
           {sortClick}
           formatColumnTitles={formatColumnTitlesBool}
@@ -393,11 +403,10 @@
                 {groupName}
                 currentGroupData={sortedGroupedData[groupName]}
                 toggled={groupToggleStates[groupName]}
-                {columnSummary}
                 rowNumbers={effectiveRowNumbers}
                 rowColor={$accordionRowColorStore}
                 subtotals={subtotalsBool}
-                ontoggle={handleToggle}
+                onToggle={handleToggle}
                 {orderedColumns}
                 compact={compactBool}
               />
@@ -410,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}
               />
@@ -423,11 +432,11 @@
                 <TableSubtotalRow
                   {groupName}
                   currentGroupData={sortedGroupedData[groupName]}
-                  {columnSummary}
                   rowColor={$subtotalRowColorStore}
                   fontColor={$subtotalFontColorStore}
                   groupBy={groupBy}
                   groupType={groupType}
+                  rowNumbers={effectiveRowNumbers}
                   {orderedColumns}
                   compact={compactBool}
                 />
@@ -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}
@@ -481,7 +489,9 @@
     {/if}
   </div>
 {:else}
-  <ErrorChart title="Data Table" error={error ?? emptyMessage ?? 'Unable to render table'} />
+  <div style="min-height:200px;width:100%;display:grid;align-content:center;padding:8px;box-sizing:border-box">
+    <ErrorDisplay error={error ?? emptyMessage ?? 'Unable to render table'} />
+  </div>
 {/if}
 
 <style>
@@ -490,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;
   }
 
@@ -508,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;