From 41a3bfbba118c3f39bd5e6f264230e83986ad87e Mon Sep 17 00:00:00 2001
From: Tim Jennison <tjennison@verily.com>
Date: Thu, 30 Jan 2025 19:45:50 +0000
Subject: [PATCH] Fix errors caused by numeric IDs that are too big for JS
 numbers

* Numbers in JS are doubles by default. This generally works fine
  for numeric data but can cause truncation for IDs that use the
  entire space of an int64.
* The JSON functions can't correctly handle the large numbers
  without some change to the format. The easiest is to send int64s
  as strings.
* Those numbers are converted to BigInts to make them numeric but
  retain their precision. This requires using them throughout the
  code since our keys/ids are generally int64s.
* BigInts don't follow the same coercion rules as numbers, so many
  places that previously just worked (e.g. data maps, JSX keys) no
  longer do. Convert data maps to actual Map objects and
  explicitly convert keys to strings.
* The change to Maps exposes some clunkiness in the way TreeGrid
  data is handled. Sticking to a simple conversion for now but
  will consider other changes in a followup.
---
 .../controller/objmapping/FromApiUtils.java   |  7 +-
 .../app/controller/objmapping/ToApiUtils.java |  5 +-
 .../main/resources/api/service_openapi.yaml   |  4 +-
 ui/codegen.sh                                 |  2 +-
 ui/src/addByCode.tsx                          |  2 +-
 ui/src/addCohort.tsx                          |  2 +-
 ui/src/addCriteria.tsx                        | 27 ++++----
 ui/src/cohortReview/cohortReview.tsx          | 19 +++---
 ui/src/cohortReview/cohortReviewList.tsx      |  4 +-
 ui/src/cohortReview/participantsList.tsx      | 15 +++--
 .../cohortReview/plugins/occurrenceTable.tsx  | 21 +++---
 ui/src/cohortReview/plugins/textSearch.tsx    |  2 +-
 ui/src/components/treegrid.test.tsx           | 67 ++++++++++++-------
 ui/src/components/treegrid.tsx                | 37 ++++++----
 ui/src/criteria/attribute.tsx                 |  2 +-
 ui/src/criteria/classification.tsx            | 54 ++++++++-------
 ui/src/criteria/filterableGroup.tsx           |  5 +-
 ui/src/criteria/survey.tsx                    | 51 ++++++++------
 ui/src/data/source.tsx                        | 31 +++++----
 ui/src/data/types.ts                          |  5 +-
 ui/src/export.tsx                             | 13 ++--
 ui/src/fakeApis.ts                            |  6 +-
 ui/src/featureSet/addFeatureSet.tsx           |  2 +-
 ui/src/featureSet/featureSet.tsx              | 12 ++--
 ui/src/sampleApp/studiesList.tsx              |  8 +--
 ui/src/sampleApp/studyOverview.tsx            |  8 +--
 ui/src/viz/viz.ts                             | 13 +++-
 27 files changed, 245 insertions(+), 179 deletions(-)

