@graphenedata/cli 0.0.7 → 0.0.9

package/cli.ts

@@ -24,8 +24,7 @@ program.hook('preAction', async () => {
   loadConfig(process.cwd())
 })
 
-program
-  .command('compile')
+program.command('compile')
   .description('Translate a query to SQL and print it')
   .argument('[input]', 'Path to file, a raw string, or "-" for stdin')
   .action(async (input: string | undefined) => {
@@ -36,8 +35,7 @@ program
     console.log(toSql(queries[0]))
   })
 
-program
-  .command('run')
+program.command('run')
   .description('Run a query against your database')
   .argument('[input]', 'Path to file, a raw string, or "-" for stdin')
   .action(async (input: string | undefined) => {
@@ -64,10 +62,12 @@ program.command('schema')
 
     // figure out if you're wanting to list tables in a schema/dataset
     let dsToList: string | null = null
+    let parts = tableArg ? tableArg.split('.') : []
     if (datasets.includes(tableArg)) dsToList = tableArg // you gave the name of a dataset
     else if (!tableArg && datasets.length == 1) dsToList = datasets[0] // only one dataset, and no args
     else if (!tableArg && config.namespace) dsToList = config.namespace // default namespace configured
     else if (!tableArg && config.dialect == 'duckdb') dsToList = '<default>'
+    else if (tableArg && config.dialect == 'snowflake' && parts.length == 2) dsToList = tableArg
 
     if (dsToList) {
       let tables = await connection.listTables(dsToList)
@@ -82,8 +82,7 @@ program.command('schema')
     console.log(')')
   })
 
-program
-  .command('serve')
+program.command('serve')
   .description('Run the local server')
   .option('--bg', 'Run the server in the background')
   .action(async (options: {bg?: boolean}) => {
@@ -101,8 +100,7 @@ program.command('stop')
   .description('Stop the local server')
   .action(async () => { await stopGrapheneIfRunning() })
 
-program
-  .command('check')
+program.command('check')
   .description('Check the project for errors, optionally capturing a page screenshot')
   .argument('[mdFile]', 'Markdown file to check (e.g., index.md)')
   .option('-c, --chart <chartTitle>', 'Title of a specific chart to capture')

package/dist/cli/cli.js

@@ -150,15 +150,17 @@ function setConfig(cfg) {
   else if (cfg.snowflake) dialect = "snowflake";
   else if (cfg.duckdb) dialect = "duckdb";
   Object.keys(config).forEach((key) => delete config[key]);
-  Object.assign(config, cfg, { dialect });
+  Object.assign(config, cfg);
+  config.dialect = dialect;
+  config.root ||= process.cwd();
+  config.ignoredFiles ||= ["agents.md", "claude.md"];
 }
 function loadConfig(dir) {
   if (config.root) return;
   let packageJsonObject = {};
   try {
     let txt2 = fs.readFileSync(path.join(dir, "package.json"), "utf8");
-    let all = JSON.parse(txt2);
-    packageJsonObject = all.graphene || {};
+    packageJsonObject = JSON.parse(txt2).graphene || {};
   } catch {
     console.warn("No package.json found in current directory");
   }
@@ -729,7 +731,7 @@ function addColumnField(table2, node) {
     table2.primaryKey = name;
   }
   let type = convertDataType(txt(node.getChild("DataType")));
-  if (!type) diag(node, `Unsupported data type: ${txt(node.getChild("DataType"))}`);
+  if (!type) return diag(node, `Unsupported data type: ${txt(node.getChild("DataType"))}`);
   addFieldToTable(table2, { name, type, metadata: extractLeadingMetadata(node) }, node);
 }
 function addJoinField(table2, node) {
@@ -1115,7 +1117,7 @@ function lookupTable(name, node) {
   }
 }
 function clearWorkspace() {
-  FILE_MAP = {};
+  Object.keys(FILE_MAP).forEach((k) => delete FILE_MAP[k]);
   TABLE_NODE_MAP = /* @__PURE__ */ new WeakMap();
   diagnostics = [];
 }
@@ -1504,63 +1506,33 @@ var init_markdown = __esm({
 });
 
 // ../lang/snowflake.ts
-function uppercaseMalloyQuery(query) {
-  query.baseTableName = uppercaseIdentifier(query.baseTableName);
-  for (let stage of query.pipeline || []) {
-    let fields = stage.queryFields || [];
-    fields.forEach((field) => uppercaseColumnField(field));
-    let filters = stage.filterList || [];
-    filters.forEach((filter) => uppercaseExpression(filter?.e));
-  }
-}
 function uppercaseTable(table2) {
   if (table2.upperCased) return;
   table2.upperCased = true;
-  table2.name = uppercaseIdentifier(table2.name);
-  if (table2.primaryKey) table2.primaryKey = uppercaseIdentifier(table2.primaryKey);
-  if (table2.tableName) table2.tableName = uppercaseQualified(table2.tableName);
-  if (table2.tablePath) table2.tablePath = uppercaseQualified(table2.tablePath);
-  table2.fields?.forEach((field) => uppercaseField(field));
-  if (table2.query) uppercaseMalloyQuery(table2.query);
+  if (table2.query) return;
+  table2.tablePath = uppercaseIdentifier(table2.tablePath);
+  table2.fields.forEach(uppercaseField);
 }
 function uppercaseField(field) {
-  if (!field) return;
-  if (isJoinField(field)) {
-    field.name = uppercaseIdentifier(field.name);
-    if (field.tableName) field.tableName = uppercaseQualified(field.tableName);
-    if (field.tablePath) field.tablePath = uppercaseQualified(field.tablePath);
-    if (field.structPath) field.structPath = field.structPath.map(uppercaseIdentifier);
-    if (field.path) field.path = field.path.map(uppercaseIdentifier);
-    if (field.onExpression) uppercaseExpression(field.onExpression);
-    uppercaseTable(field);
-  } else {
-    uppercaseColumnField(field);
-  }
-}
-function uppercaseColumnField(field) {
-  if (!field) return;
+  if (isJoinField(field)) return uppercaseTable(field);
+  if (field.upperCased) return;
+  field.upperCased = true;
+  if (field.e) return uppercaseExpression(field.e);
+  field.as = field.name;
   field.name = uppercaseIdentifier(field.name);
-  if (field.path) field.path = field.path.map(uppercaseIdentifier);
-  if (field.structPath) field.structPath = field.structPath.map(uppercaseIdentifier);
-  if (field.tableName) field.tableName = uppercaseQualified(field.tableName);
-  if (field.tablePath) field.tablePath = uppercaseQualified(field.tablePath);
-  if (field.e) uppercaseExpression(field.e);
 }
 function uppercaseExpression(expr) {
   if (!expr) return;
   walkExpression(expr, (node) => {
-    if (Array.isArray(node.path)) node.path = node.path.map(uppercaseIdentifier);
-    if (Array.isArray(node.structPath)) node.structPath = node.structPath.map(uppercaseIdentifier);
+    if (node.type == "field") {
+      node.path = node.path.map(uppercaseIdentifier);
+    }
   });
 }
 function uppercaseIdentifier(value) {
   if (!value) return value || "";
   return value.toString().toUpperCase();
 }
-function uppercaseQualified(value) {
-  if (!value) return value;
-  return value.split(".").map((part) => part.startsWith('"') && part.endsWith('"') ? part : uppercaseIdentifier(part)).join(".");
-}
 function isJoinField(field) {
   return !!field?.join;
 }
@@ -1583,7 +1555,7 @@ function getDiagnostics() {
   return diagnostics;
 }
 async function loadWorkspace(dir, includeMd) {
-  let files = await glob(includeMd ? "**/*.{gsql,md}" : "**/*.gsql", { cwd: dir, ignore: ["node_modules/**"] });
+  let files = await glob(includeMd ? "**/*.{gsql,md}" : "**/*.gsql", { cwd: dir, ignore: ["node_modules/**"], follow: false });
   for await (let file of files) {
     try {
       let contents = await readFile(path2.join(dir, file), "utf-8");
@@ -1633,11 +1605,16 @@ function toSql(query, params = {}) {
   }));
   query = structuredClone(query);
   fillInParams(query, params);
-  if (config.dialect == "snowflake") uppercaseMalloyQuery(query);
-  let tableQueries = Object.values(contents).map((t) => t.query);
-  let joinQueries = Object.values(contents).flatMap((t) => t.fields.map((f) => f.query));
-  let allQueries = [...tableQueries, ...joinQueries, query].filter((q) => !!q);
-  allQueries.forEach((q) => q.structRef = contents[q.baseTableName]);
+  let visited = /* @__PURE__ */ new Set();
+  function setStructRefs(obj) {
+    if (!obj || typeof obj !== "object" || visited.has(obj)) return;
+    visited.add(obj);
+    if (obj.baseTableName && obj.pipeline) obj.structRef = contents[obj.baseTableName];
+    if (obj.query) setStructRefs(obj.query);
+    if (obj.fields) for (let f of obj.fields) setStructRefs(f);
+  }
+  Object.values(contents).forEach(setStructRefs);
+  setStructRefs(query);
   let qm = new QueryModel({
     name: "generated_model",
     contents,
@@ -1896,6 +1873,9 @@ async function check(options) {
     log("No errors found \u{1F48E}");
     return true;
   }
+  if (process.env.NODE_ENV == "test" && mdFile) {
+    delete FILE_MAP[mdFile];
+  }
   let host = `http://localhost:${config.port || Number(process.env.GRAPHENE_PORT) || 4e3}`;
   let pageUrl = "/" + mdFile.replace(/\.md$/, "").replace(/^\//, "").replace(/\\/g, "/");
   if (pageUrl === "/index") pageUrl = "/";
@@ -2046,6 +2026,7 @@ var init_check = __esm({
     init_mockFiles();
     init_background();
     init_util();
+    init_analyze();
     browserConnections = [];
     pendingRequests = {};
   }
@@ -2382,9 +2363,6 @@ __export(snowflake_exports, {
 });
 import { createPrivateKey } from "node:crypto";
 import snowflake from "snowflake-sdk";
-function getSnowflakeNamespace() {
-  throw new Error("Not yet implemented");
-}
 function snowflakeIdent(value) {
   if (!value) throw new Error("Snowflake identifiers cannot be empty");
   return `"${value.replace(/"/g, '""')}"`;
@@ -2453,36 +2431,34 @@ var init_snowflake2 = __esm({
         });
       }
       async listDatasets() {
-        await Promise.resolve();
-        throw new Error("Not yet implemented");
+        let res = await this.runQuery("show databases");
+        return res.rows.map((row) => String(row["name"] || ""));
       }
-      async listTables() {
-        let { database } = getSnowflakeNamespace();
-        let tablesRef = `${snowflakeIdent(database)}.${snowflakeIdent("INFORMATION_SCHEMA")}.${snowflakeIdent("TABLES")}`;
-        let sql = `
+      async listTables(dataset) {
+        let parts = dataset.split(".");
+        let database = parts.shift() || "";
+        let schema = parts.join(".");
+        let res = await this.runQuery(`
       select table_schema as "table_schema", table_name as "table_name"
-      from ${tablesRef}
-      where table_type in ('BASE TABLE', 'VIEW')
-      order by table_schema, table_name
-    `.trim();
-        let res = await this.runQuery(sql);
-        return res.rows.map((row) => String(row["table_name"] || ""));
+      from ${snowflakeIdent(database)}.INFORMATION_SCHEMA.TABLES
+      where table_type in ('BASE TABLE', 'VIEW') and table_schema = ${sqlStringLiteral3(schema)}
+      order by table_name
+    `);
+        return res.rows.map((row) => `${row["table_schema"]}.${row["table_name"]}`);
       }
       async describeTable(target) {
         let parts = target.split(".");
-        let table2 = parts.pop() || "";
         let database = parts.shift() || "";
+        let table2 = parts.pop() || "";
         let schema = parts.join(".");
-        let columnsRef = `${snowflakeIdent(database)}.${snowflakeIdent("INFORMATION_SCHEMA")}.${snowflakeIdent("COLUMNS")}`;
-        let sql = `
+        let res = await this.runQuery(`
       select column_name as "column_name", data_type as "data_type", ordinal_position as ordinal_position
-      from ${columnsRef}
+      from ${snowflakeIdent(database)}.INFORMATION_SCHEMA.COLUMNS
       where upper(table_schema) = upper(${sqlStringLiteral3(schema)}) and upper(table_name) = upper(${sqlStringLiteral3(table2)})
       order by ordinal_position
-    `.trim();
-        let res = await this.runQuery(sql);
+    `);
         return res.rows.map((row) => {
-          return { name: String(row["column_name"]), dataType: String(row["data_type"]) };
+          return { name: String(row["column_name"]).toLowerCase(), dataType: String(row["data_type"]) };
         });
       }
     };
@@ -2618,20 +2594,28 @@ var init_mdCompile = __esm({
 // serve2.ts
 var serve2_exports = {};
 __export(serve2_exports, {
+  prepareDeps: () => prepareDeps,
   serve2: () => serve2
 });
-import { createServer, optimizeDeps } from "vite";
+import { createServer, optimizeDeps, resolveConfig } from "vite";
 import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 import fs7 from "fs-extra";
+import { glob as glob2 } from "glob";
 import crypto2 from "crypto";
 import { mdsvex } from "mdsvex";
 import path8 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 async function serve2() {
+  let server = await createServer(await createConfig());
+  await server.listen();
+  console.log(`Server running at http://localhost:${server.config.server.port}`);
+  return server;
+}
+async function createConfig() {
   uiRoot = path8.join(fileURLToPath2(import.meta.url), "../../ui");
   let port = Number(process.env.GRAPHENE_PORT) || 4e3;
   await fs7.ensureDir(path8.resolve(config.root, "node_modules/.graphene"));
-  let server = await createServer({
+  return {
     root: config.root,
     plugins: [
       svelte({
@@ -2646,11 +2630,15 @@ async function serve2() {
           injectComponentImports()
         ]
       }),
+      fixSvelteDepsInTests(),
       checkVitePlugin(),
       handleRequestPlugin,
       updateWorkspacePlugin,
       mockFilesForTests()
     ],
+    publicDir: path8.resolve(uiRoot, "public"),
+    // on the fence about this one. This would make it less likely we need to optimize when alternating between dev and tests.
+    // cacheDir: process.env.NODE_ENV == 'test' ? 'node_modules/.vite-tests' : 'node_modules/.vite',
     server: {
       port,
       fs: { strict: false },
@@ -2660,16 +2648,39 @@ async function serve2() {
       alias: {
         graphene: path8.resolve(uiRoot, "web.js")
       }
+    },
+    // vite's pre-bundling won't naturally discover these dependencies since they're transitive.
+    // Instead, we need to list them out here so vite knows where they are.
+    optimizeDeps: {
+      noDiscovery: process.env.NODE_ENV == "test",
+      // tests manually optimize before starting test workers
+      exclude: ["virtual:nav"],
+      include: [
+        "@graphenedata/cli > svelte",
+        "@graphenedata/cli > ssf",
+        "@graphenedata/cli > @tidyjs/tidy",
+        "@graphenedata/cli > chroma-js",
+        "@graphenedata/cli > echarts/dist/echarts.esm.js",
+        "@graphenedata/cli > @graphenedata/html2canvas"
+      ]
     }
-    // optimizeDeps: { // this seems prudent in tests, but currently breaks because ssf needs to be optimized, even in tests
-    //   noDiscovery: process.env.NODE_ENV == 'test',
-    //   include: process.env.NODE_ENV == 'test' ? [] : undefined,
-    // },
-  });
-  await optimizeDeps(server.config);
-  await server.listen();
-  console.log(`Server running at http://localhost:${port}`);
-  return server;
+  };
+}
+async function prepareDeps() {
+  let cfg = await resolveConfig(await createConfig(), "serve");
+  await optimizeDeps(cfg, true);
+}
+function fixSvelteDepsInTests() {
+  let viteConfig;
+  function configResolved(cfg) {
+    viteConfig = cfg;
+  }
+  function buildStart() {
+    if (process.env.NODE_ENV != "test") return;
+    viteConfig.optimizeDeps.force = false;
+  }
+  buildStart.sequential = true;
+  return { name: "fix-svelte-deps", enforce: "pre", sequential: true, configResolved, buildStart };
 }
 async function handleQuery(req, res) {
   let chunks = [];
@@ -2700,7 +2711,7 @@ async function handleQuery(req, res) {
 async function handlePage(server, res, filePath, mount) {
   res.setHeader("Content-Type", "text/html");
   let mdMount = mount ? `
-    import Page from ${JSON.stringify(filePath)};
+    import Page from ${JSON.stringify(filePath)}
     new Page({ target: document.getElementById('content'), props: {} })
   ` : "";
   let html = await server.transformIndexHtml(filePath, `<!doctype html>
@@ -2710,14 +2721,10 @@ async function handlePage(server, res, filePath, mount) {
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Graphene</title>
       <link rel="icon" href="/favicon.ico" />
-      <link rel="preconnect" href="https://fonts.googleapis.com">
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
     </head>
     <body>
-      <main>
-        <div id="content"></div>
-      </main>
+      <nav id="nav"></nav>
+      <main id="content"></main>
       <script type="module">
         import 'graphene' // do this first so we can track errors caused by importing the md file
         ${mdMount}
@@ -2736,11 +2743,12 @@ function mockFilesForTests() {
     },
     load(id) {
       if (!id.endsWith("?mock")) return null;
-      return mockFileMap[id.replace(config.root + "/", "").replace(/\?mock$/, "")];
+      let content = mockFileMap[id.replace(config.root + "/", "").replace(/\?mock$/, "")];
+      return content;
     }
   };
 }
-var uiRoot, workspaceLoadPromise, updateWorkspacePlugin, handleRequestPlugin;
+var uiRoot, workspaceLoadPromise, mdFiles, updateWorkspacePlugin, handleRequestPlugin;
 var init_serve2 = __esm({
   "serve2.ts"() {
     "use strict";
@@ -2749,15 +2757,38 @@ var init_serve2 = __esm({
     init_mdCompile();
     init_check();
     init_mockFiles();
+    mdFiles = [];
     updateWorkspacePlugin = {
       name: "updateWorkspace",
+      resolveId(id) {
+        if (id == "virtual:nav") return "\0virtual:nav";
+      },
+      load(id) {
+        if (id != "\0virtual:nav") return;
+        let allFiles = [...mdFiles];
+        if (process.env.NODE_ENV == "test") {
+          for (let key of Object.keys(mockFileMap)) {
+            if (!allFiles.includes(key)) allFiles.push(key);
+          }
+        }
+        return `export default ${JSON.stringify(allFiles)}`;
+      },
       configureServer: (s) => {
-        s.watcher.add("**/*.gsql");
-        s.watcher.on("change", () => {
+        let refresh = async () => {
           clearWorkspace();
           workspaceLoadPromise = loadWorkspace(config.root, false);
-        });
-        workspaceLoadPromise = loadWorkspace(config.root, false);
+          mdFiles = await glob2("**/*.md", { cwd: config.root, ignore: ["node_modules/**"] });
+          mdFiles = mdFiles.filter((f) => !config.ignoredFiles?.includes(path8.basename(f).toLowerCase()));
+          if (process.env.NODE_ENV == "test") {
+            mdFiles.push(...Object.keys(mockFileMap));
+          }
+          let mod = s.moduleGraph.getModuleById("\0virtual:nav");
+          if (!mod) return;
+          s.reloadModule(mod);
+        };
+        s.watcher.add(["**/*.gsql", "**/*.md"]);
+        s.watcher.on("all", refresh);
+        refresh();
       }
     };
     handleRequestPlugin = {
@@ -2768,19 +2799,16 @@ var init_serve2 = __esm({
             let [pathName] = (req.url || "").split("?");
             if (pathName == "/_api/query") return await handleQuery(req, res);
             if (pathName == "/__ct") return await handlePage(s, res, "__ct", false);
-            if (pathName == "/favicon.ico") {
-              res.setHeader("Content-Type", "image/x-icon");
-              return res.end(await fs7.readFile(path8.resolve(uiRoot, "assets/favicon.ico")));
-            }
             if (!pathName || pathName == "/") pathName = "index";
-            let mdPath = path8.join(config.root, pathName + ".md");
-            if (await fs7.exists(mdPath)) {
+            let relativeMdPath = pathName.replace(/^\//, "") + ".md";
+            let mdPath = path8.join(config.root, relativeMdPath);
+            if (mockFileMap[relativeMdPath] || await fs7.exists(mdPath)) {
               await handlePage(s, res, mdPath, true);
             } else {
               next();
             }
           } catch (err) {
-            console.error(err);
+            if (process.env.NODE_ENV != "test") console.error(err);
             res.statusCode = 500;
             res.end(JSON.stringify([{ message: err.message, stack: err.stack }]));
           }
@@ -2835,10 +2863,12 @@ program.command("schema").description("Inspect database tables or describe a tab
 ${datasets.join("\n")}`);
   }
   let dsToList = null;
+  let parts = tableArg ? tableArg.split(".") : [];
   if (datasets.includes(tableArg)) dsToList = tableArg;
   else if (!tableArg && datasets.length == 1) dsToList = datasets[0];
   else if (!tableArg && config.namespace) dsToList = config.namespace;
   else if (!tableArg && config.dialect == "duckdb") dsToList = "<default>";
+  else if (tableArg && config.dialect == "snowflake" && parts.length == 2) dsToList = tableArg;
   if (dsToList) {
     let tables = await connection.listTables(dsToList);
     return console.log(`Tables${dsToList ? ` in ${dsToList}` : ""}:

package/dist/docs/graphene.md

@@ -575,8 +575,8 @@ Here's an example:
 |----------|-------------|----------|---------|---------|
 | data | Query name, wrapped in curly braces | true | query name | - |
 | x | Column or expression to use for the x-axis of the chart | false | column name, stored expression name, GSQL expression | First column |
-| y | Column(s) or expression(s) to use for the y-axis of the chart. Each will create its own series. Consider a split axis with `y2` if there is a difference of scale or unit of measure between the series. | false | column name, stored expression name, GSQL expression, list of any combination of these | Any non-assigned numeric columns |
-| y2 | Column(s) or expression(s) to include on a secondary y-axis. | false | column name, stored expression name, GSQL expression, list of any combination of these | - |
+| y | Column(s) or expression(s) to use for the y-axis of the chart. Each will create its own series. Consider a split axis with `y2` if there is a difference of scale or unit of measure between the series. | false | column name, stored expression name, GSQL expression, list of any combination of these e.g. `"col1, my_expr"` | Any non-assigned numeric columns |
+| y2 | Column(s) or expression(s) to include on a secondary y-axis. | false | column name, stored expression name, GSQL expression, list of any combination of these e.g. `"col1, my_expr"` | - |
 | y2SeriesType | Chart type to apply to the series on the y2 axis | false | `bar`, `line`, `scatter` | `bar` |
 | series | Column or expression to use to define the series (groups) in a multi-series chart. Use when values of a particular column dictate the multiple series to plot, eg. `country` would create a series for every distinct country in the column. | false | column name, stored expression name, GSQL expression | - |
 | sort | Whether to apply default sort to your data. Default sort is x ascending for number and date x-axes, and y descending for category x-axes | false | `true`, `false` | `true` |
@@ -598,7 +598,7 @@ Here's an example:
 | outlineWidth | Width of line surrounding each bar | number | `0` |
 | outlineColor | Color to use for outline if outlineWidth > 0 | CSS name, hexademical, RGB, HSL | - |
 | colorPalette | List of custom colors to use for the chart | list of color strings (CSS name, hexademical, RGB, HSL) e.g. `"#cf0d06, #eb5752, #e88a87"` | built-in color palette |
-| seriesOrder | Apply a specific order to the series in a multi-series chart. | list of series names in the order they should be used in the chart `"Canada, US"` | default order implied by the data |
+| seriesOrder | Apply a specific order to the series in a multi-series chart. | list of series names in the order they should be used in the chart e.g. `"Canada, US"` | default order implied by the data |
 | leftPadding | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off | number | - |
 | rightPadding | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off | number | - |
 | xLabelWrap | Whether to wrap x-axis labels when there is not enough space. Default behaviour is to truncate the labels. | `true`, `false` | `false` |
@@ -723,8 +723,8 @@ Here's an example:
 |------|-------------|----------|---------|---------|
 | data | Query name, wrapped in curly braces | true | query name | - |
 | x | Column or expression to use for the x-axis of the chart | true | column name, stored expression name, GSQL expression | - |
-| y | Column(s) or expression(s) to use for the y-axis of the chart. Each will create its own series. Consider a split axis with `y2` if there is a difference of scale or unit of measure between the series. | true | column name, stored expression name, GSQL expression, list of any combination of these | - |
-| y2 | Column(s) or expression(s) to include on a secondary y-axis. | false | column name, stored expression name, GSQL expression, list of any combination of these | - |
+| y | Column(s) or expression(s) to use for the y-axis of the chart. Each will create its own series. Consider a split axis with `y2` if there is a difference of scale or unit of measure between the series. | true | column name, stored expression name, GSQL expression, list of any combination of these e.g. `"col1, my_expr"` | - |
+| y2 | Column(s) or expression(s) to include on a secondary y-axis. | false | column name, stored expression name, GSQL expression, list of any combination of these e.g. `"col1, my_expr"` | - |
 | y2SeriesType | Chart type to apply to the series on the y2 axis | false | `line`, `bar`, `scatter` | `line` |
 | series | Column or expression to use to define the series (groups) in a multi-series chart. Use when values of a particular column dictate the multiple series to plot, eg. `country` would create a series for every distinct country in the column. | false | column name, stored expression name, GSQL expression | - |
 | sort | Whether to apply default sort to your data. Default is x ascending for number and date x-axes, and y descending for category x-axes | false | `true`, `false` | `true` |
@@ -750,7 +750,7 @@ Here's an example:
 | markerShape | Shape to use if markers=true | false | `circle`, `emptyCircle`, `rect`, `triangle`, `diamond` | `circle` |
 | markerSize | Size of each shape (in pixels) | false | number | `8` |
 | colorPalette | List of custom colors to use for the chart | false | list of color strings (CSS name, hexademical, RGB, HSL) e.g. `"#cf0d06, #eb5752, #e88a87"` | - |
-| seriesOrder | Apply a specific order to the series in a multi-series chart. | false | list of series names in the order they should be used in the chart `"Canada, US"` | default order implied by the data |
+| seriesOrder | Apply a specific order to the series in a multi-series chart. | false | list of series names in the order they should be used in the chart e.g. `"Canada, US"` | default order implied by the data |
 | labels | Show value labels | false | `true`, `false` | `false` |
 | labelSize | Font size of value labels | false | number | `11` |
 | labelPosition | Where label will appear on your series | false | `above`, `middle`, `below` | `above` |
@@ -832,7 +832,7 @@ Here's an example:
 |------|-------------|----------|---------|---------|
 | data | Query name, wrapped in curly braces | true | query name | - |
 | x | Column or expression to use for the x-axis of the chart | true | column name, stored expression name, GSQL expression | First column |
-| y | Column(s) or expression(s) to use for the y-axis of the chart. Each will create its own series. Consider a split axis with `y2` if there is a difference of scale or unit of measure between the series. | true | column name, stored expression name, GSQL expression, list of any combination of these | Any non-assigned numeric columns |
+| y | Column(s) or expression(s) to use for the y-axis of the chart. Each will create its own series. Consider a split axis with `y2` if there is a difference of scale or unit of measure between the series. | true | column name, stored expression name, GSQL expression, list of any combination of these e.g. `"col1, my_expr"` | Any non-assigned numeric columns |
 | series | Column or expression to use to define the series (groups) in a multi-series chart. Use when values of a particular column dictate the multiple series to plot, eg. `country` would create a series for every distinct country in the column. | false | column name, stored expression name, GSQL expression | - |
 | sort | Whether to apply default sort to your data. Default sort is x ascending for number and date x-axes, and y descending for category x-axes | false | `true`, `false` | `true` |
 | type | Grouping method to use for multi-series charts | false | `stacked`, `stacked100` | `stacked` |
@@ -854,7 +854,7 @@ Here's an example:
 | fillOpacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | `0.7` |
 | line | Show line on top of the area | false | `true`, `false` | `true` |
 | colorPalette | List of custom colors to use for the chart | false | list of color strings (CSS name, hexademical, RGB, HSL) e.g. `"#cf0d06, #eb5752, #e88a87"` | built-in color palette |
-| seriesOrder | Apply a specific order to the series in a multi-series chart. | false | list of series names in the order they should be used in the chart `"Canada, US"` | default order implied by the data |
+| seriesOrder | Apply a specific order to the series in a multi-series chart. | false | list of series names in the order they should be used in the chart e.g. `"Canada, US"` | default order implied by the data |
 | leftPadding | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off | false | number | - |
 | rightPadding | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off | false | number | - |
 | xLabelWrap | Whether to wrap x-axis labels when there is not enough space. Default behaviour is to truncate the labels. | false | `true`, `false` | `false` |

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.7",
+  "version": "0.0.9",
   "license": "Elastic-2.0",
   "engines": {
     "node": ">=16"
@@ -58,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'},
-    },
-  ],
-})