@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/components/QueryLoad.svelte

@@ -1,30 +1,40 @@
 <script lang="ts">
-  import {onDestroy, onMount, type Snippet} from 'svelte'
-  import ErrorChart from './ErrorChart.svelte'
+  import {onDestroy, onMount, untrack, type Snippet} from 'svelte'
+  import type {GrapheneError} from '../../lang/index.d.ts'
+  import ErrorDisplay from '../internal/ErrorDisplay.svelte'
+  import type {QueryResult} from '../component-utilities/types.ts'
+  import {componentLogger} from '../internal/telemetry.ts'
+  import Skeleton from './Skeleton.svelte'
 
   interface Props {
-    data: string | {rows?: any[]}
+    data: string | QueryResult
     height?: number
     fields?: Record<string, string | string[]>
-    children?: Snippet<[any[]]>
+    inline?: boolean
+    componentId?: string
+    children?: Snippet<[QueryResult]>
   }
 
-  let {data, height = 200, fields = {}, children}: Props = $props()
+  let {data, height = 200, fields = {}, inline = false, componentId = undefined, children}: Props = $props()
+  let logger = untrack(() => componentLogger(componentId || 'QueryLoad', componentId ? {} : {data: typeof data == 'string' ? data : undefined, ...fields}))
 
-  let errors: Error[] | null = $state(null)
-  let loaded: any[] | null = $state(null)
+  let error: GrapheneError | null = $state(null)
+  let loaded: QueryResult | null = $state(null)
+  let tooltipId = `query-error-${Math.random().toString(36).slice(2)}`
 
-  let handleResults = (result: any) => {
-    errors = result.errors || null
-    loaded = result.rows
+  let handleResults = (result: QueryResult) => {
+    error = result?.error || null
+    loaded = {rows: result?.rows ?? [], fields: result?.fields ?? [], error: result?.error, sql: result?.sql}
+    if (result?.error) logger.error(result.error, {...result.error, componentId: logger.id})
   }
 
   onMount(() => {
     if (typeof data !== 'string') {
-      loaded = data.rows ?? null
+      error = data.error || null
+      loaded = {rows: data.rows ?? [], fields: data.fields ?? [], error: data.error, sql: data.sql}
     } else {
       let usedFields = Object.fromEntries(Object.entries(fields).filter(e => !!e[1]))
-      window.$GRAPHENE.query(data, usedFields, handleResults)
+      window.$GRAPHENE.query(data, usedFields, handleResults, logger.id)
     }
   })
 
@@ -33,45 +43,28 @@
   })
 </script>
 
