More typing

chainforge/react-server/src/AlertModal.tsx

@@ -8,36 +8,38 @@ const ALERT_MODAL_STYLE = {
   root: { position: "relative", left: "-5%" },
 } as Styles<ModalBaseStylesNames>;
 
-interface AlertModalHandles {
+export interface AlertModalHandles {
   trigger: (msg?: string) => void;
 }
 
-const AlertModal = forwardRef<AlertModalHandles>(function AlertModal(props, ref) {
-  // Mantine modal popover for alerts
-  const [opened, { open, close }] = useDisclosure(false);
-  const [alertMsg, setAlertMsg] = useState("");
+const AlertModal = forwardRef<AlertModalHandles>(
+  function AlertModal(props, ref) {
+    // Mantine modal popover for alerts
+    const [opened, { open, close }] = useDisclosure(false);
+    const [alertMsg, setAlertMsg] = useState("");
 
-  // This gives the parent access to triggering the modal alert
-  const trigger = (msg?: string) => {
-    if (!msg) msg = "Unknown error.";
-    console.error(msg);
-    setAlertMsg(msg);
-    open();
-  };
-  useImperativeHandle(ref, () => ({
-    trigger,
-  }));
+    // This gives the parent access to triggering the modal alert
+    const trigger = (msg?: string) => {
+      if (!msg) msg = "Unknown error.";
+      console.error(msg);
+      setAlertMsg(msg);
+      open();
+    };
+    useImperativeHandle(ref, () => ({
+      trigger,
+    }));
 
-  return (
-    <Modal
-      opened={opened}
-      onClose={close}
-      title="Error"
-      styles={ALERT_MODAL_STYLE}
-    >
-      <p style={{ whiteSpace: "pre-line" }}>{alertMsg}</p>
-    </Modal>
-  );
-});
+    return (
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Error"
+        styles={ALERT_MODAL_STYLE}
+      >
+        <p style={{ whiteSpace: "pre-line" }}>{alertMsg}</p>
+      </Modal>
+    );
+  },
+);
 
 export default AlertModal;

chainforge/react-server/src/BaseNode.tsx

@@ -11,8 +11,8 @@ import useStore from "./store";
 
 interface BaseNodeProps {
   children: React.ReactNode; // For components, HTML elements, text, etc.
-  classNames: string;
   nodeId: string;
+  classNames?: string;
   style?: React.CSSProperties; // Optional prop for inline styles
 }
 

chainforge/react-server/src/NodeLabelComponent.tsx

@@ -5,16 +5,32 @@ import React, {
   useEffect,
   useCallback,
 } from "react";
-import useStore from "./store";
+import { Tooltip } from "@mantine/core";
 import { EditText } from "react-edit-text";
 import "react-edit-text/dist/index.css";
-import StatusIndicator from "./StatusIndicatorComponent";
-import AlertModal from "./AlertModal";
+import useStore from "./store";
+import StatusIndicator, { Status } from "./StatusIndicatorComponent";
+import AlertModal, { AlertModalHandles } from "./AlertModal";
 import AreYouSureModal from "./AreYouSureModal";
 
-import { Tooltip } from "@mantine/core";
+interface NodeLabelProps {
+  title: string;
+  nodeId: string;
+  icon: string;
+  onEdit?: () => void;
+  onSave?: () => void;
+  editable?: boolean;
+  status?: Status;
+  isRunning?: boolean;
+  alertModal?: React.Ref<AlertModalHandles>;
+  customButtons?: React.ReactElement[];
+  handleRunClick?: () => void;
+  handleStopClick?: (nodeId: string) => void;
+  handleRunHover?: () => void;
+  runButtonTooltip?: string;
+}
 
-export default function NodeLabel({
+export const NodeLabel: React.FC<NodeLabelProps> = ({
   title,
   nodeId,
   icon,
@@ -29,10 +45,10 @@ export default function NodeLabel({
   handleStopClick,
   handleRunHover,
   runButtonTooltip,
-}) {
+}) => {
   const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
-  const [statusIndicator, setStatusIndicator] = useState("none");
-  const [runButton, setRunButton] = useState("none");
+  const [statusIndicator, setStatusIndicator] = useState(<></>);
+  const [runButton, setRunButton] = useState(<></>);
   const removeNode = useStore((state) => state.removeNode);
 
   // For 'delete node' confirmation popup
@@ -40,6 +56,7 @@ export default function NodeLabel({
   const [deleteConfirmProps, setDeleteConfirmProps] = useState({
     title: "Delete node",
     message: "Are you sure?",
+    onConfirm: undefined,
   });
   const stopButton = useMemo(
     () => (
@@ -153,8 +170,9 @@ export default function NodeLabel({
           </button>
           <br />
         </div>
-        {/* <button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button> */}
       </div>
     </>
   );
-}
+};
+
+export default NodeLabel;

chainforge/react-server/src/ResponseBoxes.tsx

@@ -7,7 +7,6 @@ import {
   StandardizedLLMResponse,
   TypedDict,
 } from "./backend/typing";
-import { getLabelForResponse } from "./ResponseRatingToolbar";
 
 // Lazy load the response toolbars
 const ResponseRatingToolbar = lazy(() => import("./ResponseRatingToolbar.js"));

chainforge/react-server/src/StatusIndicatorComponent.tsx

@@ -1,8 +1,20 @@
 import React from "react";
 
-export default function StatusIndicator({ status }) {
+export enum Status {
+  WARNING = "warning",
+  READY = "ready",
+  ERROR = "error",
+  LOADING = "loading",
+}
+interface StatusIndicatorProps {
+  status: Status;
+}
+
+export default function StatusIndicator({
+  status,
+}: StatusIndicatorProps): React.ReactElement {
   switch (status) {
-    case "warning": // Display mustard 'warning' icon
+    case Status.WARNING: // Display mustard 'warning' icon
       return (
         <div className="status-icon warning-status">
           &#9888;
@@ -12,21 +24,21 @@ export default function StatusIndicator({ status }) {
           </span>
         </div>
       );
-    case "ready": // Display green checkmark 'ready' icon
+    case Status.READY: // Display green checkmark 'ready' icon
       return (
         <div className="status-icon ready-status">
           &#10004;
           <span className="status-tooltip">Responses collected and ready.</span>
         </div>
       );
-    case "error": // Display red 'error' icon
+    case Status.ERROR: // Display red 'error' icon
       return (
         <div className="status-icon error-status">
           &#10006;
           <span className="status-tooltip">Error collecting responses.</span>
         </div>
       );
-    case "loading": // Display animated 'loading' spinner icon
+    case Status.LOADING: // Display animated 'loading' spinner icon
       return (
         <div className="lds-ring">
           <div></div>
@@ -36,6 +48,6 @@ export default function StatusIndicator({ status }) {
         </div>
       );
     default:
-      return [];
+      return <></>;
   }
 }

chainforge/react-server/src/backend/backend.ts

@@ -1285,7 +1285,8 @@ export async function evalWithLLM(
   for (const resp_obj of all_evald_responses) {
     if (!resp_obj.eval_res) continue;
     for (const score of resp_obj.eval_res.items) {
-      if (score !== undefined) all_eval_res.add(score.toString().trim().toLowerCase());
+      if (score !== undefined)
+        all_eval_res.add(score.toString().trim().toLowerCase());
     }
   }
 

chainforge/react-server/src/backend/query.ts

@@ -169,7 +169,11 @@ export class PromptPipeline {
     llm_params?: Dict,
     chat_histories?: ChatHistoryInfo[],
     should_cancel?: () => boolean,
-  ): AsyncGenerator<RawLLMResponseObject | LLMResponseError, boolean, undefined> {
+  ): AsyncGenerator<
+    RawLLMResponseObject | LLMResponseError,
+    boolean,
+    undefined
+  > {
     // Load any cache'd responses
     const responses = this._load_cached_responses();
 
@@ -323,7 +327,7 @@ export class PromptPipeline {
     [key: string]: RawLLMResponseObject | RawLLMResponseObject[];
   } {
     if (this._storageKey === undefined) return {};
-    const data: Record<string, LLMResponseObject | LLMResponseObject[]> =
+    const data: Record<string, RawLLMResponseObject | RawLLMResponseObject[]> =
       StorageCache.get(this._storageKey) ?? {};
 
     // Before retuning, verify data integrity: check that uids are present for all responses.

chainforge/react-server/src/backend/typing.ts

@@ -33,7 +33,7 @@ export interface TemplateVarInfo {
 }
 
 export interface PromptVarType {
-  [key: string]: Array<string | TemplateVarInfo>
+  [key: string]: Array<string | TemplateVarInfo>;
 }
 
 /** OpenAI chat message format */
@@ -129,8 +129,17 @@ export interface RawLLMResponseObject extends BaseLLMResponseObject {
 }
 
 export type EvaluationResults = {
-  items: (boolean | number | string)[],
-  dtype: "KeyValue" | "KeyValue_Numeric" | "KeyValue_Categorical" | "KeyValue_Mixed" | "Numeric" | "Categorical" | "Mixed" | "Unknown" | "Empty",
+  items: (boolean | number | string)[];
+  dtype:
+    | "KeyValue"
+    | "KeyValue_Numeric"
+    | "KeyValue_Categorical"
+    | "KeyValue_Mixed"
+    | "Numeric"
+    | "Categorical"
+    | "Mixed"
+    | "Unknown"
+    | "Empty";
 };
 
 /** A standard response format expected by the front-end. */
@@ -155,13 +164,13 @@ export interface LLMAPICall {
 
 /** What LLM to call, at what settings. */
 export type LLMSpec = {
-  name: string,
-  emoji: string,
-  base_model: string,
-  model: string,
-  temp: number,
-  key?: string,
-  formData?: Dict,
-  settings?: Dict,
-  progress?: TypedDict<number>, // only used for front-end to display progress collecting responses for this LLM
+  name: string;
+  emoji: string;
+  base_model: string;
+  model: string;
+  temp: number;
+  key?: string;
+  formData?: Dict;
+  settings?: Dict;
+  progress?: TypedDict<number>; // only used for front-end to display progress collecting responses for this LLM
 };

chainforge/react-server/src/store.tsx

@@ -1,5 +1,14 @@
 import { create } from "zustand";
-import { addEdge, applyNodeChanges, applyEdgeChanges, Edge, Node, NodeChange, EdgeChange, Connection, MarkerType } from "reactflow";
+import {
+  addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
+  Edge,
+  Node,
+  NodeChange,
+  EdgeChange,
+  MarkerType,
+} from "reactflow";
 import { escapeBraces } from "./backend/template";
 import {
   deepcopy,
@@ -213,60 +222,75 @@ export const initLLMProviders = initLLMProviderMenu
 
 interface StoreHandles {
   // Nodes and edges
-  nodes: Node[],
-  edges: Edge[],
+  nodes: Node[];
+  edges: Edge[];
 
   // Helper functions for nodes and edges
-  getNode: (id: string) => Node,
-  addNode: (newnode: Node) => void,
-  removeNode: (id: string) => void,
-  deselectAllNodes: () => void,
-  bringNodeToFront: (id: string) => void,
-  duplicateNode: (id: string, offset: undefined | {x?: number, y?: number}) => Node,
-  setNodes: (newnodes: Node[]) => void,
-  setEdges: (newedges: Edge[]) => void,
-  removeEdge: (id: string) => void,
-  onNodesChange: (changes: NodeChange[]) => void,
-  onEdgesChange: (changes: EdgeChange[]) => void,
-  onConnect: (connection: Edge) => void,
+  getNode: (id: string) => Node;
+  addNode: (newnode: Node) => void;
+  removeNode: (id: string) => void;
+  deselectAllNodes: () => void;
+  bringNodeToFront: (id: string) => void;
+  duplicateNode: (
+    id: string,
+    offset: undefined | { x?: number; y?: number },
+  ) => Node;
+  setNodes: (newnodes: Node[]) => void;
+  setEdges: (newedges: Edge[]) => void;
+  removeEdge: (id: string) => void;
+  onNodesChange: (changes: NodeChange[]) => void;
+  onEdgesChange: (changes: EdgeChange[]) => void;
+  onConnect: (connection: Edge) => void;
 
   // The LLM providers available in the drop-down list
-  AvailableLLMs: LLMSpec[],
-  setAvailableLLMs: (specs: LLMSpec[]) => void
+  AvailableLLMs: LLMSpec[];
+  setAvailableLLMs: (specs: LLMSpec[]) => void;
 
   // API keys to LLM providers
-  apiKeys: TypedDict<string>,
-  setAPIKeys: (apiKeys: TypedDict<string>) => void,
+  apiKeys: TypedDict<string>;
+  setAPIKeys: (apiKeys: TypedDict<string>) => void;
 
   // Provider for genAI features
   aiFeaturesProvider: string,
   setAIFeaturesProvider: (llmProvider: string) => void;
 
   // Global flags
-  flags: TypedDict<boolean | string>,
-  getFlag: (flag: string) => (boolean | string),
-  setFlag: (flag: string, val: boolean | string) => void,
+  flags: TypedDict<boolean | string>;
+  getFlag: (flag: string) => boolean | string;
+  setFlag: (flag: string, val: boolean | string) => void;
 
   // The color to represent a specific LLM, to be globally consistent
-  llmColors: TypedDict<string>,
-  getColorForLLM: (llm_name: string) => string | undefined,
-  getColorForLLMAndSetIfNotFound: (llm_name: string) => string,
-  genUniqueLLMColor: () => string,
-  setColorForLLM: (llm_name: string, color: string) => void,
-  resetLLMColors: () => void,
+  llmColors: TypedDict<string>;
+  getColorForLLM: (llm_name: string) => string | undefined;
+  getColorForLLMAndSetIfNotFound: (llm_name: string) => string;
+  genUniqueLLMColor: () => string;
+  setColorForLLM: (llm_name: string, color: string) => void;
+  resetLLMColors: () => void;
 
   // Getting inputs and outputs of nodes
-  inputEdgesForNode: (sourceNodeId: string) => Edge[],
-  outputEdgesForNode: (sourceNodeId: string) => Edge[],
-  pingOutputNodes: (sourceNodeId: string) => void,
-  getImmediateInputNodeTypes: (targetHandles: string[], node_id: string) => string[],
+  inputEdgesForNode: (sourceNodeId: string) => Edge[];
+  outputEdgesForNode: (sourceNodeId: string) => Edge[];
+  pingOutputNodes: (sourceNodeId: string) => void;
+  getImmediateInputNodeTypes: (
+    targetHandles: string[],
+    node_id: string,
+  ) => string[];
 
   // Set data for a specific node
-  setDataPropsForNode: (id: string, data_props: TypedDict<string | boolean | number | Dict>) => void,
+  setDataPropsForNode: (
+    id: string,
+    data_props: TypedDict<string | boolean | number | Dict>,
+  ) => void;
 
   // Rasterize data output from nodes ("pull" the data out)
-  output: (sourceNodeId: string, sourceHandleKey: string) => (string | TemplateVarInfo)[] | null,
-  pullInputData: (_targetHandles: string[], node_id: string) => TypedDict<string[] | TemplateVarInfo[]>,
+  output: (
+    sourceNodeId: string,
+    sourceHandleKey: string,
+  ) => (string | TemplateVarInfo)[] | null;
+  pullInputData: (
+    _targetHandles: string[],
+    node_id: string,
+  ) => TypedDict<string[] | TemplateVarInfo[]>;
 }
 
 // A global store of variables, used for maintaining state