Preview & Load Feature (#2834)

apps/zui/jest.config.js

@@ -10,6 +10,7 @@ const moduleNameMapper = pathsToModuleNameMapper(config.compilerOptions.paths, {
 module.exports = {
   transform: {
     "^.+\\.(t|j)sx?$": ["@swc/jest"],
+    ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform",
   },
   setupFiles: ["./src/test/unit/setup/before-env.ts"],
   setupFilesAfterEnv: ["./src/test/unit/setup/after-env.ts"],

apps/zui/package.json

@@ -16,12 +16,14 @@
     "start:main": "yarn build:main --watch",
     "start:renderer": "next dev",
     "start:electron": "nodemon --watch dist ../../node_modules/electron/cli.js .",
+    "watch-code": "run-p start:main start:renderer",
     "build": "run-p -l 'build:**'",
     "build:main": "node scripts/esbuild.mjs",
     "build:renderer": "next build",
     "clean": "node scripts/clean",
     "test": "jest",
     "format": "prettier '**/*.{js,ts,tsx,scss}' --write --loglevel warn",
+    "tsc": "tsc",
     "postinstall": "node scripts/post-install",
     "prepare": "husky install",
     "package": "electron-builder --publish never",
@@ -62,7 +64,7 @@
     "@types/react-dom": "^18.0.1",
     "@types/react-redux": "^7.1.25",
     "@types/react-router": "^5.1.11",
-    "@types/react-transition-group": "^4.4.0",
+    "@types/react-transition-group": "^4.4.6",
     "@types/react-window": "^1.8.5",
     "@types/semver": "^7.3.3",
     "@types/sprintf-js": "^1.1.2",
@@ -85,7 +87,7 @@
     "electron": "22.3.25",
     "electron-builder": "^23.6.0",
     "electron-builder-notarize": "^1.2.0",
-    "electron-devtools-installer": "^3.2.0",
+    "electron-devtools-assembler": "^1.2.0",
     "electron-dl": "^3.0.1",
     "electron-localshortcut": "^3.2.1",
     "electron-log": "5.0.0-beta.6",
@@ -106,6 +108,7 @@
     "husky": "^7.0.4",
     "is-wsl": "^2.2.0",
     "jest": "^28.0.0",
+    "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^28.0.0",
     "jwt-decode": "^3.1.2",
     "lint-staged": "^12.1.5",
@@ -139,7 +142,7 @@
     "react-router": "5.3.1",
     "react-spring": "^8.0.27",
     "react-tooltip": "^4.2.7",
-    "react-transition-group": "^2.9.0",
+    "react-transition-group": "^4.4.5",
     "react-window": "^1.8.7",
     "regenerator-runtime": "^0.13.6",
     "reselect": "4.0.0",

apps/zui/pages/detail.tsx

@@ -34,7 +34,6 @@ export default function DetailPage() {
   return (
     <AppProvider store={app.store} api={app.api}>
       <AppWindowRouter>
-        <div id="modal-dialog-root" />
         <LogDetailsWindow />
         <Modals />
         <Tooltip />

apps/zui/pages/search.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react"
 import {AppProvider} from "src/app/core/context"
 import {invoke} from "src/core/invoke"
-import App from "src/js/components/App"
+import Application from "src/views/application"
 import initialize from "src/js/initializers/initialize"
 import TabHistories from "src/js/state/TabHistories"
 import {getPersistedWindowState} from "src/js/state/stores/get-persistable"
@@ -28,7 +28,7 @@ export default function SearchPage() {
 
   return (
     <AppProvider store={app.store} api={app.api}>
-      <App />
+      <Application />
     </AppProvider>
   )
 }

apps/zui/project.json

@@ -4,15 +4,8 @@
   "sourceRoot": "apps/zui",
   "projectType": "app",
   "targets": {
-    "tsc": {
-      "executor": "@nrwl/js:tsc",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/zui",
-        "main": "apps/zui/src/index.ts",
-        "tsConfig": "apps/zui/tsconfig.json",
-        "assets": ["apps/zui/*.md"]
-      }
+    "watch-tsc": {
+      "command": "tsc -p apps/zui/tsconfig.json --watch"
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
@@ -29,6 +22,13 @@
         "jestConfig": "apps/zui/jest.config.js",
         "passWithNoTests": true
       }
+    },
+    "build": {
+      "executor": "nx:run-script",
+      "outputs": ["{projectRoot}/dist", "{projectRoot}/out"],
+      "options": {
+        "script": "build"
+      }
     }
   }
 }

apps/zui/scripts/clean.js

@@ -1,15 +1,9 @@
 const fs = require("fs-extra")
 const glob = require("glob")
-const {bold} = require("chalk")
-const flags = require("./util/flags")
 
-console.log(bold("Cleaning built files"))
-if (!flags.keepDist) {
-  fs.removeSync("packages/zealot/dist")
-  fs.removeSync("dist")
-} else {
-  console.log(bold("Keeping dist directories"))
-}
+fs.removeSync("out")
+fs.removeSync(".next")
+fs.removeSync("dist")
 // These are broken symlinks that electron leaves around when it
 // forcefully exists and can't clean them up. Babel tries to call
 // stat on the broken symlinks and blows up.

apps/zui/src/app/commands/pools.ts

@@ -1,11 +1,6 @@
-import {CreatePoolOpts, LoadFormat} from "@brimdata/zed-js"
-import errors from "src/js/errors"
-import {ErrorData} from "src/js/errors/types"
-import ErrorFactory from "src/js/models/ErrorFactory"
 import {PoolName} from "../features/sidebar/pools-section/pool-name"
 import {createCommand} from "./command"
 import {deletePools} from "./delete-pools"
-import {invoke} from "src/core/invoke"
 
 function replaceLastItem<T>(array: T[], item: T) {
   const next = [...array]
@@ -28,6 +23,7 @@ export const renameGroup = createCommand(
       const parts = poolName.parts
       // Replace the group part of the full name
       parts[index] = parts[index].replace(prevName, newName)
+
       const name = parts.join(delimiter)
       changes.push({id: pool.id, changes: {name}})
     }
@@ -69,78 +65,3 @@ export const deleteGroup = createCommand(
     return deletePools.run(descendantIds)
   }
 )
-
-export const createAndLoadFiles = createCommand(
-  "pools.createAndLoadFiles",
-  async (
-    {api},
-    files: string[],
-    opts: {name?: string; format?: LoadFormat} & Partial<CreatePoolOpts> = {}
-  ) => {
-    let poolId: string | null = null
-    const poolNames = api.pools.all.map((p) => p.name)
-    if (!opts.name && files.length === 0) {
-      api.toast("No pool name and no files provided.")
-      return
-    }
-    try {
-      const name =
-        opts.name || (await invoke("derivePoolNameOp", files, poolNames))
-      poolId = await api.pools.create(name, opts)
-
-      if (files.length === 0) {
-        api.toast.success("Pool created: " + name)
-      } else {
-        const promise = api.pools.loadFiles(poolId, files, opts.format)
-        api.toast.promise(promise, {
-          loading: `Loading data into pool: ${name}...`,
-          success: "Load successful",
-          error: "Load error",
-        })
-        await promise
-        return poolId
-      }
-    } catch (e) {
-      console.error(e)
-      if (poolId) await api.pools.delete(poolId)
-      api.notice.error(parseError(e))
-      api.pools.syncAll()
-      throw e
-    }
-  }
-)
-
-export const loadFiles = createCommand(
-  "pools.loadFiles",
-  async ({api}, id: string, files: string[], format?: LoadFormat) => {
-    try {
-      const promise = api.pools.loadFiles(id, files, format)
-      api.toast.promise(promise, {
-        loading: "Loading data into pool...",
-        success: "Load successful",
-        error: "Load error",
-      })
-      await promise
-    } catch (e) {
-      api.notice.error(parseError(e))
-      api.pools.syncAll()
-      console.error(e)
-    }
-  }
-)
-
-function parseError(e: Error): ErrorData {
-  if (/(Failed to fetch)|(network error)/.test(e && e.message)) {
-    return errors.importInterrupt()
-  } else if (/format detection error/i.test(e && e.message)) {
-    return errors.formatDetection(e.message)
-  } else if (/EISDIR/.test(e && e.message)) {
-    return ErrorFactory.create(
-      new Error(
-        "Importing directories is not yet supported. Select multiple files."
-      )
-    )
-  } else {
-    return ErrorFactory.create(e)
-  }
-}

apps/zui/src/app/core/hooks/use-parent-size.ts

@@ -0,0 +1,21 @@
+import {MutableRefObject, useEffect, useState} from "react"
+
+export function useParentSize<T extends HTMLElement>(ref: MutableRefObject<T>) {
+  const [{height, width}, setSize] = useState({width: 10, height: 10})
+
+  useEffect(() => {
+    const el = ref.current
+    const parent = el.parentElement
+    const ro = new ResizeObserver((e) => {
+      const {height, width} = e[0].contentRect
+      setSize({height, width})
+    })
+    ro.observe(parent)
+    return () => {
+      ro.unobserve(parent)
+      ro.disconnect()
+    }
+  }, [])
+
+  return {height, width}
+}

apps/zui/src/app/core/icon-temp.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classNames from "classnames"
-import styled, {css} from "styled-components"
+import styled from "styled-components"
 import icons from "./icons"
 
 export type IconName = keyof typeof icons
@@ -22,7 +22,7 @@ const Wrap = styled.i<{
   svg {
     height: ${(p) => p.size || 22}px;
     width: ${(p) => p.size || 22}px;
-    fill: ${(p) => p.fill || css`var(--foreground-color)`};
+    fill: ${(p) => p.fill || "currentColor"};
     stroke: ${(p) => p.stroke || "inherit"};
   }
 `

apps/zui/src/app/core/models/abortables.ts

@@ -10,29 +10,27 @@ export type Abortable<Meta = any> = {
 }
 
 type NewAbortable = Omit<Abortable, "id">
+type Predicate = string | Partial<Abortable>
 
 export class Abortables {
   registry: Abortable[] = []
 
   async abort(predicate: string | Partial<Abortable>) {
-    if (isString(predicate)) {
-      const a = this.get(predicate)
-      if (a) {
-        return await a.abort()
-      }
-    } else {
-      return Promise.all(
-        this.filter(predicate).map((a) => {
-          return a.abort()
-        })
-      )
-    }
+    const aborts = this.filter(predicate)
+    this.remove(predicate)
+    return await Promise.all(aborts.map((a) => a.abort()))
   }
 
   async abortAll() {
     return Promise.all(this.all().map((a) => a.abort()))
   }
 
+  create(id: string) {
+    const ctl = new AbortController()
+    this.add({id, abort: () => ctl.abort()})
+    return ctl
+  }
+
   add(a: Abortable | NewAbortable) {
     const id = "id" in a ? a.id : nanoid()
     this.registry.push({id, ...a})
@@ -43,7 +41,7 @@ export class Abortables {
     return [...this.registry]
   }
 
-  filter(predicate?: Partial<Abortable>) {
+  filter(predicate?: Predicate) {
     if (!predicate) return this.all()
     return this.registry.filter(this.matchFn(predicate))
   }
@@ -52,18 +50,21 @@ export class Abortables {
     return this.registry.find((a) => a.id === id) || null
   }
 
-  remove(predicate?: string | Partial<Abortable>) {
+  remove(predicate?: Predicate) {
     if (!predicate) {
       this.registry = []
-    } else if (isString(predicate)) {
-      remove(this.registry, (a) => a.id === predicate)
     } else {
       remove(this.registry, this.matchFn(predicate))
     }
   }
 
-  private matchFn(predicate) {
-    return (a) =>
-      Object.keys(predicate).every((key) => a[key] === predicate[key])
+  private matchFn(predicate: Predicate) {
+    return (a: Abortable) => {
+      if (isString(predicate)) {
+        return a.id === predicate
+      } else {
+        return Object.keys(predicate).every((key) => a[key] === predicate[key])
+      }
+    }
   }
 }

apps/zui/src/app/core/models/zed-script.ts

@@ -7,4 +7,14 @@ export class ZedScript {
   get ast() {
     return this._ast || (this._ast = new ZedAst(this.script))
   }
+
+  isEmpty() {
+    const lines = this.script.split("\n")
+    const comment = /^\s*\/\/.*$/
+    const whiteSpace = /^\s*$/
+    const linesWithZed = lines.filter(
+      (line) => !comment.test(line) && !whiteSpace.test(line)
+    )
+    return linesWithZed.length === 0
+  }
 }

apps/zui/src/app/core/pools/pool.ts

@@ -43,8 +43,7 @@ export class Pool {
   }
 
   empty() {
-    if (this.stats && this.stats.span) return this.stats.span.dur === 0
-    else return true
+    return this.size === 0
   }
 
   minTime(): Date {