diff --git a/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/FromApiUtils.java b/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/FromApiUtils.java
index 4b5ba60a2..c1c8569ae 100644
--- a/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/FromApiUtils.java
+++ b/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/FromApiUtils.java
@@ -503,7 +503,12 @@ private static ValueDisplayField buildRelationshipField(
 
   public static Literal fromApiObject(ApiLiteral apiLiteral) {
     return switch (apiLiteral.getDataType()) {
-      case INT64 -> Literal.forInt64(apiLiteral.getValueUnion().getInt64Val());
+        // JavaScript can't handle the full int64 range when parsing JSON, so parse them as strings.
+      case INT64 ->
+          Literal.forInt64(
+              apiLiteral.getValueUnion().getInt64Val() != null
+                  ? Long.parseLong(apiLiteral.getValueUnion().getInt64Val())
+                  : null);
       case STRING -> Literal.forString(apiLiteral.getValueUnion().getStringVal());
       case BOOLEAN -> Literal.forBoolean(apiLiteral.getValueUnion().isBoolVal());
       case DATE -> Literal.forDate(apiLiteral.getValueUnion().getDateVal());
diff --git a/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/ToApiUtils.java b/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/ToApiUtils.java
index 3f254f1c8..b2a20a4cb 100644
--- a/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/ToApiUtils.java
+++ b/service/src/main/java/bio/terra/tanagra/app/controller/objmapping/ToApiUtils.java
@@ -90,7 +90,10 @@ public static ApiLiteral toApiObject(Literal literal) {
         new ApiLiteral().dataType(ApiDataType.fromValue(literal.getDataType().name()));
     return switch (literal.getDataType()) {
       case INT64 ->
-          apiLiteral.valueUnion(new ApiLiteralValueUnion().int64Val(literal.getInt64Val()));
+          // JavaScript can't handle the full int64 range when parsing JSON, so send them as
+          // strings.
+          apiLiteral.valueUnion(
+              new ApiLiteralValueUnion().int64Val(literal.getInt64Val().toString()));
       case STRING ->
           apiLiteral.valueUnion(new ApiLiteralValueUnion().stringVal(literal.getStringVal()));
       case BOOLEAN ->
diff --git a/service/src/main/resources/api/service_openapi.yaml b/service/src/main/resources/api/service_openapi.yaml
index 0a791ecbc..909e9711f 100644
--- a/service/src/main/resources/api/service_openapi.yaml
+++ b/service/src/main/resources/api/service_openapi.yaml
@@ -1522,8 +1522,8 @@ components:
             boolVal:
               type: boolean
             int64Val:
-              type: integer
-              format: int64
+              # Transfer int64s as strings to avoid overflowing JavaScript's number precision.
+              type: string
             stringVal:
               type: string
             dateVal:
diff --git a/ui/codegen.sh b/ui/codegen.sh
index 87c4bb256..f4b162c38 100755
--- a/ui/codegen.sh
+++ b/ui/codegen.sh
@@ -7,4 +7,4 @@ openapi-generator-cli generate -i ../service/src/main/resources/api/service_open
 # Generate plugin proto code.
 rm -rf src/proto
 mkdir src/proto
-npx protoc --proto_path=../underlay/src/main/proto/ --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=./src/proto/ --ts_proto_opt=esModuleInterop=true --ts_proto_opt=outputClientImpl=false ../underlay/src/main/proto/criteriaselector/dataschema/*.proto ../underlay/src/main/proto/criteriaselector/configschema/*.proto ../underlay/src/main/proto/viz/*.proto
+npx protoc --proto_path=../underlay/src/main/proto/ --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=./src/proto/ --ts_proto_opt=esModuleInterop=true --ts_proto_opt=outputClientImpl=false --ts_proto_opt=forceLong=bigint ../underlay/src/main/proto/criteriaselector/dataschema/*.proto ../underlay/src/main/proto/criteriaselector/configschema/*.proto ../underlay/src/main/proto/viz/*.proto
diff --git a/ui/src/addByCode.tsx b/ui/src/addByCode.tsx
index 1ba25c85c..54ff37858 100644
--- a/ui/src/addByCode.tsx
+++ b/ui/src/addByCode.tsx
@@ -204,7 +204,7 @@ export function AddByCode() {
                   return undefined;
                 }
 
-                const item = data[id]?.data as LookupEntryItem;
+                const item = data.get(id)?.data as LookupEntryItem;
                 if (!item) {
                   return undefined;
                 }
diff --git a/ui/src/addCohort.tsx b/ui/src/addCohort.tsx
index d6350fea8..40dc87749 100644
--- a/ui/src/addCohort.tsx
+++ b/ui/src/addCohort.tsx
@@ -117,7 +117,7 @@ export function AddCohort() {
                   return undefined;
                 }
 
-                const cohortData = data[id].data as CohortData;
+                const cohortData = data.get(id)?.data as CohortData;
                 if (!cohortData) {
                   return undefined;
                 }
diff --git a/ui/src/addCriteria.tsx b/ui/src/addCriteria.tsx
index a2fe0c468..0bb903992 100644
--- a/ui/src/addCriteria.tsx
+++ b/ui/src/addCriteria.tsx
@@ -21,7 +21,6 @@ import Loading from "components/loading";
 import { Search } from "components/search";
 import {
   TreeGrid,
-  TreeGridData,
   TreeGridId,
   TreeGridItem,
   TreeGridRowData,
@@ -353,9 +352,9 @@ function AddCriteria(props: AddCriteriaProps) {
 
   const search = useCallback(async () => {
     const children: DataKey[] = [];
-    const data: TreeGridData = {
-      root: { data: {}, children },
-    };
+    const data = new Map<TreeGridId, CriteriaItem>([
+      ["root", { data: {}, children }],
+    ]);
 
     if (query) {
       const res = await searchCriteria(
@@ -377,13 +376,13 @@ function AddCriteria(props: AddCriteriaProps) {
           },
           entry: entry,
         };
-        data[key] = item;
+        data.set(key, item);
       });
     }
 
     return data;
   }, [underlaySource, query, selectedOptions, optionsMap]);
-  const searchState = useSWRImmutable<TreeGridData>(
+  const searchState = useSWRImmutable<Map<TreeGridId, CriteriaItem>>(
     {
       component: "AddCriteria",
       underlayName: underlay.name,
@@ -523,7 +522,7 @@ function AddCriteria(props: AddCriteriaProps) {
         {!!query ? (
           <Paper>
             <Loading status={searchState}>
-              {!searchState.data?.root?.children?.length ? (
+              {!searchState.data?.get("root")?.children?.length ? (
                 <Empty
                   minHeight="300px"
                   image={emptyImage}
@@ -532,7 +531,7 @@ function AddCriteria(props: AddCriteriaProps) {
               ) : (
                 <TreeGrid
                   columns={columns}
-                  data={searchState.data ?? {}}
+                  data={searchState.data ?? new Map()}
                   rowCustomization={(
                     id: TreeGridId,
                     rowData: TreeGridRowData
@@ -541,11 +540,11 @@ function AddCriteria(props: AddCriteriaProps) {
                       return undefined;
                     }
 
-                    const item = searchState.data[id] as CriteriaItem;
-                    const option = optionsMap.get(item.entry.source);
-                    if (!option) {
+                    const item = searchState.data.get(id);
+                    const option = optionsMap.get(item?.entry?.source ?? "");
+                    if (!option || !item?.entry?.source) {
                       throw new Error(
-                        `Item source "${item.entry.source}" doesn't match any criteria config ID.`
+                        `Item source "${item?.entry?.source}" doesn't match any criteria config ID.`
                       );
                     }
 
@@ -556,7 +555,7 @@ function AddCriteria(props: AddCriteriaProps) {
                           <GridLayout colAlign="center">
                             <Button
                               data-testid={rowData[searchConfig.columns[0].key]}
-                              onClick={() => onClick(option, item.entry.data)}
+                              onClick={() => onClick(option, item.entry?.data)}
                               variant="outlined"
                             >
                               Add
@@ -577,5 +576,5 @@ function AddCriteria(props: AddCriteriaProps) {
 }
 
 type CriteriaItem = TreeGridItem & {
-  entry: MergedItem<DataEntry>;
+  entry?: MergedItem<DataEntry>;
 };
diff --git a/ui/src/cohortReview/cohortReview.tsx b/ui/src/cohortReview/cohortReview.tsx
index 1d60211ea..fc1408f46 100644
--- a/ui/src/cohortReview/cohortReview.tsx
+++ b/ui/src/cohortReview/cohortReview.tsx
@@ -315,7 +315,7 @@ function AnnotationComponent(props: {
 
   // TODO(tjennison): Expand handling of older and newer revisions and improve
   // their UI once the API is updated.
-  const values = props.instance?.annotations?.[props.annotation.id];
+  const values = props.instance?.annotations?.get(props.annotation.id);
   const currentValue = values?.find((v) => v.current)?.value;
   const latestValue = values?.[values?.length]?.value;
 
@@ -339,9 +339,12 @@ function AnnotationComponent(props: {
             props.instance.data.key
           ),
         (instance: ReviewInstance) => {
-          instance.annotations[props.annotation.id] = instance.annotations[
-            props.annotation.id
-          ]?.filter((v) => !v.current);
+          instance.annotations.set(
+            props.annotation.id,
+            (instance.annotations.get(props.annotation.id) ?? []).filter(
+              (v) => !v.current
+            )
+          );
         }
       );
     } else {
@@ -432,17 +435,17 @@ function createUpdateCurrentValue(
   value: DataValue
 ) {
   const annotations = instance.annotations;
-  const cur = annotations[annotationId]?.find((v) => v.current);
+  const cur = annotations.get(annotationId)?.find((v) => v.current);
   if (cur) {
     cur.value = value;
   } else {
-    annotations[annotationId] = [
-      ...(annotations[annotationId] ?? []),
+    annotations.set(annotationId, [
+      ...(annotations.get(annotationId) ?? []),
       {
         current: true,
         instanceId: instance.data.key,
         value: value,
       },
-    ];
+    ]);
   }
 }
diff --git a/ui/src/cohortReview/cohortReviewList.tsx b/ui/src/cohortReview/cohortReviewList.tsx
index 8e1a8dce7..a33615c68 100644
--- a/ui/src/cohortReview/cohortReviewList.tsx
+++ b/ui/src/cohortReview/cohortReviewList.tsx
@@ -33,7 +33,7 @@ import {
   TreeGridId,
   useArrayAsTreeGridData,
 } from "components/treegrid";
-import { Annotation, AnnotationType, CohortReview } from "data/source";
+import { AnnotationType, CohortReview } from "data/source";
 import { useStudySource } from "data/studySourceContext";
 import { useUnderlaySource } from "data/underlaySourceContext";
 import deepEqual from "deep-equal";
@@ -692,7 +692,7 @@ function Annotations() {
                   return undefined;
                 }
 
-                const annotation = data[id].data as Annotation;
+                const annotation = data.get(id)?.data;
                 if (!annotation) {
                   return undefined;
                 }
diff --git a/ui/src/cohortReview/participantsList.tsx b/ui/src/cohortReview/participantsList.tsx
index f09145fcc..edaf5b77b 100644
--- a/ui/src/cohortReview/participantsList.tsx
+++ b/ui/src/cohortReview/participantsList.tsx
@@ -125,9 +125,7 @@ function ParticipantsList(props: ParticipantsListProps) {
   );
 
   const data = useMemo(() => {
-    const data: TreeGridData = {
-      root: { data: {}, children: [] },
-    };
+    const data: TreeGridData = new Map([["root", { data: {}, children: [] }]]);
 
     instancesState.data
       ?.slice(
@@ -136,13 +134,16 @@ function ParticipantsList(props: ParticipantsListProps) {
       )
       .forEach((instance) => {
         const key = instance.data.key;
-        data[key] = { data: { ...instance.data } };
-        data.root?.children?.push(key);
+        data.set(key, { data: { ...instance.data } });
+        data.get("root")?.children?.push(key);
 
         annotationsState.data?.forEach((a) => {
-          const values = instance.annotations[a.id];
+          const values = instance.annotations.get(a.id);
           if (values) {
-            data[key].data[`t_${a.id}`] = values[values.length - 1].value;
+            const valueData = data.get(key)?.data;
+            if (valueData) {
+              valueData[`t_${a.id}`] = values[values.length - 1].value;
+            }
           }
         });
       });
diff --git a/ui/src/cohortReview/plugins/occurrenceTable.tsx b/ui/src/cohortReview/plugins/occurrenceTable.tsx
index 6595dd2a6..7ebcee65c 100644
--- a/ui/src/cohortReview/plugins/occurrenceTable.tsx
+++ b/ui/src/cohortReview/plugins/occurrenceTable.tsx
@@ -62,12 +62,10 @@ function OccurrenceTable({ id, config }: { id: string; config: Config }) {
 
   const data = useMemo(() => {
     const children: DataKey[] = [];
-    const data: TreeGridData = {
-      root: { data: {}, children },
-    };
+    const data: TreeGridData = new Map([["root", { data: {}, children }]]);
 
     context.rows[config.entity]?.forEach((o) => {
-      data[o.key] = { data: o };
+      data.set(o.key, { data: o });
       children.push(o.key);
     });
 
@@ -84,22 +82,25 @@ function OccurrenceTable({ id, config }: { id: string; config: Config }) {
 
   const sortedData = useMemo(() => {
     return produce(data, (data) => {
-      if (!data.root?.children) {
+      const root = data.get("root");
+      if (!root) {
         return;
       }
 
-      data.root.children = data.root.children.filter((child) =>
+      root.children = (root.children ?? []).filter((child) =>
         Object.entries(filterRegExps ?? {}).reduce(
           (cur: boolean, [col, re]) =>
             cur &&
-            re.test(stringifyDataValue(data[child].data[col] as DataValue)),
+            re.test(
+              stringifyDataValue(data.get(child)?.data?.[col] as DataValue)
+            ),
           true
         )
       );
-      data.root.children.sort((a, b) => {
+      root.children.sort((a, b) => {
         for (const o of searchState.sortOrders ?? []) {
-          const valA = data[a].data[o.column] as DataValue | undefined;
-          const valB = data[b].data[o.column] as DataValue | undefined;
+          const valA = data.get(a)?.data?.[o.column] as DataValue | undefined;
+          const valB = data.get(b)?.data?.[o.column] as DataValue | undefined;
           const c = compareDataValues(valA, valB);
           if (c !== 0) {
             return o.direction === TreeGridSortDirection.Asc ? c : -c;
diff --git a/ui/src/cohortReview/plugins/textSearch.tsx b/ui/src/cohortReview/plugins/textSearch.tsx
index ea79723d5..2a62538ff 100644
--- a/ui/src/cohortReview/plugins/textSearch.tsx
+++ b/ui/src/cohortReview/plugins/textSearch.tsx
@@ -185,7 +185,7 @@ function TextSearch({ id, config }: { id: string; config: Config }) {
       >
         <Stack spacing={1} alignItems="stretch">
           {entities.map((o) => (
-            <Paper key={o.key} sx={{ overflow: "hidden" }}>
+            <Paper key={String(o.key)} sx={{ overflow: "hidden" }}>
               <Stack
                 alignItems="flex-start"
                 sx={{
diff --git a/ui/src/components/treegrid.test.tsx b/ui/src/components/treegrid.test.tsx
index 3421a836c..5a5cbe2be 100644
--- a/ui/src/components/treegrid.test.tsx
+++ b/ui/src/components/treegrid.test.tsx
@@ -3,7 +3,12 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import IconButton from "@mui/material/IconButton";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TreeGrid, TreeGridData, TreeGridId } from "components/treegrid";
+import {
+  TreeGrid,
+  TreeGridData,
+  TreeGridId,
+  TreeGridItem,
+} from "components/treegrid";
 import React from "react";
 
 test("Table renders correctly", async () => {
@@ -27,33 +32,45 @@ test("Table renders correctly", async () => {
     },
   ];
 
-  const data: TreeGridData = {
-    root: {
-      data: {},
-      children: [1, 3],
-    },
-    1: {
-      data: {
-        col1: "1-col1",
-        col2: "1-col2",
+  const data = new Map<TreeGridId, TreeGridItem>([
+    [
+      "root",
+      {
+        data: {},
+        children: [1, 3],
       },
-      children: [2],
-    },
-    2: {
-      data: {
-        col1: "2-col1",
-        col2: "2-col2",
-        col3: "2-col3",
+    ],
+    [
+      1,
+      {
+        data: {
+          col1: "1-col1",
+          col2: "1-col2",
+        },
+        children: [2],
       },
-    },
-    3: {
-      data: {
-        col1: "3-col1",
-        col2: "3-col2",
-        col3: <AccountTreeIcon />,
+    ],
+    [
+      2,
+      {
+        data: {
+          col1: "2-col1",
+          col2: "2-col2",
+          col3: "2-col3",
+        },
       },
-    },
-  };
+    ],
+    [
+      3,
+      {
+        data: {
+          col1: "3-col1",
+          col2: "3-col2",
+          col3: <AccountTreeIcon />,
+        },
+      },
+    ],
+  ]);
 
   const rowCustomization = (id: TreeGridId) => {
     // Add variety to the rows.
diff --git a/ui/src/components/treegrid.tsx b/ui/src/components/treegrid.tsx
index f3e57afc2..0116f7eeb 100644
--- a/ui/src/components/treegrid.tsx
+++ b/ui/src/components/treegrid.tsx
@@ -31,12 +31,13 @@ import { useImmer } from "use-immer";
 import { standardDateString } from "util/date";
 import { spacing } from "util/spacing";
 
-export type TreeGridId = string | number;
+export type TreeGridId = string | number | bigint;
 export type TreeGridValue =
   | undefined
   | null
   | string
   | number
+  | bigint
   | boolean
   | object
   | JSX.Element
@@ -46,14 +47,15 @@ export type TreeGridRowData = {
   [key: string]: TreeGridValue;
 };
 
-export type TreeGridItem = {
+export type TreeGridItem<RowType extends TreeGridRowData = TreeGridRowData> = {
   children?: TreeGridId[];
-  data: TreeGridRowData;
+  data: RowType;
 };
 
-export type TreeGridData<ItemType extends TreeGridItem = TreeGridItem> = {
-  [key: TreeGridId]: ItemType;
-};
+export type TreeGridData<ItemType extends TreeGridItem = TreeGridItem> = Map<
+  TreeGridId,
+  ItemType
+>;
 
 export type TreeGridColumn = {
   key: string;
@@ -388,16 +390,18 @@ export function TreeGrid<ItemType extends TreeGridItem = TreeGridItem>(
 export function useArrayAsTreeGridData<
   T extends TreeGridRowData,
   K extends keyof T
->(array: T[], key: K) {
+>(array: T[], key: K): TreeGridData<TreeGridItem<T>> {
   return useMemo(() => {
     const children: TreeGridId[] = [];
-    const data: TreeGridData = {
-      root: { data: {}, children },
-    };
+    const data = new Map<TreeGridId, TreeGridItem<T>>([
+      // Force empty data here since it's never accessed but making it optional
+      // is a pain for "data" access everywhere.
+      ["root", { data: {} as T, children }],
+    ]);
 
     array?.forEach((a) => {
       const k = a[key] as TreeGridId;
-      data[k] = { data: a };
+      data.set(k, { data: a });
       children.push(k);
     });
 
@@ -432,13 +436,17 @@ function renderChildren(
 ): JSX.Element[] {
   const results: JSX.Element[] = [];
 
-  props.data[id]?.children?.forEach((childId) => {
-    const child = props.data[childId];
+  props.data.get(id)?.children?.forEach((childId) => {
+    const child = props.data.get(childId);
     if (!child) {
       return;
     }
 
     const childState = state.get(childId);
+
+    if (!child.data) {
+      throw new Error(`'data' is undefined for ${JSON.stringify(child)}`);
+    }
     const rowCustomization = props.rowCustomization?.(childId, child.data);
 
     const renderColumn = (
@@ -550,6 +558,9 @@ function renderChildren(
         }}
       >
         {props.columns.map((col, i) => {
+          if (!child.data) {
+            throw new Error(`'data' is undefined for ${JSON.stringify(child)}`);
+          }
           let value = child.data[col.key];
           const isNull = value === null;
           if (isNull) {
diff --git a/ui/src/criteria/attribute.tsx b/ui/src/criteria/attribute.tsx
index d210042bb..07229fddd 100644
--- a/ui/src/criteria/attribute.tsx
+++ b/ui/src/criteria/attribute.tsx
@@ -382,7 +382,7 @@ async function search(
   hintData.enumHintOptions.forEach((hint) => {
     const key = hint.value;
     if (
-      (typeof key === "string" || typeof key === "number") &&
+      (typeof key === "string" || typeof key === "bigint") &&
       hint.name.search(re) >= 0
     ) {
       results.push({
diff --git a/ui/src/criteria/classification.tsx b/ui/src/criteria/classification.tsx
index f9f449088..c66d2f6bc 100644
--- a/ui/src/criteria/classification.tsx
+++ b/ui/src/criteria/classification.tsx
@@ -198,13 +198,14 @@ class _ implements CriteriaPlugin<string> {
 function dataKey(key: DataKey, entityGroup: string): string {
   return JSON.stringify({
     entityGroup,
-    key,
+    stringVal: typeof key === "string" ? key : undefined,
+    bigIntVal: typeof key === "bigint" ? String(key) : undefined,
   });
 }
 
 function keyFromDataKey(key: string): DataKey {
   const parsed = JSON.parse(key);
-  return parsed.key;
+  return parsed.bigIntVal ? BigInt(parsed.bigIntVal) : parsed.stringVal;
 }
 
 type SearchState = {
@@ -215,7 +216,7 @@ type SearchState = {
   // The ancestor list of the item to view the hierarchy for.
   hierarchy?: string[];
   // The item to highlight and scroll to in the hierarchy.
-  highlightId?: DataKey;
+  highlightId?: TreeGridId;
 };
 
 type ClassificationEditProps = {
@@ -326,8 +327,8 @@ function ClassificationEdit(props: ClassificationEditProps) {
       hierarchy?: DataKey[],
       parent?: DataKey,
       prevData?: TreeGridData
-    ) => {
-      const data = prevData ?? {};
+    ): Map<TreeGridId, EntityNodeItem> => {
+      const data = prevData ?? new Map();
 
       const children: DataKey[] = [];
       nodes.forEach(({ source: entityGroup, data: node }) => {
@@ -349,7 +350,7 @@ function ClassificationEdit(props: ClassificationEditProps) {
         // Copy over existing children in case they're being loaded in
         // parallel. Grouping children and non-grouping, non-hierarchy nodes
         // always have no children.
-        let childChildren = data[key]?.children;
+        let childChildren = data.get(key)?.children;
         if (!childChildren) {
           if (
             (!hierarchy && group && parent) ||
@@ -367,17 +368,17 @@ function ClassificationEdit(props: ClassificationEditProps) {
           entityGroup,
           groupingNode: !!group && !parent,
         };
-        data[key] = cItem;
+        data.set(key, cItem);
       });
 
       if (parent) {
         // Store children even if the data isn't loaded yet.
-        data[parent] = { ...data[parent], children };
+        data.set(parent, { ...data.get(parent), children });
       } else {
-        data.root = {
-          children: [...(data?.root?.children || []), ...children],
+        data.set("root", {
+          children: [...(data?.get("root")?.children || []), ...children],
           data: {},
-        };
+        });
       }
 
       return data;
@@ -531,7 +532,7 @@ function ClassificationEdit(props: ClassificationEditProps) {
 
   // Partially update the state when expanding rows in the hierarchy view.
   const updateData = useCallback(
-    (data: TreeGridData) => {
+    (data: Map<TreeGridId, EntityNodeItem>) => {
       instancesState.mutate(data, { revalidate: false });
     },
     [instancesState]
@@ -635,7 +636,7 @@ function ClassificationEdit(props: ClassificationEditProps) {
             </GridBox>
           </GridBox>
           <Loading status={instancesState}>
-            {!instancesState.data?.root?.children?.length ? (
+            {!instancesState.data?.get("root")?.children?.length ? (
               <Empty
                 minHeight="300px"
                 image={emptyImage}
@@ -662,7 +663,7 @@ function ClassificationEdit(props: ClassificationEditProps) {
                   // TODO(tjennison): Make TreeGridData's type generic so we can
                   // avoid this type assertion. Also consider passing the
                   // TreeGridItem to the callback instead of the TreeGridRowData.
-                  const item = instancesState.data[id] as EntityNodeItem;
+                  const item = instancesState.data.get(id) as EntityNodeItem;
                   if (!item || item.groupingNode) {
                     return undefined;
                   }
@@ -793,7 +794,7 @@ function ClassificationEdit(props: ClassificationEditProps) {
                   }
 
                   const findEntityGroupConfig = () => {
-                    const item = data[id] as EntityNodeItem;
+                    const item = data.get(id) as EntityNodeItem;
                     if (item) {
                       const config = configEntityGroups(props.config).find(
                         (eg) => eg.id === item.entityGroup
@@ -871,7 +872,7 @@ function ClassificationEdit(props: ClassificationEditProps) {
                         <GridLayout rows sx={{ height: "fit-content" }}>
                           {localCriteria.selected.map((s, i) => (
                             <GridLayout
-                              key={s.key}
+                              key={String(s.key)}
                               cols
                               fillCol={0}
                               rowAlign="middle"
@@ -979,7 +980,7 @@ function HierarchySearchList(props: HierarchySearchListProps) {
             const title = String(n.data?.[nameAttribute(props.config)]);
             return (
               <Link
-                key={n.data.key}
+                key={String(n.data.key)}
                 component="button"
                 variant="body2"
                 color="inherit"
@@ -1034,7 +1035,7 @@ function ClassificationInline(props: ClassificationInlineProps) {
     <GridLayout rows height="auto">
       {decodedData.selected.map((s, i) => (
         <ValueDataEdit
-          key={s.key}
+          key={String(s.key)}
           hintEntity={entityGroup.occurrenceEntityIds[0]}
           relatedEntity={entityGroup.selectionEntity.name}
           hintKey={s.key}
@@ -1158,17 +1159,24 @@ function generateLookupFilters(
       throw new Error(`Unknown attribute "${ca}" in entity "${entity.name}".`);
     }
 
+    const values: tanagra.Literal[] = [];
+    codes.forEach((c) => {
+      try {
+        values.push(
+          literalFromDataValue(convertAttributeStringToDataValue(c, attribute))
+        );
+      } catch (e) {
+        // Don't attempt to match this attribute if conversion fails.
+      }
+    });
+
     operands.push({
       filterType: tanagra.FilterFilterTypeEnum.Attribute,
       filterUnion: {
         attributeFilter: {
           attribute: ca,
           operator: tanagra.AttributeFilterOperatorEnum.In,
-          values: codes.map((c) =>
-            literalFromDataValue(
-              convertAttributeStringToDataValue(c, attribute)
-            )
-          ),
+          values: values,
         },
       },
     });
diff --git a/ui/src/criteria/filterableGroup.tsx b/ui/src/criteria/filterableGroup.tsx
index a6d194f71..87ad04e3b 100644
--- a/ui/src/criteria/filterableGroup.tsx
+++ b/ui/src/criteria/filterableGroup.tsx
@@ -402,9 +402,8 @@ function FilterableGroupEdit(props: FilterableGroupEditProps) {
                     <GridLayout rows>
                       <Typography variant="body1">Query examples:</Typography>
                       {[...props.config.searchConfigs]
-                        .sort(
-                          (a, b) =>
-                            (a.displayOrder ?? 0) - (b.displayOrder ?? 0)
+                        .sort((a, b) =>
+                          Number((a.displayOrder ?? 0) - (b.displayOrder ?? 0))
                         )
                         .map((sc) => (
                           <Typography key={sc.name} variant="body2em">
diff --git a/ui/src/criteria/survey.tsx b/ui/src/criteria/survey.tsx
index ab832edaa..5370ecc21 100644
--- a/ui/src/criteria/survey.tsx
+++ b/ui/src/criteria/survey.tsx
@@ -278,7 +278,7 @@ function SurveyEdit(props: SurveyEditProps) {
 
   const processEntities = useCallback(
     (allEntityGroups: [string, EntityNode[]][]) => {
-      const data: EntityTreeGridData = {};
+      const data: EntityTreeGridData = new Map();
 
       allEntityGroups.forEach(([entityGroup, nodes]) => {
         nodes.forEach((node) => {
@@ -292,28 +292,29 @@ function SurveyEdit(props: SurveyEditProps) {
 
           const cItem: EntityNodeItem = {
             data: rowData,
-            children: data[key]?.children ?? [],
+            children: data.get(key)?.children ?? [],
             node: node,
             entityGroup,
             type:
-              data[key]?.type ??
+              data.get(key)?.type ??
               (node.childCount === 0
                 ? EntityNodeItemType.Answer
                 : EntityNodeItemType.Topic),
             parentKey: parentKey,
           };
-          data[key] = cItem;
+          data.set(key, cItem);
 
-          if (data[parentKey]) {
-            data[parentKey].children?.push(key);
+          const parent = data.get(parentKey);
+          if (parent) {
+            parent.children?.push(key);
             if (cItem.type === EntityNodeItemType.Answer) {
-              data[parentKey].type = EntityNodeItemType.Question;
+              parent.type = EntityNodeItemType.Question;
             }
           } else {
             const d = {
               key: parentKey,
             };
-            data[parentKey] = {
+            data.set(parentKey, {
               data: d,
               node: {
                 data: d,
@@ -325,7 +326,7 @@ function SurveyEdit(props: SurveyEditProps) {
                   ? EntityNodeItemType.Question
                   : EntityNodeItemType.Topic,
               children: [key],
-            };
+            });
           }
         });
       });
@@ -398,10 +399,10 @@ function SurveyEdit(props: SurveyEditProps) {
   const [filteredData, defaultExpanded] = useMemo(() => {
     const data = instancesState.data;
     if (!data) {
-      return [{}, []];
+      return [new Map(), []];
     }
     if (!searchState?.query) {
-      return [data, data["root"]?.children ?? []];
+      return [data, data.get("root")?.children ?? []];
     }
 
     // TODO(tjennison): Handle RegExp errors.
@@ -410,7 +411,11 @@ function SurveyEdit(props: SurveyEditProps) {
     const ancestors = new Set<TreeGridId>();
 
     const matchNode = (key: TreeGridId) => {
-      const node = data[key];
+      const node = data.get(key);
+      if (!node) {
+        throw new Error(`Tree node not found for ${key}.`);
+      }
+
       if (node.type != EntityNodeItemType.Topic) {
         for (const k in node.data) {
           if (re.test(String(node.data[k]))) {
@@ -429,8 +434,12 @@ function SurveyEdit(props: SurveyEditProps) {
 
     const filtered = produce(data, (data) => {
       for (const key in data) {
-        const node = data[key];
-        data[key].children =
+        const node = data.get(key);
+        if (!node) {
+          throw new Error(`Tree node not found for ${key}.`);
+        }
+
+        node.children =
           node.type === EntityNodeItemType.Question && matched.has(key)
             ? node.children
             : node.children?.filter((c) => ancestors.has(c) || matched.has(c));
@@ -475,7 +484,7 @@ function SurveyEdit(props: SurveyEditProps) {
             />
           </GridBox>
           <Loading status={instancesState}>
-            {!filteredData?.root?.children?.length ? (
+            {!filteredData?.get("root")?.children?.length ? (
               <Empty
                 minHeight="300px"
                 image={emptyImage}
@@ -499,7 +508,7 @@ function SurveyEdit(props: SurveyEditProps) {
                   // TODO(tjennison): Make TreeGridData's type generic so we can
                   // avoid this type assertion. Also consider passing the
                   // TreeGridItem to the callback instead of the TreeGridRowData.
-                  const item = instancesState.data[id];
+                  const item = instancesState.data.get(id);
                   if (!item) {
                     return undefined;
                   }
@@ -532,7 +541,7 @@ function SurveyEdit(props: SurveyEditProps) {
                                 const question =
                                   item.parentKey &&
                                   item.type === EntityNodeItemType.Answer
-                                    ? instancesState.data?.[item.parentKey]
+                                    ? instancesState.data?.get(item.parentKey)
                                     : undefined;
                                 const name =
                                   rowData[nameAttribute(props.config)];
@@ -582,7 +591,7 @@ function SurveyEdit(props: SurveyEditProps) {
                       <GridLayout rows sx={{ height: "fit-content" }}>
                         {groupedSelection.map((s, i) => (
                           <GridLayout
-                            key={s.key}
+                            key={String(s.key)}
                             rows
                             sx={{ height: "fit-content" }}
                           >
@@ -617,7 +626,7 @@ function SurveyEdit(props: SurveyEditProps) {
                             >
                               {s.children.map((child) => (
                                 <GridLayout
-                                  key={child.key}
+                                  key={String(child.key)}
                                   cols
                                   fillCol={0}
                                   rowAlign="middle"
@@ -707,7 +716,7 @@ function SurveyInline(props: SurveyInlineProps) {
     return (
       <GridBox sx={{ pb: 1, height: "auto" }}>
         <ValueDataEdit
-          key={sel.key}
+          key={String(sel.key)}
           hintEntity={entityGroup.occurrenceEntityIds[0]}
           relatedEntity={entityGroup.selectionEntity.name}
           hintKey={sel.key}
@@ -730,7 +739,7 @@ function SurveyInline(props: SurveyInlineProps) {
   return (
     <GridLayout rows height="auto">
       {groupedSelection.map((s, i) => (
-        <GridLayout key={s.key} rows height="auto">
+        <GridLayout key={String(s.key)} rows height="auto">
           <GridBox
             sx={{
               height: "auto",
diff --git a/ui/src/data/source.tsx b/ui/src/data/source.tsx
index 84a8f7bff..2d982fb3c 100644
--- a/ui/src/data/source.tsx
+++ b/ui/src/data/source.tsx
@@ -109,9 +109,7 @@ export type AnnotationValue = {
   current: boolean;
 };
 
-export type AnnotationEntry = {
-  [x: DataKey]: AnnotationValue[];
-};
+export type AnnotationEntry = Map<DataKey, AnnotationValue[]>;
 
 export type ReviewInstance = {
   data: DataEntry;
@@ -1620,7 +1618,7 @@ export function literalFromDataValue(value: DataValue): tanagra.Literal {
   return {
     dataType,
     valueUnion: {
-      int64Val: typeof value === "number" ? value : undefined,
+      int64Val: typeof value === "bigint" ? String(value) : undefined,
       stringVal: typeof value === "string" ? value : undefined,
       boolVal: typeof value === "boolean" ? value : undefined,
       dateVal: value instanceof Date ? value.toISOString() : undefined,
@@ -1634,7 +1632,9 @@ function dataValueFromLiteral(value?: tanagra.Literal | null): DataValue {
   }
   switch (value.dataType) {
     case tanagra.DataType.Int64:
-      return value.valueUnion?.int64Val ?? null;
+      return value.valueUnion?.int64Val
+        ? BigInt(value.valueUnion?.int64Val)
+        : null;
     case tanagra.DataType.String:
       return value.valueUnion?.stringVal ?? null;
     case tanagra.DataType.Date:
@@ -1656,7 +1656,7 @@ function dataValueFromLiteral(value?: tanagra.Literal | null): DataValue {
 
 export function protoFromDataKey(key: DataKey): keyProto.Key {
   return {
-    int64Key: typeof key === "number" ? key : undefined,
+    int64Key: typeof key === "bigint" ? key : undefined,
     stringKey: typeof key === "string" ? key : undefined,
   };
 }
@@ -1675,7 +1675,7 @@ export function dataKeyFromProto(key?: keyProto.Key): DataKey {
 
 export function protoFromDataValue(value: DataValue): valueProto.Value {
   return {
-    int64Value: typeof value === "number" ? value : undefined,
+    int64Value: typeof value === "bigint" ? value : undefined,
     stringValue: typeof value === "string" ? value : undefined,
     boolValue: typeof value === "boolean" ? value : undefined,
     timestampValue: value instanceof Date ? value : undefined,
@@ -1729,7 +1729,7 @@ function processEntitiesResponse(
         } else {
           ancestors = path
             .split(".")
-            .map((id) => (typeof data.key === "number" ? +id : id));
+            .map((id) => (typeof data.key === "bigint" ? String(id) : id));
         }
       }
 
@@ -1762,15 +1762,17 @@ function makeDataEntry(
   attributes?: { [key: string]: tanagra.ValueDisplay }
 ): DataEntry {
   const data: DataEntry = {
-    key: 0,
+    key: 0n,
   };
 
   processAttributes(data, attributes);
 
   const key = dataValueFromLiteral(attributes?.[primaryKey]?.value ?? null);
-  if (typeof key !== "string" && typeof key !== "number") {
+  if (typeof key !== "string" && typeof key !== "bigint") {
     throw new Error(
-      `Key attribute "${primaryKey}" not found in entity instance ${data}`
+      `Key attribute "${primaryKey}" not found in entity instance ${JSON.stringify(
+        data
+      )}`
     );
   }
   data.key = key;
@@ -2166,10 +2168,11 @@ function fromAPIReviewInstance(
 ): ReviewInstance {
   const data = makeDataEntry(primaryKey, instance.attributes);
 
-  const annotations: AnnotationEntry = {};
+  const annotations = new Map();
   for (const key in instance.annotations) {
-    annotations[key] = instance.annotations[key].map((v) =>
-      fromAPIAnnotationValue(v)
+    annotations.set(
+      key,
+      instance.annotations[key].map((v) => fromAPIAnnotationValue(v))
     );
   }
 
diff --git a/ui/src/data/types.ts b/ui/src/data/types.ts
index 389ab81a4..c0597591f 100644
--- a/ui/src/data/types.ts
+++ b/ui/src/data/types.ts
@@ -1,8 +1,8 @@
 import * as tanagraUnderlay from "tanagra-underlay/underlayConfig";
 import { standardDateString } from "util/date";
 
-export type DataKey = string | number;
-export type DataValue = null | string | number | boolean | Date;
+export type DataKey = string | number | bigint;
+export type DataValue = null | string | number | bigint | boolean | Date;
 
 export type DataEntry = {
   key: DataKey;
@@ -53,6 +53,7 @@ export function convertAttributeStringToDataValue(
 ): DataValue {
   switch (attribute.dataType) {
     case tanagraUnderlay.SZDataType.INT64:
+      return BigInt(value);
     case tanagraUnderlay.SZDataType.DOUBLE:
       return Number(value);
     case tanagraUnderlay.SZDataType.BOOLEAN:
diff --git a/ui/src/export.tsx b/ui/src/export.tsx
index 4a65cc5ef..213c204d3 100644
--- a/ui/src/export.tsx
+++ b/ui/src/export.tsx
@@ -496,13 +496,13 @@ function PreviewTable(props: PreviewTableProps) {
             props.featureSets
           );
 
-          const data: TreeGridData = {
-            root: { data: {}, children: [] },
-          };
+          const data: TreeGridData = new Map([
+            ["root", { data: {}, children: [] }],
+          ]);
 
           res.data.forEach((entry, i) => {
-            data[i] = { data: entry };
-            data.root?.children?.push(i);
+            data.set(i, { data: entry });
+            data.get("root")?.children?.push(i);
           });
 
           return {
@@ -572,7 +572,8 @@ function PreviewTable(props: PreviewTableProps) {
                   </Typography>
                 </GridBox>
               ) : tabDataState.data?.[tab]?.data ? (
-                tabDataState.data?.[tab]?.data?.root?.children?.length ? (
+                tabDataState.data?.[tab]?.data?.get("root")?.children
+                  ?.length ? (
                   <TreeGrid
                     data={tabDataState.data?.[tab]?.data}
                     columns={props.occurrenceFilters[tab]?.attributes.map(
diff --git a/ui/src/fakeApis.ts b/ui/src/fakeApis.ts
index dcd6ec7d0..0f9b52fc6 100644
--- a/ui/src/fakeApis.ts
+++ b/ui/src/fakeApis.ts
@@ -129,7 +129,7 @@ export class FakeUnderlaysApi {
               value: {
                 dataType: tanagra.DataType.Int64,
                 valueUnion: {
-                  int64Val: 1234,
+                  int64Val: "1234",
                 },
               },
             },
@@ -163,7 +163,7 @@ export class FakeUnderlaysApi {
                     value: {
                       dataType: tanagra.DataType.Int64,
                       valueUnion: {
-                        int64Val: 8515,
+                        int64Val: "8515",
                       },
                     },
                   },
@@ -175,7 +175,7 @@ export class FakeUnderlaysApi {
                     value: {
                       dataType: tanagra.DataType.Int64,
                       valueUnion: {
-                        int64Val: 8516,
+                        int64Val: "8516",
                       },
                     },
                   },
diff --git a/ui/src/featureSet/addFeatureSet.tsx b/ui/src/featureSet/addFeatureSet.tsx
index f02cd988d..518831629 100644
--- a/ui/src/featureSet/addFeatureSet.tsx
+++ b/ui/src/featureSet/addFeatureSet.tsx
@@ -122,7 +122,7 @@ export function AddFeatureSet() {
                   return undefined;
                 }
 
-                const featureSetData = data[id].data as FeatureSetData;
+                const featureSetData = data.get(id)?.data as FeatureSetData;
                 if (!featureSetData) {
                   return undefined;
                 }
diff --git a/ui/src/featureSet/featureSet.tsx b/ui/src/featureSet/featureSet.tsx
index 8486e6719..dd282dee0 100644
--- a/ui/src/featureSet/featureSet.tsx
+++ b/ui/src/featureSet/featureSet.tsx
@@ -340,13 +340,13 @@ function Preview() {
             true
           );
 
-          const data: TreeGridData = {
-            root: { data: {}, children: [] },
-          };
+          const data: TreeGridData = new Map([
+            ["root", { data: {}, children: [] }],
+          ]);
 
           res.data.forEach((entry, i) => {
-            data[i] = { data: entry };
-            data.root?.children?.push(i);
+            data.set(i, { data: entry });
+            data.get("root")?.children?.push(i);
           });
 
           return {
@@ -371,7 +371,7 @@ function Preview() {
                 id: data.name,
                 title: data.name,
                 render: () =>
-                  data.data.root?.children?.length ? (
+                  data.data.get("root")?.children?.length ? (
                     previewOccurrences[i] ? (
                       <PreviewTable
                         occurrence={previewOccurrences[i]}
diff --git a/ui/src/sampleApp/studiesList.tsx b/ui/src/sampleApp/studiesList.tsx
index b3feecd81..1f30e369a 100644
--- a/ui/src/sampleApp/studiesList.tsx
+++ b/ui/src/sampleApp/studiesList.tsx
@@ -78,9 +78,7 @@ export function StudiesList() {
 
   const data = useMemo(() => {
     const children: DataKey[] = [];
-    const data: TreeGridData = {
-      root: { data: {}, children },
-    };
+    const data: TreeGridData = new Map([["root", { data: {}, children }]]);
 
     studiesState.data?.forEach((study) => {
       const key = study.id;
@@ -122,7 +120,7 @@ export function StudiesList() {
           ),
         },
       };
-      data[key] = item;
+      data.set(key, item);
     });
 
     return data;
@@ -136,7 +134,7 @@ export function StudiesList() {
       <Header />
       <Loading status={studiesState}>
         <GridLayout rows spacing={4}>
-          {!!data?.root?.children?.length ? (
+          {!!data?.get("root")?.children?.length ? (
             <TreeGrid columns={columns} data={data} />
           ) : (
             <Empty
diff --git a/ui/src/sampleApp/studyOverview.tsx b/ui/src/sampleApp/studyOverview.tsx
index edf5e3245..62273fa5f 100644
--- a/ui/src/sampleApp/studyOverview.tsx
+++ b/ui/src/sampleApp/studyOverview.tsx
@@ -110,9 +110,7 @@ export function StudyOverview() {
 
   const data = useMemo(() => {
     const children: DataKey[] = [];
-    const data: TreeGridData = {
-      root: { data: {}, children },
-    };
+    const data: TreeGridData = new Map([["root", { data: {}, children }]]);
 
     artifactsState.data?.forEach((artifact) => {
       const key = `${artifact.type}~${artifact.id}`;
@@ -144,7 +142,7 @@ export function StudyOverview() {
           ),
         },
       };
-      data[key] = item;
+      data.set(key, item);
     });
 
     return data;
@@ -202,7 +200,7 @@ export function StudyOverview() {
           </GridLayout>
         </GridBox>
         <Loading status={artifactsState}>
-          {!!data?.root?.children?.length ? (
+          {!!data?.get("root")?.children?.length ? (
             <TreeGrid
               columns={columns}
               data={data}
diff --git a/ui/src/viz/viz.ts b/ui/src/viz/viz.ts
index 5fb0932e9..0e8f86dc2 100644
--- a/ui/src/viz/viz.ts
+++ b/ui/src/viz/viz.ts
@@ -62,11 +62,20 @@ export function processFilterCountValues(
         if (!isValid(value)) {
           value = "Unknown";
         }
+        if (typeof value === "bigint") {
+          value = Number(value);
+        }
 
         let name: string | undefined = undefined;
         let numericId: number | undefined = undefined;
         let stringId: string | undefined = undefined;
         if (a.numericBucketing) {
+          if (typeof value !== "number") {
+            throw new Error(
+              `Numeric bucketing cannot be applied to non-numeric ${value}.`
+            );
+          }
+
           const thresholds = a.numericBucketing.thresholds ?? [];
           if (!thresholds.length) {
             const intervals = a.numericBucketing.intervals;
@@ -76,7 +85,7 @@ export function processFilterCountValues(
               );
             }
 
-            for (let i = 0; i < intervals.count + 1; i++) {
+            for (let i = 0; i < intervals.count + 1n; i++) {
               thresholds.push(
                 intervals.min + i * (intervals.max - intervals.min)
               );
@@ -192,7 +201,7 @@ export function processFilterCountValues(
 
   const limit = vizSource.attributes[0].limit;
   if (limit) {
-    let count = 0;
+    let count = 0n;
     for (let i = 1; i < arr.length; i++) {
       const ka = arr[i].keys[0];
       const kb = arr[i - 1].keys[0];