@graphenedata/cli 0.0.13 → 0.0.14

package/dist/ui/components/ECharts.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
   import echarts from '../component-utilities/echarts.js'
-  import {createEventDispatcher} from 'svelte'
   import {getThemeStores} from '../component-utilities/themeStores'
 
+  interface Props {
+    config: any
+    height?: string | number
+    width?: string | number
+    data: any
+    queryID?: any
+    renderer?: 'canvas' | 'svg'
+    echartsOptions?: any
+    seriesOptions?: any
+    seriesColors?: any
+    connectGroup?: string
+    xAxisLabelOverflow?: 'truncate' | 'break'
+    chartTitle?: string
+    onclick?: (params: any) => void
+  }
+
   const {activeAppearance} = getThemeStores()
 
-  export let config: any
-  export let height: string | number = '291px'
-  export let width: string | number = '100%'
-  export let data: any
-  export let queryID: any = undefined
-  export let renderer: 'canvas' | 'svg' | undefined = undefined
-  export let echartsOptions: any = undefined
-  export let seriesOptions: any = undefined
-  export let seriesColors: any = undefined
-  export let connectGroup: string | undefined = undefined
-  export let xAxisLabelOverflow: 'truncate' | 'break' | undefined = undefined
-  export let chartTitle: string | undefined = undefined
+  let {
+    config, height = '240px', width = '100%', data, queryID = undefined, renderer = undefined,
+    echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
+    connectGroup = undefined, xAxisLabelOverflow = undefined, chartTitle = undefined, onclick = undefined,
+  }: Props = $props()
 
-  const dispatch = createEventDispatcher()
   const isBrowser = typeof window !== 'undefined'
 
   const toDimension = (dimension: string | number | undefined, fallback: string) => {
@@ -42,14 +49,14 @@
         data,
         echartsOptions,
         seriesOptions,
-        dispatch,
+        onclick,
         renderer,
         connectGroup,
         xAxisLabelOverflow,
         seriesColors,
         theme: $activeAppearance,
       }}
-    />
+    ></div>
   {/if}
 </div>
 

package/dist/ui/components/ErrorChart.svelte

@@ -1,24 +1,81 @@
 <script lang="ts">
-  export let error: unknown
-  export let title: string
-  export let height = 200
-
-  let message: string
-
-  $: message = (() => {
-    if (error instanceof Error) return error.message
-    if (typeof error === 'string') return error
-    try {
-      return JSON.stringify(error, null, 2)
-    } catch {
-      return String(error)
-    }
-  })()
+  type GrapheneError = {
+    type?: string
+    id?: string
+    file?: string
+    message?: string
+    stack?: string
+    from?: {line?: number, col?: number, lineText?: string}
+    loc?: {line?: number, column?: number}
+    line?: number
+    column?: number
+    codeFrame?: string
+    frame?: string
+  }
+
+  interface Props {
+    error: unknown
+    title?: string
+    height?: number
+  }
+
+  let {error, title: _title, height = 200}: Props = $props()
+
+  function parseError (raw: unknown): GrapheneError {
+    if (raw instanceof Error) return {message: raw.message, stack: raw.stack}
+    if (typeof raw === 'string') return {message: raw}
+    if (raw && typeof raw === 'object') return raw as GrapheneError
+    return {message: String(raw)}
+  }
+
+  function lineDetails (e: GrapheneError) {
+    let line = e.from?.line ?? e.loc?.line ?? e.line
+    let column = e.from?.col ?? e.loc?.column ?? e.column
+    let lineText = e.from?.lineText
+    let pointer = Number.isFinite(column) ? `${' '.repeat(Math.max(0, (column || 1) - 1))}^` : ''
+    return {line, lineText, pointer}
+  }
+
+  function classifyError (e: GrapheneError) {
+    if (e.type === 'analysis' || e.from || e.loc || e.codeFrame || e.frame) return `GSQL error - ${e.message || 'Unknown query error'}`
+    if (e.type === 'database') return 'Database query failed'
+    if (e.type === 'server') return 'Server error while running query'
+    return 'Query failed'
+  }
+
+  let parsed = $derived.by(() => {
+    let e = parseError(error)
+    let heading = classifyError(e)
+    let message = e.message || 'An unknown error occurred'
+    let details: string[] = []
+    let line = lineDetails(e)
+    // Query errors can be analyzed from generated wrapper gsql (`table <name> as (...)`).
+    // When that happens, line numbers are often for synthetic sql and can be misleading,
+    // but the captured source line text and caret are still accurate and useful to users.
+    // So we show file + line only when the diagnostic has a reliable line.
+    let fileLine = e.file && e.file !== 'input' ? `${e.file}${line.line ? `:${line.line}` : ''}` : undefined
+
+    if (e.id) details.push(e.id)
+    if (fileLine) details.push(fileLine)
+    else if (line.line) details.push(`Line ${line.line}`)
+    if (line.lineText) details.push(line.lineText)
+    if (line.pointer) details.push(line.pointer)
+    if (e.codeFrame) details.push(e.codeFrame)
+    if (e.frame) details.push(e.frame)
+
+    if (heading.startsWith('GSQL error - ')) message = ''
+    return {heading, message, details}
+  })
 </script>
 
 <div class="error-chart" style={`min-height:${height}px`} role="alert">
