Generic Histogram for time-based data

.eslintrc.yml

@@ -66,3 +66,5 @@ rules:
   prettier/prettier:
     - error
     - endOfLine: auto
+  react/react-in-jsx-scope:
+    - off

.node-version

@@ -1 +1 @@
-v16.8.0
+v16.10.0

CODE.md

@@ -0,0 +1,51 @@
+# Coding Patterns
+
+This is here to document the design patterns chosen by the developers. It documents structures, abstractions, and philosophy in this repo.
+
+## Folders
+
+Documentation for where code should go.
+
+### src/domain
+
+Domains are concepts specific to Zui. Things like pools, queries, sessions, history. A domain can contain operations, handlers, a plugin-api, models, types.
+
+### src/core
+
+Core objects and functions can be used across multiple domains. Like menus and commands.
+
+### src/util
+
+This is super generic JavaScript code that knows nothing about Zui, Electron, or Web. It can be copied into another project and work right out of the gate. Code must contain no dependencies in this folder.
+
+## src/plugins
+
+This is a directory of plugins that use the plugin api to add functionality to the app. Come of the plugins are prefixed with the word core to indicate they provide core functionality, but only require the plugin api to achieve this. To add a plugin today, create a new directory in the plugins directory, create and index.ts file within it, then export a named function called activate. It will accept the PluginContext object as its only argument. The go to the `run-plugins.ts` file and call the activate function within the body of runPlugins. This could be make automatic one day, but it's hardcoded for now.
+
+## Glossary of Terms
+
+In no particular order.
+
+_Domain_
+
+A named concept relative to the Zui app. Examples of domains are pools, queries, panes, configurations, plugins. First-class things that people can point to when they describe the app.
+
+_Main Object_
+
+The main object contains methods for managing the application in the main process. It can manage windows, session data, plugins, and app lifecycle.
+
+_Operation_
+
+A function that runs in the main process and has the main object in scope. When the app boots, operations begin listening for IPC invocations from a renderer process. They can also be called directly from the main process using their .run() method. When invoking an operation from the main process, use the invoke function found in src/core/invoke.ts.
+
+_Handler_
+
+A handler is an event listener in the renderer process. It waits for a message from the main process before running its callback function. Messages can be sent to handlers from the main process using sendToFocusedWindow(message, ...arguments).
+
+_Message_
+
+A message is a TypeScript type defining a name and a set of arguments. Messages are necessary to provide types for Operations and Handlers.
+
+_Plugin Api_
+
+The plugin api runs in the Node main process and is given to plugin authors to extend the app. It should not have privileged access to everything. Only what is useful for plugin authors. This means it should not contain references to the full store or the main process. Instead, it exposes methods that in turn call operations. Operations are not exposed to plugins and therefore have the main object and store in scope. The pattern should be: plugin-api exposes a simple method which then runs an operation.

package.json

@@ -42,8 +42,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@brimdata/zed-js": "0.0.16",
-    "@brimdata/zed-node": "0.0.16",
+    "@brimdata/zed-js": "0.0.17",
+    "@brimdata/zed-node": "0.0.17",
     "@codemirror/autocomplete": "^0.19.15",
     "@codemirror/closebrackets": "^0.19.1",
     "@codemirror/commands": "^0.19.8",
@@ -67,7 +67,7 @@
     "@testing-library/user-event": "^14.1.1",
     "@types/animejs": "^3.1.2",
     "@types/classnames": "^2.2.10",
-    "@types/d3": "^5.7.2",
+    "@types/d3": "^6.7.0",
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/fs-extra": "^9.0.1",
     "@types/lodash": "^4.14.161",
@@ -83,8 +83,8 @@
     "@types/sprintf-js": "^1.1.2",
     "@types/styled-components": "^5.1.3",
     "@types/tmp": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "abort-controller": "^3.0.0",
     "acorn": "^7.4.1",
     "ajv": "^6.9.1",
@@ -96,7 +96,7 @@
     "classnames": "^2.2.6",
     "commander": "^2.20.3",
     "cross-fetch": "^3.1.6",
-    "d3": "^5.16.0",
+    "d3": "^6.7.0",
     "date-fns": "^2.16.1",
     "decompress": "^4.2.1",
     "electron": "^22.0.0",
@@ -146,11 +146,14 @@
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.0.2",
     "react-dom": "^18.0.0",
+    "react-error-boundary": "^4.0.10",
+    "react-hook-form": "^7.44.3",
     "react-hot-toast": "^1.0.1",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
     "react-markdown": "^6.0.2",
     "react-redux": "^8.0.5",
+    "react-resizable-panels": "^0.0.45",
     "react-router": "5.3.1",
     "react-spring": "^8.0.27",
     "react-tooltip": "^4.2.7",
@@ -166,7 +169,7 @@
     "styled-components": "^5.3.5",
     "tmp": "^0.1.0",
     "tree-model": "^1.0.7",
-    "typescript": "^4.6.2",
+    "typescript": "5.1.5",
     "use-resize-observer": "^8.0.0",
     "web-file-polyfill": "^1.0.4",
     "web-streams-polyfill": "^3.2.0",

packages/e2e-tests/tests/queries.spec.ts

@@ -28,8 +28,12 @@ test.describe("Query tests", () => {
     const entries = await history.evaluateAll<string[], HTMLElement>((nodes) =>
       nodes.map((n) => n.innerText.trim().replaceAll(/\s+/g, " "))
     )
-
-    expect(entries).toEqual(["3 now", "2 now", "1 now"])
+    const expected = [
+      "from 'sample.tsv' | 3 now",
+      "from 'sample.tsv' | 2 now",
+      "from 'sample.tsv' | 1 now",
+    ]
+    expect(entries).toEqual(expected)
   })
 
   test("named queries' creation, modification, update/save, proper outdated status display", async () => {

src/app/features/right-pane/history/history-item.tsx

@@ -93,7 +93,7 @@ function getValue(active: ActiveQuery) {
   if (active.isDeleted()) {
     return "(Deleted)"
   } else if (active.isAnonymous() || active.isModified()) {
-    return active.value() || "(Empty)"
+    return active.toZed() || "(Empty)"
   } else {
     return active.name()
   }

src/app/query-home/flows/submit-search.ts

@@ -2,9 +2,9 @@ import Current from "src/js/state/Current"
 import Editor from "src/js/state/Editor"
 import Results from "src/js/state/Results"
 import QueryVersions from "../../../js/state/QueryVersions"
-import {MAIN_RESULTS} from "src/js/state/Results/types"
 import {Thunk} from "src/js/state/types"
 import {QueryModel} from "../../../js/models/query-model"
+import {RESULTS_QUERY} from "src/panes/results-pane/run-results-query"
 
 const submitSearch =
   (): Thunk =>
@@ -16,7 +16,7 @@ const submitSearch =
     // An error with the syntax
     if (error) {
       const tabId = Current.getTabId(getState())
-      dispatch(Results.error({id: MAIN_RESULTS, error, tabId}))
+      dispatch(Results.error({id: RESULTS_QUERY, error, tabId}))
       return
     }