From 44d073ade8c982da850b4f8f04a2779ff1bd2006 Mon Sep 17 00:00:00 2001
From: alokrajiv <mail@alokrajiv.com>
Date: Thu, 4 Jul 2024 01:30:14 +0800
Subject: [PATCH 1/3] Stop ScaleWorkers dialog overwriting user input on
 worker-state update

---
 src/components/dashboard/scaleWorkers.tsx   | 23 +++++++++++++++------
 src/rakis-core/synthient-chain/llm/types.ts |  2 ++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/scaleWorkers.tsx b/src/components/dashboard/scaleWorkers.tsx
index 7c54e10..f7c067c 100644
--- a/src/components/dashboard/scaleWorkers.tsx
+++ b/src/components/dashboard/scaleWorkers.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   availableModels,
   LLMModelName,
+  AvailableModel,
 } from "../../rakis-core/synthient-chain/llm/types";
 import {
   Button as RadixButton,
@@ -27,19 +28,29 @@ export default function ScaleWorkers({
   workerCount,
   scaleLLMWorkers,
 }: {
-  workerCount: { [modelName: string]: number };
-  scaleLLMWorkers: (modelName: LLMModelName, workerCount: number) => void;
+  workerCount: Record<AvailableModel, number>;
+  scaleLLMWorkers: (modelName: AvailableModel, workerCount: number) => void;
 }) {
   const [open, setOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [selectedModel, setSelectedModel] = useState<LLMModelName | "">(
+  const [selectedModel, setSelectedModel] = useState<AvailableModel | "">(
     "gemma-2b-it-q4f16_1"
   );
   const [scaleCount, setScaleCount] = useState("");
 
+  const workerCountRef = useRef(workerCount);
+
+  useEffect(() => {
+    workerCountRef.current = workerCount;
+  }, [workerCount]);
+
   useEffect(() => {
-    setScaleCount(`${(selectedModel && workerCount[selectedModel] + 1) || 1}`);
-  }, [selectedModel, workerCount]);
+    if (selectedModel) {
+      setScaleCount(`${(workerCountRef.current[selectedModel] ?? 0) + 1}`);
+    } else {
+      setScaleCount("1");
+    }
+  }, [selectedModel]);
 
   function checkScaleWorkers() {
     if (
diff --git a/src/rakis-core/synthient-chain/llm/types.ts b/src/rakis-core/synthient-chain/llm/types.ts
index a6a8e1b..12a332c 100644
--- a/src/rakis-core/synthient-chain/llm/types.ts
+++ b/src/rakis-core/synthient-chain/llm/types.ts
@@ -16,6 +16,8 @@ export const availableModels = [
 
 export type LLMModelName = (typeof availableModels)[number];
 
+export type AvailableModel = typeof availableModels[number];
+
 export type LLMWorkerStates = {
   [workerId: string]: {
     modelName: LLMModelName;

From cbac2242e8f32065db8533c246690f3011f785bf Mon Sep 17 00:00:00 2001
From: alokrajiv <mail@alokrajiv.com>
Date: Thu, 4 Jul 2024 11:10:03 +0800
Subject: [PATCH 2/3] align types form scaleWorkers and navbar components

---
 src/components/dashboard/navbar.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/navbar.tsx b/src/components/dashboard/navbar.tsx
index a82bcf7..7927397 100644
--- a/src/components/dashboard/navbar.tsx
+++ b/src/components/dashboard/navbar.tsx
@@ -15,6 +15,7 @@ import { ChainIdentity } from "../../rakis-core/synthient-chain/db/entities";
 import ChainIdentities from "./chainidentities";
 import ScaleWorkers from "./scaleWorkers";
 import {
+  AvailableModel,
   LLMModelName,
   LLMWorkerStates,
 } from "../../rakis-core/synthient-chain/llm/types";
@@ -52,6 +53,13 @@ export default function NavBar({
     signedWithWallet: string
   ) => Promise<void>;
 }) {
+  const workerCount: Record<AvailableModel, number> = Object.keys(llmWorkerStates)
+    .map((workerId) => llmWorkerStates[workerId].modelName as AvailableModel)
+    .reduce((acc, cur) => {
+      acc[cur] = (acc[cur] || 0) + 1;
+      return acc;
+  }, {} as Record<AvailableModel, number>);
+
   return (
     <Flex direction={{ initial: "column", sm: "row" }} justify="center" gap="2">
       <Tooltip content={`${mySynthientId}`}>
@@ -181,13 +189,7 @@ export default function NavBar({
       <Box flexGrow="1"></Box>
       <LiveHelp />
       <ScaleWorkers
-        workerCount={Object.keys(llmWorkerStates)
-          .map((workerId) => llmWorkerStates[workerId].modelName)
-          .reduce((acc, cur) => {
-            acc[cur] ??= 0;
-            acc[cur]++;
-            return acc;
-          }, {} as { [key: string]: number })}
+        workerCount={workerCount}
         scaleLLMWorkers={scaleLLMWorkers}
       />
       <ChainIdentities

From c4c6d453f02688c4cd3ea89d09c661b3cf0d3192 Mon Sep 17 00:00:00 2001
From: alokrajiv <mail@alokrajiv.com>
Date: Thu, 4 Jul 2024 16:28:26 +0800
Subject: [PATCH 3/3] Optimize NavBar: memoize worker count, fix types

---
 src/components/dashboard/navbar.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/dashboard/navbar.tsx b/src/components/dashboard/navbar.tsx
index 7927397..a350a6f 100644
--- a/src/components/dashboard/navbar.tsx
+++ b/src/components/dashboard/navbar.tsx
@@ -8,7 +8,6 @@ import {
   Card,
   Separator,
   Container,
-  Heading,
   Link,
 } from "@radix-ui/themes";
 import { ChainIdentity } from "../../rakis-core/synthient-chain/db/entities";
@@ -16,10 +15,10 @@ import ChainIdentities from "./chainidentities";
 import ScaleWorkers from "./scaleWorkers";
 import {
   AvailableModel,
-  LLMModelName,
   LLMWorkerStates,
 } from "../../rakis-core/synthient-chain/llm/types";
 import LiveHelp from "./livehelp";
+import { useMemo } from "react";
 
 const GreenDot = () => (
   <Box
@@ -45,7 +44,7 @@ export default function NavBar({
 }: {
   llmWorkerStates: LLMWorkerStates;
   mySynthientId: string;
-  scaleLLMWorkers: (modelName: LLMModelName, numWorkers: number) => void;
+  scaleLLMWorkers: (modelName: AvailableModel, numWorkers: number) => void;
   chainIdentities: ChainIdentity[];
   addNewChainIdentity: (
     signature: `0x${string}`,
@@ -53,12 +52,14 @@ export default function NavBar({
     signedWithWallet: string
   ) => Promise<void>;
 }) {
-  const workerCount: Record<AvailableModel, number> = Object.keys(llmWorkerStates)
-    .map((workerId) => llmWorkerStates[workerId].modelName as AvailableModel)
-    .reduce((acc, cur) => {
-      acc[cur] = (acc[cur] || 0) + 1;
-      return acc;
-  }, {} as Record<AvailableModel, number>);
+  const workerCount = useMemo(() => {
+    return Object.keys(llmWorkerStates)
+      .map((workerId) => llmWorkerStates[workerId].modelName as AvailableModel)
+      .reduce((acc, cur) => {
+        acc[cur] = (acc[cur] || 0) + 1;
+        return acc;
+      }, {} as Record<AvailableModel, number>);
+  }, [llmWorkerStates]);
 
   return (
     <Flex direction={{ initial: "column", sm: "row" }} justify="center" gap="2">