@graphenedata/cli 0.0.4 → 0.0.6

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 | 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 | 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,20 @@ 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 | 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: string[] = []
+  if (map.size > 0) {
+    map.forEach((value) => {
+      if (Array.isArray(value)) exprs.push(...value)
+      else exprs.push(value)
+    })
+  } else {
+    exprs = ['*']
+  }
+  let contents = `from ${source} select ${exprs.join(', ')}`
+  queries.push({contents, callback, loading: false, fields: map, errors: [], source})
   runAll()
 }
 
@@ -87,11 +93,24 @@ 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()).flatMap(([name, val]) => {
+        if (Array.isArray(val)) {
+          if (val.length === 0) return [] as string[]
+          if (val.length === 1) return [`${name}="${val[0]}"`]
+          return [`${name}="${val.join(', ')}"`]
+        }
+        if (typeof val === 'string' && val.trim().length === 0) return [] as string[]
+        if (val == null) return [] as string[]
+        return [`${name}="${val}"`]
+      })
+      let idStr = `Query (data="${n.source}" ` + fieldIds.join(' ') + ')'
+      n.errors.forEach(e => (e as any).id = idStr)
       n.callback({errors: n.errors})
     }
   } catch (e) {
-    n.errors = [e]
+    n.errors = [e as Error]
   } finally {
     n.loading = false
   }
@@ -113,13 +132,18 @@ function translateData (data: any, node: QueryNode) {
   let rows = data.rows || []
   rows.dataLoaded = true // evidence components need this to be set
   rows._evidenceColumnTypes = []
+  let requestFields: string[] = []
+  node.fields.forEach((value) => {
+    if (Array.isArray(value)) requestFields.push(...value)
+    else requestFields.push(value)
+  })
 
   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]
@@ -140,7 +164,7 @@ errorProvider('queryEngine', () => {
   queries.flatMap(q => q.errors).filter(q => !!q).forEach(e => {
     unique[e.message + String((e as any).from?.lineText)] = e
   })
-  return Object.values(unique)
+  return Object.values(unique) as Error[]
 })
 
 async function waitForQueries (timeout = 20_000) {

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,42 @@ 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')
+    let html2canvas = await import('@graphenedata/html2canvas')
     window.html2canvas = html2canvas.default
   }
 
-  // wait some time for queries to finish loading
+  let canvas = await window.html2canvas(document.body, {useCORS: true, allowTaint: true, scale: 1, liveDOM: true})
+  let errors = getErrors().map(e => ({message: e.message, id: e.id}))
+  return {stillLoading: isLoading(), screenshot: canvas?.toDataURL('image/png'), errors}
+}
+
+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 +112,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.4",
+  "version": "0.0.6",
   "license": "Elastic-2.0",
   "engines": {
     "node": ">=16"
@@ -39,11 +39,12 @@
     "echarts": "^5.5.0",
     "fs-extra": "11.2.0",
     "glob": "^11.0.3",
-    "html2canvas": "^1.4.1",
+    "@graphenedata/html2canvas": "^1.4.1",
     "marked": "^16.3.0",
     "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",