@graphenedata/cli 0.0.6 → 0.0.8

package/dist/docs/graphene.md

@@ -379,6 +379,10 @@ FROM `bigquery-public-data.thelook_ecommerce.orders` as base
 
 You don't have to understand this; the point is that GSQL is minimizing the chances that naive users aggregate data incorrectly.
 
+#### Percentile shorthand
+
+Graphene provides percentile helpers so you rarely have to remember the SQL form for each warehouse. Anywhere you can call an aggregate, you can also write `pXX(column)` where `XX` is a whole number between 0 and 100. If you need precision finer than a whole percentile, append extra digits—everything after the first two digits is treated as decimals. Examples: `p975` → 97.5th percentile, `p9999` → 99.99th percentile. Graphene rewrites these shorthands to the dialect’s native function (`quantile_cont` on DuckDB, `approx_quantiles` on BigQuery, `PERCENTILE_CONT` on Snowflake) and ensures they behave like other aggregates (automatic grouping, structPath handling, etc.).
+
 ### `table as` statements
 
 You can turn the output of any `select` statement into a table with `table foo as (select ...)`. Here's an example of an additional table `user_facts` added to the two tables from earlier:
@@ -1132,44 +1136,6 @@ where email ilike concat('%', $name_of_input, '%')
 | description | Adds an info icon with description tooltip on hover | false | string | - |
 
 
-#### Date range
-
-Creates a date picker that can be used to filter a query. Includes a set of preset ranges for quick selection of common date ranges (relative to the supplied end date). To see how to filter a query using an input component, see Filters.
-
-Here's an example:
-
-```markdown
-<DateRange
-  name=date_range_name
-  data=orders_by_day
-  dates=day
-/>
-```
-
-The start and end dates for the user-selected range would then be referenced in GSQL as `$date_range_name_start` and `$date_range_name_end` at the end. For example:
-
-```sql
-select *
-from orders
-where created_at > $date_range_name_start and < $date_range_name_end
-```
-
-##### All date range attributes
-
-| Attribute | Description | Required | Options | Default |
-|------|-------------|----------|---------|---------|
-| name | Name of the DateRange, used to reference the selected values elsewhere as `"$name_start"` or `"$name_end"` | true | string | - |
-| data | Query name, wrapped in curly braces | false | query name | - |
-| dates | Column or expression from the query containing date range to span | false | column name, stored expression name, GSQL expression | - |
-| start | A manually specified start date to use for the range | false | string formatted YYYY-MM-DD | - |
-| end | A manually specified end date to use for the range | false | string formatted YYYY-MM-DD | - |
-| title | Title to display in the Date Range component | false | string | - |
-| presetRanges | Customize "Select a Range" drop down, by including preset range options | false | list of values e.g. `"Last 7 Days, Last 30 Days"`. Allowed values: `Last 7 Days`, `Last 30 Days`, `Last 90 Days`, `Last 365 Days`, `Last 3 Months`, `Last 6 Months`, `Last 12 Months`, `Last Month`, `Last Year`, `Month to Date`, `Month to Today`, `Year to Date`, `Year to Today`, `All Time` | - |
-| defaultValue | Accepts preset in string format to apply default value in Date Range picker | false | `"Last 7 Days"`, `"Last 30 Days"`, `"Last 90 Days"`, `"Last 365 Days"`, `"Last 3 Months"`, `"Last 6 Months"`, `"Last 12 Months"`, `"Last Month"`, `"Last Year"`, `"Month to Date"`, `"Month to Today"`, `"Year to Date"`, `"Year to Today"`, `"All Time"` | - |
-| hideDuringPrint | Hide the component when the report is printed | false | `true`, `false` | `true` |
-| description | Adds an info icon with description tooltip on hover | false | string | - |
-
-
 #### Dropdown
 
 Creates a dropdown menu with a list of options that can be selected. The selected option can be used to filter queries or in markdown. To see how to filter a query using a dropdown, see Filters.

package/dist/ui/app.css