-  <div class="error-chart__title">{title}</div>
-  <pre class="error-chart__message">{message}</pre>
+  <div class="error-chart__heading">{parsed.heading}</div>
+  {#if parsed.message}
+    <div class="error-chart__message">{parsed.message}</div>
+  {/if}
+  {#if parsed.details.length}
+    <pre class="error-chart__details">{parsed.details.join('\n')}</pre>
+  {/if}
 </div>
 
 <style>
@@ -35,14 +92,21 @@
     box-sizing: border-box;
   }
 
-  .error-chart__title {
-    font-weight: 600;
-    font-size: 16px;
-    margin-bottom: 8px;
+  .error-chart__heading {
+    font-weight: 700;
+    margin-bottom: 4px;
+    text-align: center;
   }
 
   .error-chart__message {
     margin: 0;
+    text-align: center;
+    max-width: 72ch;
+    line-height: 1.4;
+  }
+
+  .error-chart__details {
+    margin: 10px 0 0;
     font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     font-size: 12px;
     white-space: pre-wrap;

package/dist/ui/components/GrapheneQuery.svelte

@@ -1,8 +1,12 @@
-<script>
+<script lang="ts">
   import {onMount} from 'svelte'
 
-  export let name
-  export let code
+  interface Props {
+    name: string
+    code: string
+  }
+
+  let {name, code}: Props = $props()
 
   onMount(() => {
     if (typeof window !== 'undefined' && window.$GRAPHENE) {

package/dist/ui/components/InlineDelta.svelte

@@ -3,35 +3,54 @@
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
 
-  export let value: number | string | null | undefined = undefined
-  export let fmt: string | undefined = undefined
-  export let formatObject: any = undefined
-  export let columnUnitSummary: any = undefined
-  export let downIsGood = false
-  export let showValue = true
-  export let showSymbol = true
-  export let symbolPosition: 'left' | 'right' = 'right'
-  export let neutralMin = 0
-  export let neutralMax = 0
-  export let chip = false
-  export let align: 'left' | 'right' | 'center' | string = 'right'
-  export let text: string | undefined = undefined
-  export let className: string | undefined = undefined
-
-  downIsGood = toBoolean(downIsGood) ?? false
-  showValue = toBoolean(showValue) ?? true
-  showSymbol = toBoolean(showSymbol) ?? true
-  chip = toBoolean(chip) ?? false
+  interface Props {
+    value?: number | string | null
+    fmt?: string
+    formatObject?: any
+    columnUnitSummary?: any
+    downIsGood?: boolean
+    showValue?: boolean
+    showSymbol?: boolean
+    symbolPosition?: 'left' | 'right'
+    neutralMin?: number
+    neutralMax?: number
+    chip?: boolean
+    align?: 'left' | 'right' | 'center' | string
+    text?: string
+    className?: string
+  }
+
+  let {
+    value = undefined,
+    fmt = undefined,
+    formatObject = undefined,
+    columnUnitSummary = undefined,
+    downIsGood: downIsGoodProp = false,
+    showValue: showValueProp = true,
+    showSymbol: showSymbolProp = true,
+    symbolPosition = 'right',
+    neutralMin = 0,
+    neutralMax = 0,
+    chip: chipProp = false,
+    align = 'right',
+    text = undefined,
+    className = undefined,
+  }: Props = $props()
+
+  let downIsGood = $derived(toBoolean(downIsGoodProp) ?? false)
+  let showValue = $derived(toBoolean(showValueProp) ?? true)
+  let showSymbol = $derived(toBoolean(showSymbolProp) ?? true)
+  let chip = $derived(toBoolean(chipProp) ?? false)
 
   const {theme} = getThemeStores()
 
-  $: numericValue = value === null || value === undefined ? null : Number(value)
-  $: status = (() => {
+  let numericValue = $derived(value === null || value === undefined ? null : Number(value))
+  let status = $derived((() => {
     if (numericValue === null) return 'neutral'
     if (numericValue > neutralMax) return 'positive'
     if (numericValue < neutralMin) return 'negative'
     return 'neutral'
-  })()
+  })())
 
   const pickColor = (positive: string, negative: string, neutral: string) => {
     if (status === 'positive') return positive
@@ -39,39 +58,39 @@
     return neutral
   }
 
-  $: symbol = (() => {
+  let symbol = $derived((() => {
     if (status === 'positive') return '▲'
     if (status === 'negative') return '▼'
     return '–'
-  })()
-  $: symbolColor = pickColor(
+  })())
+  let symbolColor = $derived(pickColor(
     downIsGood ? $theme.colors.negative : $theme.colors.positive,
     downIsGood ? $theme.colors.positive : $theme.colors.negative,
     $theme.colors['base-content-muted'],
-  )
+  ))
 
-  $: textColor = pickColor(
+  let textColor = $derived(pickColor(
     downIsGood ? $theme.colors.negative : $theme.colors.positive,
     downIsGood ? $theme.colors.positive : $theme.colors.negative,
     $theme.colors['base-content-muted'],
-  )
+  ))
 
-  $: chipClass = pickColor('delta-chip--positive', 'delta-chip--negative', 'delta-chip--neutral')
+  let chipClass = $derived(pickColor('delta-chip--positive', 'delta-chip--negative', 'delta-chip--neutral'))
 
-  $: resolvedFormat = (() => {
+  let resolvedFormat = $derived((() => {
     if (formatObject) return formatObject
     if (fmt) return getFormatObjectFromString(fmt, 'number')
     return undefined
-  })()
+  })())
 
-  $: deltaClass = (() => {
+  let deltaClass = $derived((() => {
     let classes = ['delta']
     if (chip) classes = [...classes, 'delta-chip', chipClass]
     if (className) classes.push(className)
     return classes.join(' ')
-  })()
+  })())
 
-  $: resolvedAlign = align ?? 'right'
+  let resolvedAlign = $derived(align ?? 'right')
 
   const renderValue = () => {
     if (numericValue === null) return '–'