Don't Wrap Values in Records (#3145)

* Do not wrap data in a record
* Update types
* Fix detail pane and correlations

apps/zui/src/js/flows/viewLogDetail.ts

@@ -8,7 +8,7 @@ import Current from "../state/Current"
 import {invoke} from "src/core/invoke"
 
 export const viewLogDetail =
-  (record: zed.Record): Thunk =>
+  (record: zed.Value): Thunk =>
   (dispatch, getState) => {
     const current = LogDetails.build(getState())
     if (record && !isEqual(record, current)) {

apps/zui/src/js/state/LogDetails/actions.ts

@@ -9,7 +9,7 @@ import {
 } from "./types"
 
 export default {
-  push: (record: zed.Record): LOG_DETAIL_PUSH => ({
+  push: (record: zed.Value): LOG_DETAIL_PUSH => ({
     type: "LOG_DETAIL_PUSH",
     record,
   }),

apps/zui/src/plugins/brimcap/zeek/correlations.ts

@@ -9,6 +9,7 @@ import {
   FILENAME_CORRELATION,
   UID_CORRELATION,
 } from "./ids"
+import * as zed from "@brimdata/zed-js"
 
 export function activateZeekCorrelations() {
   correlations.create(MD5_CORRELATION, {
@@ -60,7 +61,10 @@ export function activateZeekCorrelations() {
   })
 
   correlations.create(UID_CORRELATION, {
-    when: () => !!session.poolName && !!findUid(session.selectedRow),
+    when: () =>
+      session.selectedRow instanceof zed.Record &&
+      !!session.poolName &&
+      !!findUid(session.selectedRow),
     query: async () => {
       const uid = findUid(session.selectedRow)
       const pool = session.poolName

apps/zui/src/views/correlations-pane/index.tsx

@@ -11,14 +11,17 @@ import {SuricataEvent} from "src/ppl/detail/models/SuricataEvent"
 import {ZeekEvent} from "src/ppl/detail/models/ZeekEvent"
 import {SecurityEvent} from "src/ppl/detail/models/security-event"
 import {EmptyText} from "src/components/empty-text"
+import * as zed from "@brimdata/zed-js"
 
 export function CorrelationsPane() {
   const record = useSelector(LogDetails.build)
-  if (record) {
+  if (record && zed.typeunder(record) instanceof zed.Record) {
     return <Correlations record={record} />
   } else {
     return (
-      <EmptyText>Select a value in the results to run correlations.</EmptyText>
+      <EmptyText>
+        Select a record value in the results to run correlations.
+      </EmptyText>
     )
   }
 }

apps/zui/src/views/results-pane/context.tsx

@@ -8,6 +8,7 @@ import {RESULTS_QUERY} from "src/views/results-pane/config"
 import {useDataTransition} from "src/util/hooks/use-data-transition"
 import useResizeObserver from "use-resize-observer"
 import QueryInfo from "src/js/state/QueryInfo"
+import * as zed from "@brimdata/zed-js"
 
 function useContextValue(parentRef: React.RefObject<HTMLDivElement>) {
   const rect = useResizeObserver({ref: parentRef})
@@ -24,7 +25,8 @@ function useContextValue(parentRef: React.RefObject<HTMLDivElement>) {
     error: parseError || results.error,
     values: results.data,
     shapes,
-    isSingleShape: shapes.length === 1,
+    isSingleRecordShape:
+      shapes.length === 1 && zed.typeunder(shapes[0]) instanceof zed.TypeRecord,
     firstShape: shapes[0],
     loadMore: nextPage,
     key: useSelector(Results.getKey(RESULTS_QUERY)),

apps/zui/src/views/results-pane/index.tsx

@@ -32,7 +32,7 @@ function ResultsView() {
   if (ctx.error) return <Error error={ctx.error} />
   if (ctx.view === "TABLE") {
     if (!ctx.firstShape) return null
-    if (ctx.isSingleShape) return <Table />
+    if (ctx.isSingleRecordShape) return <Table />
     return <TableInspector />
   }
   if (ctx.view === "INSPECTOR") return <Inspector />

apps/zui/src/views/results-pane/inspector.tsx

@@ -61,15 +61,13 @@ export function Inspector(props: {height?: number}) {
       }}
       valueProps={{
         onClick: (e, value, field) => {
-          const rootValue = field.rootRecord
+          const rootValue = field?.rootRecord || value
           dispatch(Selection.set({value, field, rootValue}))
-          if (field && field instanceof zed.Field) {
-            dispatch(viewLogDetail(field.rootRecord))
-          }
+          dispatch(viewLogDetail(rootValue))
         },
         onContextMenu: (e, value, field) => {
           e.preventDefault()
-          const rootValue = field.rootRecord
+          const rootValue = field?.rootRecord || value
           dispatch(Selection.set({value, field, rootValue}))
           if (field && field instanceof zed.Field) {
             showMenu(valueContextMenu(value, field, field.rootRecord))

apps/zui/src/views/results-pane/table-inspector.tsx

@@ -29,15 +29,17 @@ export function TableInspector() {
   const {height, shapes} = useResultsPaneContext()
   return (
     <>
-      <div style={{height: config.headerHeight}}>
-        <Warning>
-          <b>{shapes.length} Shapes</b> — Filter to one shape or{" "}
-          <b>
-            <a onClick={() => fuse()}>fuse</a>
-          </b>{" "}
-          results to view as a table.
-        </Warning>
-      </div>
+      {shapes.length > 1 && (
+        <div style={{height: config.headerHeight}}>
+          <Warning>
+            <b>{shapes.length} Shapes</b> — Filter to one shape or{" "}
+            <b>
+              <a onClick={() => fuse()}>fuse</a>
+            </b>{" "}
+            results to view as a table.
+          </Warning>
+        </div>
+      )}
       <Inspector height={height - config.headerHeight} />
     </>
   )

apps/zui/src/zui-kit/table/table-view.tsx

@@ -7,27 +7,12 @@ import {ReactAdapterProps} from "../types/types"
 import {defaultTableViewState} from "../core/table-view/state"
 import {TableViewApi} from "./table-view-api"
 import {useStateControllers} from "../utils/use-state-controllers"
-import * as zed from "@brimdata/zed-js"
-
-function useEnsureRecord(shape, values) {
-  return useMemo(() => {
-    if (shape instanceof zed.TypeRecord) {
-      return [shape, values]
-    } else {
-      const wrappedValues = values.map((value) =>
-        zed.createRecord({this: value})
-      )
-      const wrappedShape = wrappedValues[0]?.type
-      return [wrappedShape, wrappedValues]
-    }
-  }, [shape, values])
-}
 
 export const TableView = forwardRef(function TableView(
   props: TableViewArgs & ReactAdapterProps,
   ref
 ) {
-  const [shape, values] = useEnsureRecord(props.shape, props.values)
+  const {shape, values} = props
   const controllers = useStateControllers(props, defaultTableViewState)
   const args = {...props, ...controllers, shape, values}
   const api = useMemo(

packages/zui-player/helpers/test-app.ts

@@ -142,7 +142,7 @@ export default class TestApp {
     return await tabs.count();
   }
 
-  async getViewerResults(includeHeaders = true): Promise<string[]> {
+  async getTableResults(includeHeaders = true): Promise<string[]> {
     const fields = await this.mainWin.locator('.zed-table__cell');
     await fields.waitFor();
     let results = await fields.evaluateAll<string[], HTMLElement>((nodes) =>
@@ -159,6 +159,16 @@ export default class TestApp {
     return results;
   }
 
+  async getInspectorResults(): Promise<string[]> {
+    const fields = await this.mainWin.locator('.zed-view');
+    await fields.waitFor();
+    let results = await fields.evaluateAll<string[], HTMLElement>((nodes) =>
+      nodes.map((n) => n.innerText.trim().replaceAll(/\s+/g, ' '))
+    );
+
+    return results;
+  }
+
   async getViewerStats(): Promise<{ results: number; shapes: number }> {
     const results = await this.mainWin
       .locator('span[aria-label="results"]')

packages/zui-player/tests/copy-paste.spec.ts

@@ -17,7 +17,7 @@ play('Copy Paste Data', (app, test) => {
     await app.invoke('loads.paste');
     await app.click('button', 'Load');
     await app.click('button', 'Query Pool');
-    const results = await app.getViewerResults();
+    const results = await app.getTableResults();
     test.expect(results).toEqual(['a', '1']);
   });
 

packages/zui-player/tests/pool-load-success.spec.ts

@@ -20,8 +20,8 @@ test.describe('Pool Loads (successes)', () => {
     await app.query('count()');
     await app.hidden('generic', 'Load Successful');
 
-    const results = await app.getViewerResults();
-    expect(results).toEqual(['this', '1']);
+    const results = await app.getInspectorResults();
+    expect(results).toEqual(['1 ( uint64 )']);
   });
 
   test('load more data into the pool', async () => {
@@ -35,7 +35,7 @@ test.describe('Pool Loads (successes)', () => {
     await app.attached(/successfully loaded/i);
     await app.click('button', 'Query Pool');
     await app.query('count()');
-    const results = await app.getViewerResults();
-    expect(results).toEqual(['this', '2']);
+    const results = await app.getInspectorResults();
+    expect(results).toEqual(['2 ( uint64 )']);
   });
 });