@graphenedata/cli 0.0.3 → 0.0.5

package/dist/ui/component-utilities/echarts.js

@@ -12,7 +12,7 @@ import * as chartWindowDebug from './chartWindowDebug'
  * } EChartsActionOptions
  */
 
-const ANIMATION_DURATION = 500
+const ANIMATION_DURATION = 0
 const pendingChartsKey = Symbol.for('graphene.pendingCharts')
 
 /** @returns {Set<number> | null} */
@@ -139,6 +139,7 @@ const echartsAction = (node, options) => {
   // Initial options set:
   chart.setOption({
     ...options.config,
+    animation: false,
     animationDuration: ANIMATION_DURATION,
     animationDurationUpdate: ANIMATION_DURATION,
   })
@@ -219,6 +220,7 @@ const echartsAction = (node, options) => {
     chart.setOption(
       {
         ...options.config,
+        animation: false,
         animationDuration: ANIMATION_DURATION,
         animationDurationUpdate: ANIMATION_DURATION,
       },

package/dist/ui/component-utilities/themeStores.ts

@@ -12,7 +12,7 @@ type ThemeStores = {
   activeAppearance: Readable<Appearance>
   theme: Readable<Theme>
   resolveColor: <T>(input: T) => Readable<T | string | undefined>
-  resolveColorsObject: (input: Record<string, unknown> | undefined) => Readable<Record<string, string | undefined> | undefined>
+  resolveColorsObject: (input: Record<string, unknown> | string | undefined) => Readable<Record<string, string | undefined> | undefined>
   resolveColorPalette: (input: unknown) => Readable<string[] | undefined>
 }
 
@@ -55,6 +55,14 @@ const isReadable = <T>(value: unknown): value is Readable<T> => {
   return Boolean(value && typeof value === 'object' && 'subscribe' in (value as any))
 }
 
+const parseJson = (value: string): unknown => {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return undefined
+  }
+}
+
 const normalizeColor = (value: unknown): string | undefined => {
   if (value == null) return undefined
   if (Array.isArray(value)) return normalizeColor(value[0])
@@ -64,25 +72,38 @@ const normalizeColor = (value: unknown): string | undefined => {
   if (!trimmed) return undefined
   if (trimmed === 'true' || trimmed === 'false') return trimmed
   if (DEFAULT_THEME.colors[trimmed]) return DEFAULT_THEME.colors[trimmed]
-  if (trimmed.startsWith('#') || trimmed.startsWith('rgb') || trimmed.startsWith('hsl') || trimmed.startsWith('var(')) return trimmed
-  if (/^[a-zA-Z0-9_-]+$/.test(trimmed)) return `var(--color-${trimmed})`
+  let lower = trimmed.toLowerCase()
+  if (trimmed.startsWith('#')) return trimmed
+  if (lower.startsWith('rgb') || lower.startsWith('hsl')) return trimmed
   return trimmed
 }
 
-const resolveColor = <T>(input: T): Readable<T | string | undefined> => {
+export const resolveColor = <T>(input: T): Readable<T | string | undefined> => {
   if (isReadable<T | string | undefined>(input)) return input
   return readable(normalizeColor(input) as T | string | undefined)
 }
 
-const resolveColorsObject = (input: Record<string, unknown> | undefined): Readable<Record<string, string | undefined> | undefined> => {
+export const resolveColorsObject = (input: Record<string, unknown> | string | undefined): Readable<Record<string, string | undefined> | undefined> => {
   if (isReadable<Record<string, string | undefined> | undefined>(input)) return input
   if (!input) return readable(undefined)
 
-  let entries = Object.entries(input).map(([key, value]) => [key, normalizeColor(value)] as const)
+  let record: Record<string, unknown> | undefined = input as Record<string, unknown>
+  if (typeof input === 'string') {
+    let parsed = parseJson(input.trim())
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      record = parsed as Record<string, unknown>
+    } else {
+      return readable(undefined)
+    }
+  }
+
+  if (!record) return readable(undefined)
+
+  let entries = Object.entries(record).map(([key, value]) => [key, normalizeColor(value)] as const)
   return readable(Object.fromEntries(entries))
 }
 
-const resolveColorPalette = (input: unknown): Readable<string[] | undefined> => {
+export const resolveColorPalette = (input: unknown): Readable<string[] | undefined> => {
   if (isReadable<string[] | undefined>(input)) return input
   if (input == null) return readable(DEFAULT_PALETTE)
 
@@ -90,6 +111,13 @@ const resolveColorPalette = (input: unknown): Readable<string[] | undefined> =>
     let key = input.trim()
     if (!key || key === 'default') return readable(DEFAULT_PALETTE)
     if (DEFAULT_THEME.colorPalettes[key]) return readable(DEFAULT_THEME.colorPalettes[key])
+    if (key.startsWith('[')) {
+      let parsed = parseJson(key)
+      if (Array.isArray(parsed)) {
+        let values = parsed.map(item => normalizeColor(item)).filter(Boolean) as string[]
+        return readable(values.length ? values : DEFAULT_PALETTE)
+      }
+    }
     if (key.includes(',')) {
       let values = key.split(',').map(part => normalizeColor(part)).filter(Boolean) as string[]
       return readable(values.length ? values : DEFAULT_PALETTE)

package/dist/ui/components/AreaChart.svelte

@@ -83,9 +83,10 @@
   export let xLabelWrap = undefined
 </script>
 
-<QueryLoad data={data} fields={[x, y, series]} let:loaded>
+<QueryLoad data={data} fields={{x, y, series}} let:loaded>
   <Chart
     data={loaded}
+    chartContext={{data, x, y, series}}
     {x}
     {y}
     {xFmt}

package/dist/ui/components/BarChart.svelte

@@ -114,9 +114,10 @@
   export let xLabelWrap = undefined
 </script>
 
-<QueryLoad data={data} fields={[x, y, y2, series]} let:loaded>
+<QueryLoad data={data} fields={{x, y, y2, series}} let:loaded>
   <Chart
     data={loaded}
+    chartContext={{data, x, y, y2, series}}
     {x}
     {y}
     {y2}

package/dist/ui/components/BigValue.svelte

@@ -34,7 +34,7 @@
   }
 </script>
 
-<QueryLoad {data} fields={[value]} let:loaded>
+<QueryLoad {data} fields={{value}} let:loaded>
   <div class="big-value">
     {#if title}<div class="big-value__title">{title}</div>{/if}
     {#if subtitle}<div class="big-value__subtitle">{subtitle}</div>{/if}

package/dist/ui/components/Chart.svelte

@@ -23,6 +23,7 @@
   import checkInputs from '../component-utilities/checkInputs.js'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
+  import {logError} from '../internal/telemetry.ts'
 
   const {theme, resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
 
@@ -31,6 +32,7 @@
   // ---------------------------------------------------------------------------------------
   // Data and columns:
   export let data = undefined
+  export let chartContext = undefined
   export let queryID = undefined
   export let x = undefined
   export let y = undefined
@@ -1044,6 +1046,12 @@
       error = e.message
       let setTextRed = '\x1b[31m%s\x1b[0m'
       console.error(setTextRed, `Error in ${chartType}: ${e.message}`)
+
+      // Make an "id" for the chart so its clear to users/agents exactly which caused an error.
+      let fieldStr = Object.entries(chartContext || {}).filter(([_, val]) => !!val).map(([name, val]) => `${name}="${val}"`)
+      let id = `${title || chartType} (${fieldStr.join(' ')})`
+      logError(e, {id})
+
       props.update((d) => {
         return {...d, error}
       })
@@ -1059,11 +1067,12 @@
     {width}
     {data}
     {queryID}
+    chartTitle={title}
     {echartsOptions}
     {seriesOptions}
     {connectGroup}
     {xAxisLabelOverflow}
-    seriesColors={seriesColorsStore}
+    seriesColors={$seriesColorsStore}
   />
 {:else}
   <ErrorChart {error} title={chartType} />

package/dist/ui/components/ECharts.svelte

@@ -16,6 +16,7 @@
   export let seriesColors: any = undefined
   export let connectGroup: string | undefined = undefined
   export let xAxisLabelOverflow: 'truncate' | 'break' | undefined = undefined
+  export let chartTitle: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const isBrowser = typeof window !== 'undefined'
@@ -33,6 +34,7 @@
   {: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={{

package/dist/ui/components/LineChart.svelte

@@ -99,9 +99,10 @@
 </script>
 
 
-<QueryLoad data={data} fields={[x, y, y2, series]} let:loaded>
+<QueryLoad data={data} fields={{x, y, y2, series}} let:loaded>
   <Chart
     data={loaded}
+    chartContext={{data, x, y, y2, series}}
     {x}
     {y}
     {y2}

package/dist/ui/components/PieChart.svelte

@@ -16,7 +16,7 @@
 
 <style></style>
 
-<QueryLoad data={data} fields={[category, value]} let:loaded>
+<QueryLoad data={data} fields={{category, value}} let:loaded>
   <ECharts data={loaded} {echartsOptions} {seriesOptions} {seriesColors} config={{
     title: {
       text: title,

package/dist/ui/components/QueryLoad.svelte

@@ -4,22 +4,21 @@
 
   export let data: string | {rows?: any[]}
   export let height = 200
-  export let fields: string[] = []
+  export let fields: Record<string, string> = {}
 
   let errors: Error[] | null = null
   let loaded: any[] | null = null
 
-  let handleResults = (data) => {
-    errors = data.errors
-    loaded = data.rows
+  let handleResults = (result) => {
+    errors = result.errors || null
+    loaded = result.rows
   }
 
   onMount(() => {
     if (typeof data !== 'string') {
       loaded = data.rows
     } else {
-      let usedFields = fields.filter(f => !!f)
-      if (usedFields.length == 0) usedFields = ['*']
+      let usedFields = Object.fromEntries(Object.entries(fields).filter(e => !!e[1]))
       window.$GRAPHENE.query(data, usedFields, handleResults)
     }
   })

package/dist/ui/components/TableRow.svelte

@@ -251,7 +251,7 @@
     background: rgba(229, 231, 235, 0.6);
   }
 
-  :global(.table-row--lined) td {
+  .table-row--lined :global(td) {
     border-bottom: 1px solid rgba(107, 114, 128, 0.2);
   }
 

package/dist/ui/components/_Table.svelte

@@ -15,6 +15,7 @@
   import {getFinalColumnOrder} from '../component-utilities/tableUtils'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
+    import {logError} from '../internal/telemetry.js'
 
   const {resolveColor} = getThemeStores()
 
@@ -141,6 +142,7 @@
     }
   } catch (thrown) {
     let message = thrown instanceof Error ? thrown.message : 'Unable to prepare dataset'
+    logError(thrown, {id: 'DataTable'})
     error = message
     if (strictBuild) throw thrown
   }

package/dist/ui/internal/queryEngine.ts

@@ -4,12 +4,6 @@
 import {cacheRead, cacheWrite, getHashes} from './clientCache'
 import {errorProvider} from './telemetry.ts'
 
-interface QueryError {
-  file: string
-  message: string
-  from: {lineText: string}
-}
-
 interface QueryResult {
   rows?: any[]
   errors?: Error[]
@@ -25,10 +19,11 @@ type ResultHandler = (res: QueryResult) => void
 
 interface QueryNode {
   name?: string
+  source?: string
   contents: string
   callback?: ResultHandler
   loading: boolean
-  fields: string[]
+  fields: Map<string, string>
   errors: Error[]
 }
 
@@ -38,7 +33,7 @@ let queries = [] as QueryNode[]
 
 function registerQuery (name: string, contents: string) {
   queries = queries.filter(q => q.name !== name)
-  queries.push({name, contents, loading: false, fields: [], errors: []})
+  queries.push({name, contents, loading: false, fields: new Map(), errors: []})
 }
 
 function updateParam (name: string, value: any) {
@@ -46,9 +41,12 @@ function updateParam (name: string, value: any) {
   runAll() // for now, do the easy thing and reload it all
 }
 
-function query (source: string, fields: string[], callback: ResultHandler) {
-  let contents = `from ${source} select ${fields.join(', ')}`
-  queries.push({contents, callback, loading: false, fields, errors: []})
+function query (source: string, fields: Record<string, string>, callback: ResultHandler) {
+  // using Map here because it preserves the order in which we add fields to the select, which we use when we get the result.
+  let map = new Map(Object.entries(fields))
+  let exprs = map.size > 0 ? Array.from(map.values()) : ['*']
+  let contents = `from ${source} select ${exprs.join(', ')}`
+  queries.push({contents, callback, loading: false, fields: map, errors: [], source})
   runAll()
 }
 
@@ -87,7 +85,11 @@ async function runNode (n: QueryNode) {
     } else { // request failed. Record it
       let isJson = response.headers.get('Content-Type') === 'application/json'
       let body = isJson ? await response.json() : await response.text()
-      n.errors = Array.isArray(body) ? body : [body]
+      n.errors = Array.isArray(body) ? body : [{message: body}]
+
+      let fieldIds = Array.from(n.fields.entries()).map(([name, val]) => `${name}="${val}"`)
+      let idStr = `Query (data="${n.source}" ` + fieldIds.join(' ') + ')'
+      n.errors.forEach(e => e.id = idStr)
       n.callback({errors: n.errors})
     }
   } catch (e) {
@@ -113,13 +115,14 @@ function translateData (data: any, node: QueryNode) {
   let rows = data.rows || []
   rows.dataLoaded = true // evidence components need this to be set
   rows._evidenceColumnTypes = []
+  let requestFields = Array.from(node.fields.values())
 
   data.fields.forEach((field, index) => {
     let name = field.name
 
     // server gives names like `col_1` to unnamed expressions but we translate it back into the original expression like `avg(price)`
     if (field.name.match(/col_\d+/)) {
-      name = node.fields[index]
+      name = requestFields[index]
       rows.forEach(r => {
         r[name] = r[field.name]
         delete r[field.name]

package/dist/ui/internal/telemetry.ts

@@ -12,7 +12,9 @@ window.addEventListener('unhandledrejection', (event) => {
   staticErrors.push(event.reason)
 })
 
-export function error (e: Error, ctx?: any) {
+export function logError (e: Error | string, ctx?: any) {
+  if (typeof e === 'string') e = new Error(e)
+  if (ctx) Object.assign(e, ctx)
   staticErrors.push(e)
 }
 
@@ -21,6 +23,6 @@ export function errorProvider (key:string, fn: ErrorProvider) {
 }
 
 export function getErrors (): Error[] {
-  return staticErrors.concat(Object.values(errorProviders)
-    .flatMap(p => p()))
+  let provided = Object.values(errorProviders).flatMap(p => p())
+  return staticErrors.concat(provided)
 }

package/dist/ui/web.js

@@ -69,25 +69,41 @@ let socket = null
 
 connectWebSocket()
 
-async function takeScreenshot (chartName = null) {
+async function captureChart (chartTitle) {
+  await waitForQueriesToFinish()
+  let errors = getErrors()
+  let escaped = window.CSS.escape(chartTitle)
+  let canvas = document.querySelector(`[data-chart-title="${escaped}"] canvas`)
+
+  if (!canvas) {
+    errors.push({message: `Could not find chart titled "${chartTitle}"`})
+    return {stillLoading: isLoading(), screenshot: null, errors}
+  }
+
+  return {stillLoading: isLoading(), screenshot: canvas.toDataURL('image/png'), errors}
+}
+
+async function takeScreenshot () {
+  await waitForQueriesToFinish()
   if (!window.html2canvas) {
     let html2canvas = await import('html2canvas')
     window.html2canvas = html2canvas.default
   }
+  let canvas = await window.html2canvas(document.body, {useCORS: true, allowTaint: true, scale: 1})
+  let errors = getErrors().map(e => ({message: e.message, id: e.id}))
+  return {stillLoading: isLoading(), screenshot: canvas?.toDataURL('image/png'), errors}
+}
 
-  // wait some time for queries to finish loading
+async function waitForQueriesToFinish () {
   let startTime = Date.now()
   while (isLoading() && Date.now() - startTime < 20_000) {
     await new Promise(resolve => setTimeout(resolve, 100))
   }
-
-  let targetElement = chartName ? document.querySelector(`[name="${chartName}"]`) : document.body
-  let canvas = targetElement && await window.html2canvas(targetElement, {useCORS: true, allowTaint: true, scale: 1})
-  return {stillLoading: isLoading(), screenshot: canvas?.toDataURL('image/png')}
 }
 
 function connectWebSocket () {
-  socket = new WebSocket(`ws://${window.location.host}/graphene-ws`)
+  let wsUrl = `ws://${window.location.host}/_api/ws`
+  socket = new WebSocket(wsUrl)
   socket.onclose = () => setTimeout(connectWebSocket, 2000)
 
   socket.onopen = () => {
@@ -95,12 +111,11 @@ function connectWebSocket () {
   }
 
   socket.onmessage = async (event) => {
-    console.log('Got message', event.data)
     let {type, requestId, chart} = JSON.parse(event.data)
 
-    if (type === 'view') {
-      let {screenshot, stillLoading} = await takeScreenshot(chart)
-      socket.send(JSON.stringify({type: 'viewResponse', requestId, screenshot, stillLoading, errors: getErrors()}))
+    if (type === 'check') {
+      let result = chart ? await captureChart(chart) : await takeScreenshot()
+      socket.send(JSON.stringify({type: 'checkResponse', requestId, ...result}))
     }
   }
 }

package/package.json

@@ -3,7 +3,7 @@
   "main": "cli.ts",
   "type": "module",
   "author": "Graphene Systems Inc",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "Elastic-2.0",
   "engines": {
     "node": ">=16"
@@ -44,6 +44,7 @@
     "mdsvex": "^0.12.6",
     "nanoid": "3.3.8",
     "sanitize-html": "^2.17.0",
+    "snowflake-sdk": "^2.3.1",
     "ssf": "^0.11.2",
     "svelte": "4.2.19",
     "unist-util-visit": "4.1.2",