Various updates to editor and repl views

shared/common/components/dataGrid/dataGrid.module.scss

@@ -10,10 +10,14 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  overscroll-behavior: contain;
+  overscroll-behavior: contain auto;
   font-family: "Roboto Mono Variable", monospace;
 
   @include hideScrollbar;
+
+  &.noVerticalScroll {
+    overflow-y: hidden;
+  }
 }
 
 .innerWrapper {
@@ -28,7 +32,7 @@
   top: 0;
   min-width: max-content;
   display: grid;
-  background: var(--panel_background);
+  background: var(--header_background);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
   color: var(--main_text_color);
   font-weight: 450;
@@ -86,7 +90,7 @@
   left: 0;
   grid-row: 1 / -1;
   display: grid;
-  background: var(--panel_background);
+  background: var(--header_background);
   z-index: 2;
   border-right: 1px solid var(--panel_border);
 
@@ -153,3 +157,14 @@
     background: var(--Grey12) !important;
   }
 }
+
+.scalar_str,
+.scalar_uuid {
+  &:before,
+  &:after {
+    content: "";
+  }
+}
+.scalar_uuid {
+  color: #6f6f6f;
+}

shared/common/components/dataGrid/index.tsx

@@ -13,9 +13,18 @@ import {useGlobalDragCursor} from "../../hooks/globalDragCursor";
 
 export interface DataGridProps {
   state: DataGridState;
+  className?: string;
+  style?: React.CSSProperties;
+  noVerticalScroll?: boolean;
 }
 
-export function DataGrid({state, children}: PropsWithChildren<DataGridProps>) {
+export function DataGrid({
+  state,
+  className,
+  style,
+  noVerticalScroll,
+  children,
+}: PropsWithChildren<DataGridProps>) {
   const ref = useRef<HTMLDivElement | null>(null);
 
   useResize(ref, ({width, height}) =>
@@ -40,9 +49,11 @@ export function DataGrid({state, children}: PropsWithChildren<DataGridProps>) {
 
   return (
     <CustomScrollbars
-      className={styles.scrollbarWrapper}
+      className={cn(styles.scrollbarWrapper, className)}
       innerClass={styles.innerWrapper}
-      headerPadding={state.headerHeight}
+      style={style}
+      headerPadding={noVerticalScroll ? undefined : state.headerHeight}
+      hideVertical={noVerticalScroll}
     >
       <div
         ref={(el) => {
@@ -53,7 +64,9 @@ export function DataGrid({state, children}: PropsWithChildren<DataGridProps>) {
             el.scrollLeft = state.scrollPos.left;
           }
         }}
-        className={styles.dataGrid}
+        className={cn(styles.dataGrid, {
+          [styles.noVerticalScroll]: !!noVerticalScroll,
+        })}
       >
         <div className={styles.innerWrapper}>{children}</div>
       </div>
@@ -66,11 +79,13 @@ export const GridHeaders = observer(function GridHeaders({
   state,
   pinnedHeaders,
   headers,
+  style,
 }: {
   className?: string;
   state: DataGridState;
   pinnedHeaders: React.ReactNode;
   headers: React.ReactNode;
+  style?: React.CSSProperties;
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -81,6 +96,7 @@ export const GridHeaders = observer(function GridHeaders({
       ref={ref}
       className={cn(styles.headers, className)}
       style={{
+        ...style,
         gridTemplateColumns: `${
           state.pinnedColsWidth ? `${state.pinnedColsWidth}px ` : ""
         }${state.colWidths.join("px ")}px minmax(100px, 1fr)`,

shared/common/components/dataGrid/renderUtils.tsx

@@ -0,0 +1,97 @@
+import {Fragment} from "react";
+
+import {ICodec} from "edgedb/dist/codecs/ifaces";
+import {EnumCodec} from "edgedb/dist/codecs/enum";
+import {NamedTupleCodec} from "edgedb/dist/codecs/namedtuple";
+import {MultiRangeCodec, RangeCodec} from "edgedb/dist/codecs/range";
+
+import {renderValue} from "@edgedb/inspector/buildScalar";
+
+import styles from "./dataGrid.module.scss";
+
+const inspectorOverrideStyles = {
+  uuid: styles.scalar_uuid,
+  str: styles.scalar_str,
+};
+
+export function renderCellValue(
+  value: any,
+  codec: ICodec,
+  nested = false
+): JSX.Element {
+  switch (codec.getKind()) {
+    case "scalar":
+    case "range":
+    case "multirange":
+      return renderValue(
+        value,
+        codec.getKnownTypeName(),
+        codec instanceof EnumCodec,
+        codec instanceof RangeCodec || codec instanceof MultiRangeCodec
+          ? codec.getSubcodecs()[0].getKnownTypeName()
+          : undefined,
+        false,
+        !nested ? inspectorOverrideStyles : undefined,
+        100
+      ).body;
+    case "set":
+      return (
+        <>
+          {"{"}
+          {(value as any[]).map((item, i) => (
+            <Fragment key={i}>
+              {i !== 0 ? ", " : null}
+              {renderCellValue(item, codec.getSubcodecs()[0], true)}
+            </Fragment>
+          ))}
+          {"}"}
+        </>
+      );
+    case "array":
+      return (
+        <>
+          [
+          {(value as any[]).map((item, i) => (
+            <Fragment key={i}>
+              {i !== 0 ? ", " : null}
+              {renderCellValue(item, codec.getSubcodecs()[0], true)}
+            </Fragment>
+          ))}
+          ]
+        </>
+      );
+    case "tuple":
+      return (
+        <>
+          (
+          {(value as any[]).map((item, i) => (
+            <Fragment key={i}>
+              {i !== 0 ? ", " : null}
+              {renderCellValue(item, codec.getSubcodecs()[i], true)}
+            </Fragment>
+          ))}
+          )
+        </>
+      );
+    case "namedtuple": {
+      const fieldNames = (codec as NamedTupleCodec).getNames();
+      const subCodecs = codec.getSubcodecs();
+      return (
+        <>
+          (
+          {fieldNames.map((name, i) => (
+            <Fragment key={i}>
+              {i !== 0 ? ", " : null}
+              {name}
+              {" := "}
+              {renderCellValue(value[name], subCodecs[i], true)}
+            </Fragment>
+          ))}
+          )
+        </>
+      );
+    }
+    default:
+      return <></>;
+  }
+}