-{#if errors}
-  <ErrorChart title="Error" error={errors[0]} />
+{#if error}
+  {#if inline}
+    <span class="inline-error">
+      <button class="inline-error__icon" type="button" aria-label="Query failed" aria-describedby={tooltipId}>!</button>
+      <span class="inline-error__tooltip" id={tooltipId} role="tooltip">
+        <ErrorDisplay {error} />
+      </span>
+    </span>
+  {:else}
+    <div style="min-height:{height}px;width:100%;display:grid;align-content:center;padding:8px;box-sizing:border-box">
+      <ErrorDisplay {error} />
+    </div>
+  {/if}
 {:else if !loaded}
-  <div class='ql-skeleton' style={`height:${height}px`} role="status" aria-live="polite">
-    <span class="ql-skeleton__pulse"></span>
-  </div>
-{:else if loaded.length == 0}
+  <Skeleton />
+{:else if loaded.rows.length == 0}
   <div class="empty-chart" role="note">Dataset is empty - query ran successfully, but no data was returned from the database</div>
 {:else}
   {@render children?.(loaded)}
 {/if}
 
 <style>
-  .ql-skeleton {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    background: var(--chart-skeleton-bg, #f3f4f6);
-    border-radius: 4px;
-  }
-
-  .ql-skeleton__pulse {
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
-    animation: ql-pulse 1.4s ease-in-out infinite;
-    content: '';
-  }
-
-  @keyframes ql-pulse {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
   .empty-chart {
     width: 100%;
     padding: 12px;
@@ -83,4 +76,45 @@
     text-align: center;
     background: rgba(243, 244, 246, 0.6);
   }
+
+  .inline-error {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .inline-error__icon {
+    width: 1.05em;
+    height: 1.05em;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--graphene-error-border, #ef4444);
+    border-radius: 999px;
+    background: var(--graphene-error-background, #fef2f2);
+    color: var(--graphene-error-content-strong, #b91c1c);
+    cursor: help;
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .inline-error__tooltip {
+    display: none;
+    position: absolute;
+    z-index: 1000;
+    top: calc(100% + 8px);
+    left: 0;
+    width: min(420px, 80vw);
+    text-align: left;
+    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18));
+  }
+
+  .inline-error:hover .inline-error__tooltip,
+  .inline-error:focus-within .inline-error__tooltip {
+    display: block;
+  }
 </style>

package/dist/ui/components/Row.svelte

@@ -4,11 +4,12 @@
   div {
     display: flex;
     flex-direction: row;
-    gap: 1rem;
+    gap: 1.5rem;
   }
 
   /* Ensure styles apply to slotted children (not scoped) */
   div > :global(*) {
     flex: 1 1 0;
+    min-width: 0; /* avoids some rendering instability */
   }
 </style>

package/dist/ui/components/ScatterPlot.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import ECharts from './ECharts.svelte'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
+  import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
+
+  interface Props {
+    data: string | QueryResult
+    x: string
+    y: string
+    splitBy?: string
+    title?: string
+    height?: string | number
+    width?: string | number
+  }
+
+  let {
+    data,
+    x,
+    y,
+    splitBy = undefined,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+  }: Props = $props()
+
+  function buildConfig(): EChartsConfig {
+    let yFields = parseCommaList(y)
+    if (splitBy && yFields.length > 1) throw new Error('ScatterPlot does not support splitBy with multiple y fields')
+
+    let series: SeriesWithGroupingHint[]
+
+    if (splitBy) {
+      // "tall" data, one template split into one series per splitBy value by enrich()
+      series = [{type: 'scatter' as const, encode: {x, y: yFields[0], splitBy}}]
+    } else {
+      // "wide" data, one scatter series per field listed in y
+      series = yFields.map(field => ({type: 'scatter' as const, name: field, encode: {x, y: field}}))
+    }
+
+    return {
+      title: title ? {text: title} : undefined,
+      tooltip: {trigger: 'item'},
+      legend: {show: Boolean(splitBy || yFields.length > 1)},
+      grid: {left: 56, bottom: 52},
+      xAxis: {name: x, nameLocation: 'middle', nameGap: 28},
+      yAxis: {name: y, nameLocation: 'middle', nameGap: 40},
+      series,
+    }
+  }
+</script>
+
+<ECharts data={data} config={buildConfig()} {height} {width} />

package/dist/ui/components/Skeleton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  let {height}: {height: number} = $props()
+</script>
+
+<div class='ql-skeleton' style={`height:${height}px`} role="status" aria-live="polite">
+  <span class="ql-skeleton__pulse"></span>
+</div>
+
+<style>
+  .ql-skeleton {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background: var(--chart-skeleton-bg, #f3f4f6);
+    border-radius: 4px;
+  }
+
+  .ql-skeleton__pulse {
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
+    animation: ql-pulse 1.4s ease-in-out infinite;
+    content: '';
+  }
+
+  @keyframes ql-pulse {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+</style>

package/dist/ui/components/Table.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type {Snippet} from 'svelte'
+  import type {QueryResult} from '../component-utilities/types.ts'
   import QueryLoad from './QueryLoad.svelte'
   import TableInner from './_Table.svelte'
 
   interface Props {
-    data: string
+    data: string | QueryResult
     children?: Snippet
     [key: string]: unknown
   }
@@ -14,7 +15,7 @@
   let spreadProps = $derived(Object.fromEntries(Object.entries(restProps).filter(([, value]) => value !== undefined)))
 </script>
 
-{#snippet tableContent(loaded: any[])}
+{#snippet tableContent(loaded: QueryResult)}
   {#if children}
     <TableInner {...spreadProps} data={loaded} {children} />
   {:else}

package/dist/ui/components/TableGroupRow.svelte

@@ -2,15 +2,14 @@
   import TableCell from './TableCell.svelte'
   import TableGroupToggle from './TableGroupToggle.svelte'
   import InlineDelta from './InlineDelta.svelte'
-  import {aggregateColumn, safeExtractColumn} from '../component-utilities/tableUtils'
-  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
-  import {toBoolean} from '../component-utilities/convert'
+  import {summarizeColumn, type SummaryMetric} from '../component-utilities/dataSummary.ts'
+  import {formatFromField} from '../component-utilities/format.ts'
+  import {toBoolean} from '../component-utilities/inputUtils'
 
   interface Props {
     groupName: string
     currentGroupData?: any[]
     toggled?: boolean
-    columnSummary?: any[]
     rowNumbers?: boolean | string
     rowColor?: string
     subtotals?: boolean | string
@@ -20,7 +19,7 @@
   }
 
   let {
-    groupName, currentGroupData = [], toggled = true, columnSummary = [],
+    groupName, currentGroupData = [], toggled = true,
     rowNumbers: rowNumbersProp = undefined, rowColor = undefined, subtotals: subtotalsProp = true,
     orderedColumns = [], compact: compactProp = undefined, onToggle,
   }: Props = $props()
@@ -29,6 +28,16 @@
   let subtotals = $derived(toBoolean(subtotalsProp) ?? true)
   let compact = $derived(toBoolean(compactProp))
 
+  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
+  }
+
   const toggleGroup = () => onToggle?.({groupName})
 
   const handleKeydown = (event: KeyboardEvent) => {
@@ -38,12 +47,6 @@
     }
   }
 
-  const resolveFormat = (column: any, summary: any) => {
-    if (column.subtotalFmt) return getFormatObjectFromString(column.subtotalFmt)
-    if (column.totalFmt) return getFormatObjectFromString(column.totalFmt)
-    if (column.fmt) return getFormatObjectFromString(column.fmt, summary.format?.valueType)
-    return summary.format
-  }
 </script>
 
 <tr
@@ -63,8 +66,6 @@
   {/if}
 
   {#each orderedColumns as column, index (index)}
-    {@const summary = safeExtractColumn(column, columnSummary)}
-    {@const format = resolveFormat(column, summary)}
     {#if index === 0}
       {#if rowNumbers}
         <!-- Covered by the row-number label cell -->
@@ -77,30 +78,21 @@
       </TableCell>
       {/if}
     {:else if subtotals}
-      <TableCell class={summary.type} {compact} align={column.align}>
-        {#if ['sum', 'mean', 'median', 'min', 'max', 'weightedMean', 'count', 'countDistinct', undefined].includes(column.totalAgg) || column.subtotalFmt}
-          {#if column.contentType === 'delta'}
-            <InlineDelta
-              value={aggregateColumn(currentGroupData, column.id, column.totalAgg, summary.type, column.weightCol)}
-              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(
-              aggregateColumn(currentGroupData, column.id, column.totalAgg, summary.type, column.weightCol),
-              format,
-              summary.columnUnitSummary,
-            )}
-          {/if}
+      <TableCell class={column.type} {compact} align={column.align}>
+        {#if column.contentType === 'delta'}
+          <InlineDelta
+            value={getAggregateValue(currentGroupData, column)}
+            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}
-          {column.totalAgg}
+          {formatFromField(column.field, getAggregateValue(currentGroupData, column))}
         {/if}
       </TableCell>
     {:else}

package/dist/ui/components/TableHarness.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Column from './Column.svelte'
+  import Table from './Table.svelte'
+
+  interface Props {
+    data: any
+    tableProps?: Record<string, unknown>
+    columns?: Record<string, unknown>[]
+    width?: number | string
+  }
+
+  let {data, tableProps = {}, columns = [], width = 880}: Props = $props()
+  let wrapperWidth = $derived(typeof width === 'number' ? `${width}px` : width)
+</script>
+
+<div class="table-harness" style:width={wrapperWidth}>
+  {#if columns.length > 0}
+    <Table data={data} {...tableProps}>
+      {#each columns as column, index (index)}
+        <Column {...column} />
+      {/each}
+    </Table>
+  {:else}
+    <Table data={data} {...tableProps} />
+  {/if}
+</div>
+
+<style>
+  .table-harness {
+    max-width: 100%;
+  }
+</style>

package/dist/ui/components/TableHeader.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import SortIcon from './SortIcon.svelte'
-  import {safeExtractColumn} from '../component-utilities/tableUtils'
-  import {toBoolean} from '../component-utilities/convert'
+  import {toBoolean} from '../component-utilities/inputUtils'
 
   interface Props {
     rowNumbers?: boolean | string
     headerColor?: string
     headerFontColor?: string
     orderedColumns?: any[]
-    columnSummary?: any[]
     sortable?: boolean | string
     sortClick?: (columnId: string) => () => void
     formatColumnTitles?: boolean | string
@@ -20,7 +18,7 @@
 
   let {
     rowNumbers: rowNumbersProp = false, headerColor = undefined, headerFontColor = undefined,
-    orderedColumns = [], columnSummary = [], sortable: sortableProp = true, sortClick = () => () => {},
+    orderedColumns = [], sortable: sortableProp = true, sortClick = () => () => {},
     formatColumnTitles: formatColumnTitlesProp = true, sortObj = {col: null, ascending: null},
     wrapTitles: wrapTitlesProp = false, compact: compactProp = false, link = undefined,
   }: Props = $props()
@@ -31,12 +29,11 @@
   let wrapTitles = $derived(toBoolean(wrapTitlesProp) ?? false)
   let compact = $derived(toBoolean(compactProp) ?? false)
 
-  const getWrapTitleAlignment = (column: any) => {
-    if (column.align === 'right') return 'header-title--align-end'
-    if (column.align === 'center') return 'header-title--align-center'
-    let extracted = safeExtractColumn(column, columnSummary)
-    if (extracted.type === 'number') return 'header-title--align-end'
-    return 'header-title--align-start'
+  const getHeaderAlignment = (column: any) => {
+    if (column.align) return column.align
+    if (['sparkline', 'sparkbar', 'sparkarea', 'bar'].includes(column.contentType)) return 'center'
+    if (column.type === 'number') return 'right'
+    return 'left'
   }
 
   const computeGroupSpans = (columns: any[]) => {
@@ -55,10 +52,10 @@
     return sortObj.ascending ? 'ascending' : 'descending'
   }
 
-  const resolveHeaderTitle = (column: any, summary: any) => {
+  const resolveHeaderTitle = (column: any) => {
     if (column.title) return column.title
-    if (formatColumnTitles) return summary.title
-    return summary.id
+    if (formatColumnTitles) return column.defaultTitle ?? column.id
+    return column.id
   }
 
   let columnsWithGroupSpan = $derived(computeGroupSpans(orderedColumns))
@@ -71,7 +68,7 @@
       {#if rowNumbers}
         <th class={`header-index ${compact ? 'header-index--compact' : ''}`} style:background-color={headerColor}></th>
       {/if}
-      {#each columnsWithGroupSpan as column (column.id)}
+      {#each columnsWithGroupSpan as column (column.identifier ?? column.id)}
         {#if column.colGroup && column.isNewGroup}
           <th class="header-group" colspan={column.span}>
             <div class="header-group__label">{column.colGroup}</div>
@@ -95,33 +92,28 @@
         style:color={headerFontColor}
       ></th>
     {/if}
-    {#each orderedColumns as column (column.id)}
-      {@const summary = safeExtractColumn(column, columnSummary)}
+    {#each orderedColumns as column (column.identifier ?? column.id)}
       <th
         role="columnheader"
-        class={`header-cell ${summary.type ?? ''} ${compact ? 'header-cell--compact' : ''}`}
+        class={`header-cell ${column.type ?? ''} ${compact ? 'header-cell--compact' : ''}`}
         style:color={headerFontColor}
         style:background={headerColor}
-        style:text-align={column.align ?? (['sparkline', 'sparkbar', 'sparkarea', 'bar'].includes(column.contentType) ? 'center' : undefined)}
+        style:text-align={getHeaderAlignment(column)}
         style:cursor={sortable ? 'pointer' : 'auto'}
         onclick={sortable ? sortClick(column.id) : undefined}
         aria-sort={getAriaSortValue(column.id)}
       >
-        <div class={`header-title ${wrapTitles || column.wrapTitle ? 'header-title--wrap' : ''} ${wrapTitles || column.wrapTitle ? getWrapTitleAlignment(column) : ''}`.trim()}>
-          <span class={`header-title__text ${wrapTitles || column.wrapTitle ? 'header-title__text--wrap' : ''}`}>
-            {resolveHeaderTitle(column, summary)}
-            {#if column.description}
-              <span class="header-title__info" title={column.description}>ⓘ</span>
-            {/if}
-          </span>
+        <span class={`header-title__text ${wrapTitles || column.wrapTitle ? 'header-title__text--wrap' : ''}`}>
+          {resolveHeaderTitle(column)}
+          {#if column.description}
+            <span class="header-title__info" title={column.description}>ⓘ</span>
+          {/if}
+        </span>
+        {#if sortObj.col === column.id}
           <span class="header-sort-indicator">
-            {#if sortObj.col === column.id}
-              <SortIcon ascending={sortObj.ascending ?? undefined} />
-            {:else}
-              <span class="header-sort-placeholder"><SortIcon ascending /></span>
-            {/if}
+            <SortIcon ascending={sortObj.ascending ?? undefined} />
           </span>
-        </div>
+        {/if}
       </th>
     {/each}
     {#if link}
@@ -178,40 +170,24 @@
   }
 
   .header-cell {
+    position: relative;
     padding: 2px 13px 2px 6px;
     vertical-align: bottom;
   }
 
-  .header-cell--compact {
-    padding: 1px 6px 1px 1px;
-    font-size: 12px;
+  .header-cell:first-child {
+    padding-left: 3px;
   }
 
-  .header-title {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 4px;
-  }
-
-  .header-title--wrap {
-    align-items: stretch;
-  }
-
-  .header-title--align-end {
-    justify-content: flex-end;
-  }
-
-  .header-title--align-center {
-    justify-content: center;
-  }
-
-  .header-title--align-start {
-    justify-content: flex-start;
+  .header-cell--compact {
+    padding: 1px 16.5px 1px 1px;
+    font-size: 12px;
   }
 
   .header-title__text {
     display: inline-block;
+    max-width: 100%;
+    text-align: inherit;
     letter-spacing: -0.015em;
   }
 
@@ -227,14 +203,13 @@
   }
 
   .header-sort-indicator {
+    position: absolute;
+    right: 1px;
+    bottom: 4px;
     display: inline-flex;
     align-items: center;
   }
 
-  .header-sort-placeholder {
-    visibility: hidden;
-  }
-
   .header-link-cell {
     width: 24px;
   }