@graphenedata/cli 0.0.15 → 0.0.16

package/dist/ui/components/DateRange.svelte

@@ -1,6 +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
@@ -27,13 +28,15 @@
   let mounted = false
   let queryKey = ''
   let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
+  let pageInputs = getPageInputs()
+  let field = captureInitial(() => pageInputs.dateRange(name))
 
   let domainStart: string | null = $state(null)
   let domainEnd: string | null = $state(null)
 
   let currentStart: string | null = $state(null)
   let currentEnd: string | null = $state(null)
-  let currentPreset: string = $state('')
+  let currentPreset: string | null = $state(null)
   let touched = false
 
   let hidePrint = $derived(toBoolean(hideDuringPrint))
@@ -46,16 +49,16 @@
 
   onMount(() => {
     mounted = true
-    currentStart = normalizeInput(start)
-    currentEnd = normalizeInput(end)
-    if (defaultValue && presetList.includes(defaultValue)) {
-      applyPreset(defaultValue, false)
-    } else {
-      updateParams()
-    }
+    currentStart = field.hasExternalValue ? field.value.start : normalizeInput(start)
+    currentEnd = field.hasExternalValue ? field.value.end : normalizeInput(end)
+    currentPreset = inferPreset(currentStart, currentEnd)
+    if (field.hasExternalValue) updateParams()
+    else if (defaultValue && presetList.includes(defaultValue)) applyPreset(defaultValue, false)
+    else updateParams()
     refreshQuery()
     return () => {
       mounted = false
+      field.destroy()
       if (queryHandler) {
         window.$GRAPHENE?.unsubscribe?.(queryHandler)
         queryHandler = null
@@ -67,6 +70,12 @@
     refreshQuery()
   })
 
+  $effect(() => {
+    if (currentStart === field.value.start && currentEnd === field.value.end) return
+    if (!mounted) return
+    setRange(field.value.start, field.value.end, inferPreset(field.value.start, field.value.end), {persist: false})
+  })
+
   function refreshQuery() {
     if (!mounted) return
     let key = data && dates ? `${data}::${dates}` : ''
@@ -78,7 +87,7 @@
     queryKey = key
     if (!data || !dates) return
     let handler = (res: {rows?: any[]; error?: any}) => {
-      if (res.error || !res.rows?.length) return
+      if (!res || res.error || !res.rows?.length) return
       let values = res.rows
         .map(row => normalizeInput(row[dates]))
         .filter((val): val is string => !!val)
@@ -86,13 +95,15 @@
       values.sort()
       domainStart = values[0]
       domainEnd = values[values.length - 1]
-      if (!touched) {
+      if (field.hasExternalValue) {
+        currentPreset = inferPreset(currentStart, currentEnd)
+      } else if (!touched) {
         if (defaultValue && presetList.includes(defaultValue)) {
           applyPreset(defaultValue, false)
         } else {
           let startCandidate = currentStart ?? domainStart
           let endCandidate = currentEnd ?? (domainEnd ? addDaysString(domainEnd, 1) : null)
-          setRange(startCandidate, endCandidate, currentPreset, false)
+          setRange(startCandidate, endCandidate, currentPreset, {markTouched: false, persist: true})
         }
       }
     }
@@ -149,27 +160,48 @@
     return copy
   }
 
-  function setRange(startValue: string | null, endValue: string | null, preset: string, markTouched: boolean) {
+  // We only persist start/end in URL state, so the preset label is inferred by matching
+  // the current range against the configured preset definitions.
+  function inferPreset(startValue: string | null, endValue: string | null): string | null {
+    if (!startValue && !endValue) return null
+    let baseEnd = (() => {
+      if (endValue) {
+        let parsed = new Date(endValue)
+        if (!Number.isNaN(parsed.getTime())) return addDays(parsed, -1)
+      }
+      if (domainEnd) return new Date(domainEnd)
+      return new Date()
+    })()
+    if (Number.isNaN(baseEnd.getTime())) return null
+    for (let preset of presetList) {
+      let range = computePresetRange(preset, baseEnd)
+      let presetStart = range?.start ? formatDate(range.start) : null
+      let presetEnd = range?.end ? formatDate(range.end) : null
+      if (presetStart === startValue && presetEnd === endValue) return preset
+    }
+    return null
+  }
+
+  function setRange(startValue: string | null, endValue: string | null, preset: string | null, {markTouched = false, persist = true}: {markTouched?: boolean; persist?: boolean} = {}) {
     currentStart = startValue
     currentEnd = endValue
     currentPreset = preset
     if (markTouched) touched = true
-    updateParams()
+    if (persist) updateParams()
   }
 
   function updateParams() {
-    window.$GRAPHENE.updateParam(`${name}_start`, currentStart)
-    window.$GRAPHENE.updateParam(`${name}_end`, currentEnd)
+    field.set({start: currentStart, end: currentEnd})
   }
 
   function onStartChange(event: Event) {
     let value = (event.currentTarget as HTMLInputElement).value || null
-    setRange(value, currentEnd, '', true)
+    setRange(value, currentEnd, null, {markTouched: true, persist: true})
   }
 
   function onEndChange(event: Event) {
     let value = (event.currentTarget as HTMLInputElement).value || null
-    setRange(currentStart, value, '', true)
+    setRange(currentStart, value, null, {markTouched: true, persist: true})
   }
 
   function applyPreset(preset: string, markTouched = true) {
@@ -183,7 +215,7 @@
     if (!range) return
     let startVal = range.start ? formatDate(range.start) : null
     let endVal = range.end ? formatDate(range.end) : null
-    setRange(startVal, endVal, preset, markTouched)
+    setRange(startVal, endVal, preset, {markTouched, persist: true})
   }
 
   function computePresetRange(preset: string, baseEndInclusive: Date): {start: Date | null; end: Date | null} | null {
@@ -257,7 +289,7 @@
   function onPresetChange(event: Event) {
     let value = (event.currentTarget as HTMLSelectElement).value
     if (!value) {
-      currentPreset = ''
+      currentPreset = null
       touched = true
       return
     }
@@ -300,6 +332,7 @@
     }
   }
   .input-label {
+    font-family: var(--font-ui);
     font-size: 12px;
     font-weight: 600;
     color: var(--input-label-color, #374151);
@@ -323,7 +356,7 @@
     border: 1px solid rgba(107, 114, 128, 0.4);
     font-size: 14px;
     min-width: 150px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
     font-synthesis: none;
   }
   .preset-select {
@@ -332,7 +365,7 @@
     border-radius: 6px;
     border: 1px solid rgba(107, 114, 128, 0.4);
     font-size: 13px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
     font-synthesis: none;
   }
 </style>

package/dist/ui/components/Dropdown.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount, setContext, tick, type Snippet} from 'svelte'
-  import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
   import {ensureArray, toBoolean} from '../component-utilities/inputUtils'
+  import {captureInitial, getPageInputs} from '../internal/pageInputs.svelte.js'
 
   interface Option {
     value: any
@@ -42,6 +42,8 @@
   let touched = false
   let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
   let queryKey = ''
+  let pageInputs = getPageInputs()
+  let field = captureInitial(() => pageInputs.dropdown(name, toBoolean(multiple)))
 
   let isOpen = $state(false)
   let searchTerm = $state('')
@@ -59,7 +61,7 @@
       syncSelection(false)
     }
   }
-  setContext(DROPDOWN_CONTEXT, registerOption)
+  setContext('dropdown', registerOption)
 
   const optionKey = (val: any): string => {
     if (val === null) return 'null'
@@ -104,6 +106,12 @@
     if (isOpen) activeIndex = ensureActiveIndex(activeIndex, filteredOptions)
   })
 
+  $effect(() => {
+    if (!sameSelection(selection, field.value)) {
+      setSelection(field.value, {persist: false})
+    }
+  })
+
   function setupQuery() {
     if (!mounted) return
     let key = data ? `${data}::${value}::${resolvedLabelField || ''}` : ''
@@ -121,7 +129,7 @@
     let columns = [value]
     if (resolvedLabelField && resolvedLabelField !== value) columns.push(resolvedLabelField)
     let handler = (res: {rows?: any[]; error?: any}) => {
-      if (res.error) return
+      if (!res || res.error) return
       if (!res.rows) return
       queryOptions = res.rows.map(row => ({
         value: row[value],
@@ -273,12 +281,12 @@
       let exists = selection.some(val => optionKey(val) === key)
       if (exists) {
         let next = selection.filter(val => optionKey(val) !== key)
-        setSelection(next, true)
+        setSelection(next, {fromUser: true, persist: true})
       } else {
-        setSelection([...selection, opt.value], true)
+        setSelection([...selection, opt.value], {fromUser: true, persist: true})
       }
     } else {
-      setSelection([opt.value], true)
+      setSelection([opt.value], {fromUser: true, persist: true})
       closeMenu(fromKeyboard)
     }
   }
@@ -295,8 +303,11 @@
 
   onMount(() => {
     mounted = true
-    let defaults = ensureArray(defaultValue)
-    if (!hasNoDefault && defaults.length) setSelection(defaults, false)
+    if (field.hasExternalValue) setSelection(field.value, {persist: false})
+    else {
+      let defaults = ensureArray(defaultValue)
+      if (!hasNoDefault && defaults.length) setSelection(defaults, {persist: true})
+    }
     syncSelection(false)
     setupQuery()
     if (typeof document !== 'undefined') {
@@ -305,6 +316,7 @@
     }
     return () => {
       mounted = false
+      field.destroy()
       if (queryHandler) {
         window.$GRAPHENE?.unsubscribe?.(queryHandler)
         queryHandler = null
@@ -327,15 +339,21 @@
   })
 
   function syncSelection(fromUser: boolean) {
+    // Reconcile persisted selection with the current option set, while keeping external values
+    // authoritative and only applying defaults/select-all before the user has interacted.
     let opts = availableOptions
     if (!opts.length) {
-      if (selection.length) updateInputPayload(selection)
+      // Keep the bound param initialized even before options load.
+      // This prevents $param references from throwing "Missing param" on first render.
+      updateInputPayload(selection)
       return
     }
     let nextSelection = selection.filter(val => valueMap.has(optionKey(val)))
     if (!fromUser) {
       let defaults = ensureArray(defaultValue)
-      if (multi && selectAllDefault) {
+      if (field.hasExternalValue) {
+        nextSelection = nextSelection
+      } else if (multi && selectAllDefault) {
         nextSelection = opts.map(o => o.value)
       } else if (!touched) {
         if (defaults.length && !hasNoDefault) {
@@ -345,34 +363,36 @@
         }
       }
     }
-    setSelection(nextSelection, fromUser)
+    setSelection(nextSelection, {fromUser, persist: true})
+  }
+
+  function sameSelection(left: any[], right: any[]) {
+    let leftKeys = left.map(optionKey)
+    let rightKeys = right.map(optionKey)
+    return leftKeys.length === rightKeys.length && leftKeys.every((key, index) => key === rightKeys[index])
   }
 
-  function setSelection(values: any[], fromUser: boolean) {
-    let keys = values.map(optionKey)
-    let existingKeys = selection.map(optionKey)
-    let changed = keys.length !== existingKeys.length || keys.some((k, idx) => k !== existingKeys[idx])
-    if (!changed) {
-      if (!fromUser) updateInputPayload(selection)
+  function setSelection(values: any[], {fromUser = false, persist = true}: {fromUser?: boolean; persist?: boolean} = {}) {
+    if (sameSelection(values, selection)) {
+      if (persist && !fromUser) updateInputPayload(selection)
       return
     }
     selection = values
     if (fromUser) touched = true
-    updateInputPayload(selection)
+    if (persist) updateInputPayload(selection)
   }
 
   function updateInputPayload(values: any[]) {
-    let paramValue = values.length ? values[0] : null
-    window.$GRAPHENE.updateParam(name, paramValue)
+    field.set(values)
   }
 
   function selectAll() {
     if (!multi) return
-    setSelection(availableOptions.map(opt => opt.value), true)
+    setSelection(availableOptions.map(opt => opt.value), {fromUser: true, persist: true})
   }
 
   function clearSelection() {
-    setSelection([], true)
+    setSelection([], {fromUser: true, persist: true})
   }
 
   let elementId = $derived(`dropdown-${name}`)
@@ -554,6 +574,7 @@
     }
   }
   .input-label {
+    font-family: var(--font-ui);
     font-size: 12px;
     font-weight: 600;
     color: var(--input-label-color, #374151);
@@ -583,7 +604,7 @@
     background: #ffffff;
     color: #1f2937;
     font-size: 14px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
     font-synthesis: none;
     cursor: pointer;
     transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
@@ -660,7 +681,7 @@
     padding: 6px 10px;
     font-size: 13px;
     line-height: 16px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
     font-synthesis: none;
     background: #f9fafb;
     color: inherit;
@@ -688,7 +709,7 @@
     cursor: pointer;
     font-size: 14px;
     line-height: 18px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
     font-synthesis: none;
     transition: background 100ms ease, color 100ms ease;
     color: #1f2937;
@@ -755,7 +776,7 @@
     background: none;
     color: #2563eb;
     font-size: 13px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
     font-synthesis: none;
     cursor: pointer;
     padding: 4px 0;

package/dist/ui/components/DropdownOption.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {getContext, onMount} from 'svelte'
-  import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
 
   interface Props {
     value: any
@@ -10,7 +9,7 @@
   let {value, valueLabel = undefined}: Props = $props()
 
   type RegisterFn = ((option: {value: any; label: string}) => (() => void) | void) | undefined
-  const register = getContext<RegisterFn>(DROPDOWN_CONTEXT)
+  const register = getContext<RegisterFn>('dropdown')
 
   let unregister: (() => void) | void
 

package/dist/ui/components/ECharts.svelte

@@ -1,91 +1,205 @@
 <script lang="ts">
-  import echarts from '../component-utilities/echarts.js'
-  import {getThemeStores} from '../component-utilities/themeStores'
+  import {init} from 'echarts'
+  import {onDestroy, onMount, untrack} from 'svelte'
+  import ErrorDisplay from '../internal/ErrorDisplay.svelte'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
+  import {enrich, horizontalBarCount} from '../component-utilities/enrich.ts'
+  import type {EChartsConfig, NormalConfig, QueryResult} from '../component-utilities/types.ts'
+  import '../component-utilities/theme.ts'
+  import Skeleton from './Skeleton.svelte'
 
   interface Props {
-    config: any
+    config: EChartsConfig
+    data: string | QueryResult
     height?: string | number
     width?: string | number
-    data: any
-    queryID?: any
     renderer?: 'canvas' | 'svg'
-    echartsOptions?: any
-    seriesOptions?: any
-    seriesColors?: any
-    connectGroup?: string
-    xAxisLabelOverflow?: 'truncate' | 'break'
-    showAllXAxisLabels?: boolean
-    swapXY?: boolean
-    chartTitle?: string
-    onclick?: (params: any) => void
+    componentId?: string
   }
 
-  const {activeAppearance} = getThemeStores()
-
   let {
-    config, height = '240px', width = '100%', data, queryID = undefined, renderer = undefined,
-    echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
-    connectGroup = undefined, xAxisLabelOverflow = undefined, showAllXAxisLabels = undefined,
-    swapXY = undefined, chartTitle = undefined, onclick = undefined,
-  }: Props = $props()
-
-  const isBrowser = typeof window !== 'undefined'
-
-  const toDimension = (dimension: string | number | undefined, fallback: string) => {
-    if (typeof dimension === 'number') return `${dimension}px`
-    if (!dimension) return fallback
-    return dimension
+    config = {},
+    data,
+    height = undefined,
+    width = '100%',
+    renderer = 'svg',
+    componentId = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
+
+  config ||= {}
+
+  let queryFieldsForLogger = untrack(() => typeof data == 'string' ? queryFields(config) : {})
+  let chartLogger = untrack(() => componentLogger(componentId || 'ECharts', componentId ? {} : {data: typeof data == 'string' ? data : undefined, ...queryFieldsForLogger}))
+  let displayId = untrack(() => componentId || chartLogger.id)
+  untrack(() => logExtraProps(chartLogger, 'ECharts', extraProps))
+
+  // not state, because we don't want `$effect` to run when they change
+  let node: HTMLDivElement | null = null
+  let chart: any
+  let resizeObserver: ResizeObserver | null = null
+
+  // Use `raw` because data can be big, and there's little upside to making it reactive
+  let loaded = $state.raw<QueryResult | null>(null)
+  let chartError: Error | null = $state(null)
+  let mountedComponentId: string | null = $state(displayId)
+  let chartTitle: string | undefined = $state(undefined)
+  let chartSizeStyle: string = $state(calculateChartSize())
+
+  function handleResults (res: QueryResult) {
+    chartError = null
+    loaded = res
+    if (res?.error) chartLogger.error(res.error, {...res.error, componentId: displayId})
+  }
+
+  // If `data` is just a string, kick off a query to fetch the data.
+  // This maybe could be an effect, but we'd have to ensure we don't double-subscribe.
+  onMount(() => {
+    resizeObserver = new ResizeObserver(() => chart?.resize())
+    if (node) resizeObserver.observe(node)
+
+    if (typeof data == 'string') {
+      try {
+        mountedComponentId = window.$GRAPHENE.query(data, queryFieldsForLogger, handleResults, displayId)
+      } catch (error) {
+        chartError = error instanceof Error ? error : new Error(String(error))
+      }
+    } else {
+      loaded = data
+    }
+  })
+
+  onDestroy(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+    window.$GRAPHENE.unsubscribe(handleResults)
+    destroyChart()
+  })
+
+  $effect(() => {
+    if (chartError) return
+
+    if (!loaded || loaded.error || loaded.rows.length == 0) {
+      destroyChart()
+      return
+    }
+
+    if (!chart) {
+      chart = init(node, 'graphene-theme', {renderer})
+      chart.on('legendselectchanged', renderChart)
+    }
+
+    try {
+      window.$GRAPHENE?.renderStart?.(`chart:${chart.id}`)
+      renderChart()
+      chartError = null
+      window.$GRAPHENE?.renderComplete?.(`chart:${chart.id}`)
+    } catch (error) {
+      console.error('Chart failed to render', error)
+      chartError = error instanceof Error ? error : new Error(String(error))
+      chartLogger.error(chartError, {componentId: displayId})
+      window.$GRAPHENE?.renderComplete?.(`chart:${chart.id}`)
+      destroyChart()
+    }
+  })
+
+  // Build a fresh enriched option each render so legend-driven stack rounding
+  // always reflects the currently visible series.
+  function renderChart() {
+    if (!chart || !loaded) return
+
+    // clone config, since enriching mutates the config, and mutating a prop is weird
+    // structuredClone doesn't like proxies, so use state.snapshot
+    let cloned = structuredClone($state.snapshot(config)) as EChartsConfig
+    let rows = loaded.rows
+    let fields = loaded.fields || []
+    cloned.legendSelection = chart.getOption()?.legend?.[0]?.selected
+    let enriched = enrich(cloned, rows, fields)
+
+    chartTitle = enriched.title.find(t => t?.text)?.text
+    chartSizeStyle = calculateChartSize(enriched, rows, fields)
+    chart.setOption({...enriched, animation: false, animationDuration: 0, animationDurationUpdate: 0}, true)
+  }
+
+  function destroyChart() {
+    if (!chart) return
+    chart.off('legendselectchanged', renderChart)
+    chart.dispose()
+    chart = null
   }
+
+  function queryFields(config: EChartsConfig) {
+    let fields: Record<string, string[]> = {}
+    let series = Array.isArray(config.series) ? config.series : [config.series]
+    let entries = series.flatMap(s => Object.entries(s?.encode || {}))
+
+    for (let [attr, col] of entries) {
+      let value = queryableEncodeValue(attr, col)
+      if (!value) continue
+      fields[attr] ||= []
+      if (!fields[attr].includes(value)) fields[attr].push(value)
+    }
+
+    return fields
+  }
+
+  function queryableEncodeValue(attr: string, value: unknown) {
+    if (typeof value !== 'string') return undefined
+    let trimmed = value.trim()
+    if (!trimmed) return undefined
+
+    // sort supports "column" or "column asc|desc". We only need the field in SELECT.
+    if (attr === 'sort') return trimmed.split(/\s+/)[0]
+    return trimmed
+  }
+
+  function calculateChartSize(config?: NormalConfig, rows: Record<string, any>[] = [], fields: any[] = []) {
+    let threshold = 8 // over this many bars, start to grow
+    let resolvedHeight: string | number = height ?? '320px'
+    let barSeries = config?.series.find(s => s.type == 'bar')
+    let categoricalY = config?.yAxis[0]?.type == 'category'
+
+    if (config && barSeries && categoricalY) {
+      let distinctX = horizontalBarCount(config, rows, fields)
+      if (distinctX > threshold) resolvedHeight = 320 * Math.max(1, distinctX / threshold)
+    }
+
+    return `height:${toDim(resolvedHeight)};width:${toDim(width ?? '100%')};`
+  }
+
+  function toDim(dim: string | number) {
+    let t = typeof dim
+    if (t == 'number' || (t == 'string' && (dim as string).match(/^\d+$/))) return `${dim}px`
+    return dim
+  }
+
 </script>
 
-<div class="echarts-container">
-  {#if !isBrowser}
-    <div class="echarts-loading" style={`height:${toDimension(height, '240px')}`}>Loading…</div>
-  {:else}
-    <div
-      class="echarts-chart"
-      data-chart-title={chartTitle ?? undefined}
-      data-query-id={queryID}
-      style={`height:${toDimension(height, '240px')};width:${toDimension(width, '100%')}`}
-      use:echarts={{
-        config,
-        data,
-        echartsOptions,
-        seriesOptions,
-        onclick,
-        renderer,
-        connectGroup,
-        xAxisLabelOverflow,
-        showAllXAxisLabels,
-        swapXY,
-        seriesColors,
-        theme: $activeAppearance,
-      }}
-    ></div>
+<div class="echarts" bind:this={node} style={chartSizeStyle} data-component-id={mountedComponentId} data-chart-title={chartTitle}>
+  {#if loaded?.error || chartError}
+    <ErrorDisplay error={loaded?.error || chartError} />
+  {:else if !loaded}
+    <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>
   {/if}
 </div>
 
 <style>
-  .echarts-container {
+  .echarts {
     position: relative;
-    margin: 8px 0;
   }
 
-  .echarts-chart {
+  .empty-chart {
     width: 100%;
-    overflow: visible;
-    user-select: none;
-  }
-
-  .echarts-loading {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid rgba(209, 213, 219, 0.8);
+    height: 100%;
+    padding: 12px;
+    margin: 8px 0;
+    border: 1px dashed rgba(107, 114, 128, 0.6);
     border-radius: 4px;
-    background: rgba(249, 250, 251, 0.6);
-    color: rgba(107, 114, 128, 0.95);
     font-size: 12px;
+    color: rgba(75, 85, 99, 0.9);
+    text-align: center;
+    background: rgba(243, 244, 246, 0.6);
   }
 </style>