@@ -1,4 +1,21 @@
-/* Vanilla CSS version of styles (Tailwind removed) */
+
+@font-face { /* latin-ext */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/inter-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face { /* latin */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/inter-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 :root {
   /* Layout */
@@ -97,10 +114,24 @@ html {
 body {
   font-family: "Inter", var(--ui-font-family);
   line-height: 1.7;
+  margin: 0;
+  color: var(--base-heading);
+  min-height: 100vh;
+  display: flex;
+}
+
+nav {
+  flex: 0 0 200px;
+  height: 100vh;
+  padding-top: 1rem;
+  border-right: 1px solid var(--base-200);
+  background: #fbfbfd;
 }
 
 main {
-  max-width: 1200px;
+  flex: 1;
+  max-width: none;
+  padding: 2.5rem 3rem 3.5rem;
   margin: 0 auto;
 }
 

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

@@ -1,6 +1,5 @@
 import {registerTheme, init, connect} from 'echarts/dist/echarts.esm.js'
 import {evidenceThemeDark, evidenceThemeLight} from './echartsThemes'
-import debounce from 'debounce'
 import * as chartWindowDebug from './chartWindowDebug'
 
 /**
@@ -261,4 +260,14 @@ const echartsAction = (node, options) => {
   }
 }
 
+const debounce = (callback, wait) => {
+  let timeoutId = null
+  return (...args) => {
+    window.clearTimeout(timeoutId)
+    timeoutId = window.setTimeout(() => {
+      callback(...args)
+    }, wait)
+  }
+}
+
 export default echartsAction

package/dist/ui/internal/NavSidebar.svelte

@@ -0,0 +1,383 @@
+<script>
+  import navData from 'virtual:nav'
+
+  export let currentFile = ''
+
+  let tree = []
+  let flatNodes = []
+  let openFolders = new Set()
+  let treeSignature = ''
+  let lastCurrent = ''
+
+  $: normalizedFiles = (navData || [])
+    .map((file) => file.replace(/^\.\//, '').replace(/\\/g, '/'))
+
+  $: normalizedCurrent = deriveCurrentFile()
+  $: currentRoute = normalizedCurrent ? pathToRoute(normalizedCurrent) : '/'
+
+  function deriveCurrentFile () {
+    let fromProp = normalizeFilePath(currentFile)
+    let route = getLocationRoute()
+    if (route) {
+      let match = normalizedFiles.find((file) => pathToRoute(file) === route)
+      if (match) return match
+    }
+    return fromProp
+  }
+
+  function normalizeFilePath (filePath) {
+    return (filePath || '').replace(/^\.\//, '').replace(/\\/g, '/')
+  }
+
+  function getLocationRoute () {
+    if (typeof window === 'undefined') return null
+    let route = window.location.pathname || '/'
+    route = route.replace(/\/+$/, '') || '/'
+    return route
+  }
+
+  $: {
+    let nextSignature = normalizedFiles.join('|')
+    if (nextSignature !== treeSignature) {
+      treeSignature = nextSignature
+      tree = buildTree(normalizedFiles)
+      flatNodes = flattenTree(tree)
+      openFolders = createDefaultOpenFolders(tree, normalizedCurrent)
+    }
+  }
+
+  $: {
+    if (normalizedCurrent !== lastCurrent) {
+      openFolders = mergeAncestorFolders(openFolders, normalizedCurrent)
+      lastCurrent = normalizedCurrent
+    }
+  }
+
+  function toggleFolder (path) {
+    if (!path) return
+    let next = new Set(openFolders)
+    if (next.has(path)) next.delete(path)
+    else next.add(path)
+    openFolders = next
+  }
+
+  function handleFolderRowKey (event, path) {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    toggleFolder(path)
+  }
+
+  function isOpen (path, openSet = openFolders) {
+    if (!path) return true
+    return openSet.has(path)
+  }
+
+  function isVisible (node, openSet = openFolders) {
+    return node.ancestors.every((path) => isOpen(path, openSet))
+  }
+
+  function buildTree (paths) {
+    let root = []
+    let folderMap = new Map()
+
+    for (let filePath of paths) {
+      let cleanPath = filePath.replace(/^\.\//, '').replace(/^\//, '')
+      let segments = cleanPath.split('/')
+      if (!segments.length) continue
+      let fileName = segments.pop()
+      let parentChildren = root
+      let parentPath = ''
+
+      for (let segment of segments) {
+        parentPath = parentPath ? `${parentPath}/${segment}` : segment
+        if (!folderMap.has(parentPath)) {
+          let folderNode = {
+            type: 'folder',
+            name: segment,
+            label: formatLabel(segment, 'folder'),
+            path: parentPath,
+            children: [],
+            route: null,
+          }
+          folderMap.set(parentPath, folderNode)
+          parentChildren.push(folderNode)
+        }
+        parentChildren = folderMap.get(parentPath).children
+      }
+
+      if (!fileName) continue
+      let fullPath = parentPath ? `${parentPath}/${fileName}` : fileName
+
+      if (fileName.toLowerCase() === 'index.md' && parentPath) {
+        let folderNode = folderMap.get(parentPath)
+        if (folderNode) folderNode.route = pathToRoute(fullPath)
+        continue
+      }
+
+      let exists = parentChildren.find((node) => node.path === fullPath)
+      if (exists) continue
+      parentChildren.push({
+        type: 'file',
+        name: fileName,
+        label: formatLabel(fileName, 'file'),
+        path: fullPath,
+        route: pathToRoute(fullPath),
+      })
+    }
+
+    return sortNodes(root)
+  }
+
+  function sortNodes (nodes) {
+    return nodes
+      .map((node) => {
+        if (node.type === 'folder' && node.children?.length) {
+          return {...node, children: sortNodes(node.children)}
+        }
+        return node
+      })
+      .sort((a, b) => {
+        if (a.label === 'Home') return -1
+        if (b.label === 'Home') return 1
+        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
+        return a.label.localeCompare(b.label)
+      })
+  }
+
+  function flattenTree (nodes, depth = 0, ancestors = []) {
+    let list = []
+    for (let node of nodes) {
+      if (node.type === 'folder') {
+        let entry = {...node, depth, ancestors}
+        list.push(entry)
+        if (node.children?.length) {
+          list.push(...flattenTree(node.children, depth + 1, [...ancestors, node.path]))
+        }
+        continue
+      }
+      list.push({...node, depth, ancestors})
+    }
+    return list
+  }
+
+  function createDefaultOpenFolders (_treeNodes, currentPath) {
+    let next = new Set()
+    return mergeAncestorFolders(next, currentPath)
+  }
+
+  function mergeAncestorFolders (openSet, filePath) {
+    if (!filePath) return new Set(openSet)
+    let parts = filePath.split('/')
+    parts.pop()
+    let aggregate = []
+    let next = new Set(openSet)
+    for (let part of parts) {
+      aggregate.push(part)
+      next.add(aggregate.join('/'))
+    }
+    return next
+  }
+
+  function formatLabel (value, type) {
+    let cleaned = type === 'file' ? value.replace(/\.md$/, '') : value
+    if (cleaned.toLowerCase() === 'index') return 'Home'
+    return cleaned
+      .split(/[\s_-]+/)
+      .filter(Boolean)
+      .map((chunk) => chunk.charAt(0).toUpperCase() + chunk.slice(1))
+      .join(' ')
+  }
+
+  function pathToRoute (path) {
+    let clean = path.replace(/\.md$/, '')
+    if (!clean || clean === 'index') return '/'
+    return '/' + clean
+  }
+</script>
+
+<ul>
+  {#each flatNodes as node (node.path)}
+    {#if node.type === 'folder'}
+      <li class={isVisible(node, openFolders) ? '' : 'hidden'} style={`--depth:${node.depth}`} data-folder={node.path}>
+        <div
+          class={node.route ? 'folder-row' : 'folder-row clickable'}
+          role={node.route ? undefined : 'button'}
+          aria-expanded={node.route ? undefined : String(isOpen(node.path, openFolders))}
+          on:click={node.route ? undefined : () => toggleFolder(node.path)}
+          on:keydown={node.route ? undefined : (event) => handleFolderRowKey(event, node.path)}
+        >
+          <button
+            class="toggle"
+            type="button"
+            data-folder-toggle={node.path}
+            aria-expanded={isOpen(node.path, openFolders)}
+            on:click={(event) => { event.stopPropagation(); toggleFolder(node.path) }}
+            aria-label={(isOpen(node.path, openFolders) ? 'Collapse' : 'Expand') + ' ' + node.label}
+          >
+            <span class={isOpen(node.path, openFolders) ? 'chevron open' : 'chevron'}>▸</span>
+          </button>
+          {#if node.route}
+            <a
+              href={node.route}
+              class={node.route === currentRoute ? 'active' : ''}
+              aria-current={node.route === currentRoute ? 'page' : undefined}
+            >
+              {node.label}
+            </a>
+          {:else}
+            <span class="label">{node.label}</span>
+          {/if}
+        </div>
+      </li>
+    {:else}
+      <li class={isVisible(node, openFolders) ? 'file' : 'file hidden'} style={`--depth:${node.depth}`}>
+        <a
+          href={node.route}
+          class={node.path === normalizedCurrent ? 'active' : ''}
+          aria-current={node.path === normalizedCurrent ? 'page' : undefined}
+        >
+          <span>{node.label}</span>
+        </a>
+      </li>
+    {/if}
+  {/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+    padding: 0 0.5rem 0 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    overflow: hidden;
+  }
+
+  li {
+    --indent: calc(var(--depth, 0) * 1rem);
+    padding-left: var(--indent);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  li.file {
+    padding-left: calc(var(--indent) + 1.5rem);
+  }
+
+  li.hidden {
+    display: none;
+  }
+
+  .folder-row {
+    display: flex;
+    align-items: center;
+    padding: 0.1rem 0.15rem;
+    border-radius: 4px;
+  }
+
+  .folder-row.clickable {
+    cursor: pointer;
+  }
+
+  .folder-row.clickable:focus-visible {
+    outline: 2px solid rgba(15, 23, 42, 0.2);
+    outline-offset: 2px;
+  }
+
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--base-heading);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 120ms ease;
+    visibility: hidden;
+  }
+
+  .folder-row:hover .toggle,
+  .folder-row:focus-within .toggle,
+  .toggle:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  .toggle:hover,
+  .toggle:focus-visible {
+    background: rgba(15, 23, 42, 0.1);
+    outline: none;
+  }
+
+  .chevron {
+    display: inline-block;
+    transition: transform 150ms ease;
+    font-size: 0.7rem;
+    color: var(--base-content-muted);
+  }
+
+  .chevron.open {
+    transform: rotate(90deg);
+  }
+
+  .label {
+    font-size: 0.85rem;
+    padding: 0.2rem 0.35rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--base-heading);
+  }
+
+  .folder-row a {
+    flex: 1;
+    display: block;
+    font-size: 0.85rem;
+    padding: 0.2rem 0.35rem;
+    border-radius: 4px;
+    color: var(--base-heading);
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .folder-row a:hover,
+  .folder-row a:focus-visible {
+    background: rgba(15, 23, 42, 0.05);
+    outline: none;
+  }
+
+  li.file a {
+    display: flex;
+    align-items: center;
+    font-size: 0.85rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    color: var(--base-heading);
+    text-decoration: none;
+  }
+
+  li.file a span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  li.file a:hover,
+  li.file a:focus-visible {
+    background: rgba(15, 23, 42, 0.05);
+    outline: none;
+  }
+
+  a.active {
+    color: var(--base-900, #0f172a);
+  }
+</style>

package/dist/ui/internal/telemetry.ts

@@ -1,6 +1,7 @@
 type ErrorProvider = () => Error[]
 
-window.$GRAPHENE = {getErrors}
+window.$GRAPHENE ||= {}
+window.$GRAPHENE.getErrors = getErrors
 
 let staticErrors: Error[] = []
 let errorProviders: Record<string, ErrorProvider> = {}

package/dist/ui/web.js

@@ -1,6 +1,7 @@
 import {getErrors} from './internal/telemetry.ts'
 import './app.css'
 import {isLoading} from './internal/queryEngine.ts'
+import NavSidebar from './internal/NavSidebar.svelte'
 
 import Area from './components/Area.svelte'
 import AreaChart from './components/AreaChart.svelte'
@@ -32,6 +33,8 @@ import TableSubtotalRow from './components/TableSubtotalRow.svelte'
 import TableTotalRow from './components/TableTotalRow.svelte'
 import TextInput from './components/TextInput.svelte'
 
+window.$GRAPHENE = window.$GRAPHENE || {}
+
 window.$GRAPHENE.components = {
   Area,
   AreaChart,
@@ -64,35 +67,28 @@ window.$GRAPHENE.components = {
   TextInput,
 }
 
-
 let socket = null
 
+if (document.getElementById('nav')) {
+  new NavSidebar({target: document.getElementById('nav')})
+}
+
 connectWebSocket()
 
-async function captureChart (chartTitle) {
-  await waitForQueriesToFinish()
-  let errors = getErrors()
+function captureChart (chartTitle) {
   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}
+  return canvas?.toDataURL('image/png')
 }
 
 async function takeScreenshot () {
-  await waitForQueriesToFinish()
   if (!window.html2canvas) {
     let html2canvas = await import('@graphenedata/html2canvas')
     window.html2canvas = html2canvas.default
   }
 
   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}
+  return canvas?.toDataURL('image/png')
 }
 
 async function waitForQueriesToFinish () {
@@ -115,8 +111,11 @@ function connectWebSocket () {
     let {type, requestId, chart} = JSON.parse(event.data)
 
     if (type === 'check') {
-      let result = chart ? await captureChart(chart) : await takeScreenshot()
-      socket.send(JSON.stringify({type: 'checkResponse', requestId, ...result}))
+      await waitForQueriesToFinish()
+      let errors = getErrors().map(e => ({message: e.message, id: e.id}))
+      let stillLoading = isLoading()
+      let screenshot = chart ? captureChart(chart) : await takeScreenshot()
+      socket.send(JSON.stringify({type: 'checkResponse', requestId, errors, stillLoading, screenshot}))
     }
   }
 }

package/package.json

@@ -3,7 +3,7 @@
   "main": "cli.ts",
   "type": "module",
   "author": "Graphene Systems Inc",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "license": "Elastic-2.0",
   "engines": {
     "node": ">=16"
@@ -25,6 +25,7 @@
   "dependencies": {
     "@duckdb/node-api": "1.3.2-alpha.26",
     "@google-cloud/bigquery": "^8.1.1",
+    "@graphenedata/html2canvas": "^1.4.1",
     "@graphenedata/malloy": "0.0.304",
     "@lezer/common": "^1.2.3",
     "@lezer/lr": "^1.4.2",
@@ -36,10 +37,10 @@
     "cli-table3": "^0.6.3",
     "commander": "^11.0.0",
     "debounce": "^1.2.1",
+    "dotenv": "^17.2.3",
     "echarts": "^5.5.0",
     "fs-extra": "11.2.0",
     "glob": "^11.0.3",
-    "@graphenedata/html2canvas": "^1.4.1",
     "marked": "^16.3.0",
     "mdsvex": "^0.12.6",
     "nanoid": "3.3.8",
@@ -57,13 +58,13 @@
     "@types/sanitize-html": "^2.16.0",
     "@types/ws": "^8.18.1",
     "esbuild": "^0.21.5",
-    "vitest": "3.0.5",
+    "vitest": "4.0.15",
     "vscode-languageserver-types": "^3.17.0"
   },
   "scripts": {
-    "build": "rm -rf dist && node ./esbuild.mjs",
-    "test": "vitest run --reporter=default --reporter=json --outputFile=/tmp/graphene-test-results.json",
-    "test-one": "DEBUG=1 node --inspect ../scripts/turboTest.js",
+    "build": "rm -rf dist && rm -f *.tgz && node ./esbuild.mjs",
+    "test": "vitest run cli --root ..",
+    "test-one": "node ../scripts/turboTest.js",
     "prepack": "pnpm run build"
   }
 }

package/dist/ui/playwright.config.ts

@@ -1,30 +0,0 @@
-import {defineConfig, devices} from '@playwright/test'
-
-export default defineConfig({
-  testDir: './tests',
-  outputDir: './tests/results',
-  timeout: 10_000,
-  expect: {
-    timeout: process.env.DEBUG ? 0 : 2_000,
-    toHaveScreenshot: {
-      pathTemplate: '{testDir}/snapshots/{testFilePath}/{arg}{ext}',
-    },
-  },
-  fullyParallel: false,
-  forbidOnly: !!process.env.CI,
-  retries: 0, // process.env.CI ? 1 : 0,
-  reporter: process.env.CI ? [['list'], ['github']] : 'list',
-  use: {
-    headless: true,
-    actionTimeout: 0,
-    trace: 'retain-on-failure',
-    video: 'off',
-    launchOptions: {devtools: !!process.env.DEBUG},
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: {...devices['Desktop Chrome'], browserName: 'chromium'},
-    },
-  ],
-})