fix: update typings for new eslint config

recap-utr · Nov 6, 2024 · b50e76d · b50e76d
1 parent eff052c
commit b50e76d
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 52 deletions.
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
@@ -272,7 +272,7 @@ export default function Graph() {
         const node = draft.nodes.find((node) => node.id === nodeId);
 
         if (node !== undefined) {
-          node.data.userdata.clickConnect = true;
+          (node.data.userdata as model.Userdata).clickConnect = true;
         }
       }),
     );
@@ -282,8 +282,11 @@ export default function Graph() {
     setState(
       produce((draft: State) => {
         draft.nodes
-          .filter((node) => node.data.userdata.clickConnect)
-          .forEach((node) => delete node.data.userdata.clickConnect);
+          .filter((node) => (node.data.userdata as model.Userdata).clickConnect)
+          .forEach(
+            (node) =>
+              delete (node.data.userdata as model.Userdata).clickConnect,
+          );
       }),
     );
   }, []);

diff --git a/src/components/NodeTypes.tsx b/src/components/NodeTypes.tsx
@@ -47,8 +47,11 @@ const NodeComponent: React.FC<NodeComponentProps> = ({
 }) => {
   const theme = useTheme();
   const background = useMemo(
-    () => (node.data.userdata.clickConnect ? color.orange[500] : bg),
-    [node.data.userdata.clickConnect, bg],
+    () =>
+      (node.data.userdata as model.Userdata).clickConnect
+        ? color.orange[500]
+        : bg,
+    [(node.data.userdata as model.Userdata).clickConnect, bg],
   );
   const borderColor = useMemo(
     () => (node.selected ? theme.palette.text.primary : background),

diff --git a/src/components/inspector/AtomFields.tsx b/src/components/inspector/AtomFields.tsx
@@ -18,6 +18,7 @@ export const AtomFields: React.FC<Props> = ({ idx = 0, children }) => {
     (state) => state.nodes[selectedIndex] as model.AtomNode,
     dequal,
   );
+  const userdata = element.data.userdata as model.Userdata;
   const majorClaim = useStore((state) => state.graph.majorClaim);
 
   return (
@@ -60,26 +61,26 @@ export const AtomFields: React.FC<Props> = ({ idx = 0, children }) => {
           );
         }}
       />
-      {element.data.userdata.assistant && (
+      {userdata.assistant && (
         <TextField
           fullWidth
           multiline
           label="Assistant Explanation"
           InputProps={{
             readOnly: true,
           }}
-          value={element.data.userdata.assistant.explanation ?? ""}
+          value={userdata.assistant.explanation ?? ""}
         />
       )}
-      {element.data.userdata.assistant?.mcExplanation && (
+      {userdata.assistant?.mcExplanation && (
         <TextField
           fullWidth
           multiline
           label="Assistant Major Claim Explanation"
           InputProps={{
             readOnly: true,
           }}
-          value={element.data.userdata.assistant.mcExplanation}
+          value={userdata.assistant.mcExplanation}
         />
       )}
       <Button
@@ -101,12 +102,12 @@ export const AtomFields: React.FC<Props> = ({ idx = 0, children }) => {
         multiline
         minRows={1}
         label="Notes"
-        value={element.data.userdata.notes ?? ""}
+        value={userdata.notes ?? ""}
         onChange={(event) => {
           setState(
             produce((draft: State) => {
               const node = draft.nodes[selectedIndex];
-              node.data.userdata.notes = event.target.value;
+              (node.data.userdata as model.Userdata).notes = event.target.value;
             }),
           );
         }}

diff --git a/src/components/inspector/EdgeFields.tsx b/src/components/inspector/EdgeFields.tsx
@@ -24,7 +24,7 @@ export const EdgeFields: React.FC<Props> = ({ idx = 0, children }) => {
         multiline
         minRows={1}
         label="Notes"
-        value={element.data?.userdata?.notes ?? ""}
+        value={(element.data?.userdata as model.Userdata).notes ?? ""}
         onChange={(event) => {
           setState(
             produce((draft: State) => {
@@ -34,7 +34,7 @@ export const EdgeFields: React.FC<Props> = ({ idx = 0, children }) => {
                 throw new Error("Edge data is undefined");
               }
 
-              edge.data.userdata.notes = event.target.value;
+              (edge.data.userdata as model.Userdata).notes = event.target.value;
             }),
           );
         }}

diff --git a/src/components/inspector/GraphFields.tsx b/src/components/inspector/GraphFields.tsx
@@ -68,7 +68,9 @@ export const GraphFields: React.FC<Props> = () => {
   const participants = useStore((state) => state.graph.participants);
   const analyst = useStore((state) => state.analyst);
   const assistantConfig = useStore((state) => state.assistantConfig);
-  const notes: string = useStore((state) => state.graph.userdata.notes);
+  const notes: string | undefined = useStore(
+    (state) => (state.graph.userdata as model.Userdata).notes,
+  );
   const [assistantKey, setAssistantKey] = useSessionStorage<string>(
     "assistantKey",
     "",
@@ -557,7 +559,8 @@ export const GraphFields: React.FC<Props> = () => {
           onChange={(event) => {
             setState(
               produce((draft: State) => {
-                draft.graph.userdata.notes = event.target.value;
+                (draft.graph.userdata as model.Userdata).notes =
+                  event.target.value;
               }),
             );
           }}

diff --git a/src/components/inspector/SchemeFields.tsx b/src/components/inspector/SchemeFields.tsx
@@ -20,9 +20,7 @@ enum SchemeType {
   PREFERENCE = "preference",
 }
 
-const defaultSchemes: {
-  [key in SchemeType]: arguebuf.Scheme;
-} = {
+const defaultSchemes: Record<SchemeType, arguebuf.Scheme> = {
   support: { case: "support", value: arguebuf.Support.DEFAULT },
   attack: { case: "attack", value: arguebuf.Attack.DEFAULT },
   rephrase: { case: "rephrase", value: arguebuf.Rephrase.DEFAULT },
@@ -120,12 +118,12 @@ const SchemeFields: React.FC<Props> = ({ idx = 0 }) => {
         multiline
         minRows={1}
         label="Notes"
-        value={element.data.userdata.notes ?? ""}
+        value={(element.data.userdata as model.Userdata).notes ?? ""}
         onChange={(event) => {
           setState(
             produce((draft: State) => {
               const node = draft.nodes[selectedIndex];
-              node.data.userdata.notes = event.target.value;
+              (node.data.userdata as model.Userdata).notes = event.target.value;
             }),
           );
         }}

diff --git a/src/model.ts b/src/model.ts
@@ -10,6 +10,20 @@ export type AtomNode = FlowNode<AtomNodeData>;
 export type SchemeNode = FlowNode<SchemeNodeData>;
 export type Graph = Omit<arguebuf.Graph, "nodes" | "edges">;
 
+export interface Userdata {
+  notes?: string;
+  clickConnect?: boolean;
+  arguemapper: {
+    position: XYPosition;
+  };
+  assistant?: {
+    explanation?: string;
+    mcExplanation?: string;
+    config?: unknown;
+    mcConfig?: unknown;
+  };
+}
+
 export type Element = Node | Edge;
 export type OptionalElement = Element | undefined;
 export type Elements = Element[] | OptionalElement;
@@ -42,8 +56,9 @@ export function initWrapper({
 function nodeToArguebuf(obj: Node): arguebuf.Node {
   // immer freezes the object, so we need to clone it
   const node = structuredClone(obj.data) as arguebuf.Node;
-  node.userdata.arguemapper = node.userdata.arguemapper || {};
-  node.userdata.arguemapper.position = obj.position;
+  const userdata = node.userdata as Userdata;
+  userdata.arguemapper = userdata.arguemapper ?? {};
+  userdata.arguemapper.position = obj.position;
 
   return node;
 }
@@ -73,8 +88,11 @@ export function fromArguebuf(obj: arguebuf.Graph): Wrapper {
           id,
           data: node,
           type: node.type,
-          position: node.userdata.arguemapper?.position ?? { x: 0, y: 0 },
-        }) as Node,
+          position: (node.userdata as Userdata).arguemapper?.position ?? {
+            x: 0,
+            y: 0,
+          },
+        } as Node),
     ),
     edges: Object.entries(obj.edges).map(
       ([id, edge]) =>
@@ -83,7 +101,7 @@ export function fromArguebuf(obj: arguebuf.Graph): Wrapper {
           data: edge,
           source: edge.source,
           target: edge.target,
-        }) as Edge,
+        } as Edge),
     ),
     graph: arguebuf.copy(obj, { nodes: [], edges: [] }),
   };
@@ -136,7 +154,7 @@ export const selectionType = (
 };
 
 export const initSelection = () =>
-  ({ nodes: [], edges: [], type: "graph" }) as Selection;
+  ({ nodes: [], edges: [], type: "graph" } as Selection);
 
 export interface InitNodeProps<T> {
   id?: string;

diff --git a/src/services/assistant.ts b/src/services/assistant.ts
@@ -7,10 +7,6 @@ import * as model from "../model";
 import { getSessionStorage } from "../storage";
 import { AssistantConfig, State, getState, setState } from "../store";
 
-export type Mapping<U> = {
-  [key in string]: U;
-};
-
 const ExtractedAdu = z.object({
   text: z.string().describe("The text of the ADU"),
   explanation: z
@@ -73,9 +69,7 @@ enum SchemeType {
   ATTACK = "attack",
 }
 
-const schemeLookup: {
-  [key in SchemeType]: arguebuf.Scheme;
-} = {
+const schemeLookup: Record<SchemeType, arguebuf.Scheme> = {
   support: { case: "support", value: arguebuf.Support.DEFAULT },
   attack: { case: "attack", value: arguebuf.Attack.DEFAULT },
 };
@@ -188,12 +182,22 @@ ${customPrompt}
 
   setState(
     produce((draft: State) => {
+      const mcNode = draft.nodes.find((node) => node.data.id === mc.id);
+
+      if (mcNode === undefined) {
+        throw new Error("Major claim node not found in nodes.");
+      }
+
       draft.graph.majorClaim = mc.id;
-      const mcUserdata = draft.nodes.find((node) => node.data.id === mc.id)
-        ?.data.userdata;
-      mcUserdata.assistant = mcUserdata.assistant || {};
-      mcUserdata.assistant.mcConfig = openaiConfig;
-      mcUserdata.assistant.mcExplanation = mc.explanation;
+      const userdata = mcNode.data.userdata as model.Userdata;
+
+      userdata.assistant = {
+        ...(userdata.assistant ?? {}),
+        ...{
+          mcConfig: openaiConfig,
+          mcExplanation: mc.explanation,
+        },
+      };
     }),
   );
 }
@@ -407,10 +411,15 @@ ${customPrompt}
         // now check if the major claim is part of the graph
         if (mcNode !== undefined) {
           draft.graph.majorClaim = mcNode.data.id;
-          const mcUserdata = mcNode.data.userdata;
-          mcUserdata.assistant = mcUserdata.assistant || {};
-          mcUserdata.assistant.mcConfig = openaiConfig;
-          mcUserdata.assistant.mcExplanation = mc.explanation;
+          const mcUserdata = mcNode.data.userdata as model.Userdata;
+
+          mcUserdata.assistant = {
+            ...(mcUserdata.assistant ?? {}),
+            ...{
+              mcConfig: openaiConfig,
+              mcExplanation: mc.explanation,
+            },
+          };
         }
       }
     }),

diff --git a/src/services/convert.ts b/src/services/convert.ts
@@ -1,4 +1,4 @@
-import type { JsonObject } from "arguebuf";
+import { JsonObject } from "@bufbuild/protobuf";
 import * as arguebuf from "arguebuf";
 import { toJpeg, toPng } from "html-to-image";
 import { Options as ImgOptions } from "html-to-image/lib/types.js";
@@ -28,7 +28,7 @@ export function exportGraph(
     graph.addAnalyst(currentAnalyst);
   }
 
-  return arguebuf.dump.json(graph, format);
+  return arguebuf.dump.json(graph, format) as JsonObject;
 }
 
 export function generateFilename() {
@@ -93,12 +93,10 @@ export enum ImgFormat {
   JPG = "jpg",
 }
 
-const imgFormatMap: {
-  [key in ImgFormat]: (
-    elem: HTMLElement,
-    options?: ImgOptions,
-  ) => Promise<string>;
-} = {
+const imgFormatMap: Record<
+  ImgFormat,
+  (elem: HTMLElement, options?: ImgOptions) => Promise<string>
+> = {
   png: toPng,
   jpg: toJpeg,
 };

diff --git a/src/services/layout.ts b/src/services/layout.ts
@@ -10,7 +10,7 @@ const commonOptions: LayoutOptions = {
   "elk.spacing.nodeNode": "50",
 };
 
-const layoutOptions: { [key in model.LayoutAlgorithm]: LayoutOptions } = {
+const layoutOptions: Record<model.LayoutAlgorithm, LayoutOptions> = {
   layered: {
     ...commonOptions,
     algorithm: "layered",

diff --git a/src/store.ts b/src/store.ts
@@ -1,3 +1,4 @@
+import { JsonObject } from "@bufbuild/protobuf";
 import * as arguebuf from "arguebuf";
 import { dequal } from "dequal";
 import { throttle } from "lodash";
@@ -62,7 +63,7 @@ interface SerializedState {
   analyst: arguebuf.AnalystInterface;
   edgeStyle: model.EdgeStyle;
   firstVisit: boolean;
-  graph: Record<string, unknown>;
+  graph: JsonObject;
   nodes: undefined;
   edges: undefined;
   imageScale: number;