From 0465fc40ecc6c6a1c36059c6f7379dcb5492f517 Mon Sep 17 00:00:00 2001
From: Anchel135 <yakoveidelman1@gmail.com>
Date: Sun, 8 Sep 2024 14:58:51 +0300
Subject: [PATCH 1/2] add x and v buttons to set config and change the input
 type to number

---
 app/globals.css                 |  8 ++++
 app/graph/toolbar.tsx           |  2 -
 app/settings/Configurations.tsx | 70 ++++++++++++++++++++++-----------
 3 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 6d5ade16..64fe52a6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -73,6 +73,14 @@
     }
 }
 
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}
 
 @font-face {
     font-family: 'Obviously Narrow';
diff --git a/app/graph/toolbar.tsx b/app/graph/toolbar.tsx
index e3a712bd..20a95524 100644
--- a/app/graph/toolbar.tsx
+++ b/app/graph/toolbar.tsx
@@ -44,7 +44,6 @@ export default function Toolbar({ disabled, chartRef, onDeleteElement, onAddEnti
         <div className="flex items-center gap-6 p-1">
             <div className="flex gap-4">
                 <Button
-                    disabled
                     variant="Secondary"
                     label="Add Entity"
                     className="flex items-center gap-2"
@@ -52,7 +51,6 @@ export default function Toolbar({ disabled, chartRef, onDeleteElement, onAddEnti
                     icon={<PlusCircle />}
                     />
                 <Button
-                    disabled
                     variant="Secondary"
                     className="flex items-center gap-2"
                     label="Add Relation"
diff --git a/app/settings/Configurations.tsx b/app/settings/Configurations.tsx
index 22aea1fe..14bb5d51 100644
--- a/app/settings/Configurations.tsx
+++ b/app/settings/Configurations.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState, KeyboardEvent } from "react";
 import { Toast, cn, prepareArg, securedFetch } from "@/lib/utils";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { CheckCircle2, XCircle } from "lucide-react";
 import Input from "../components/ui/Input";
 import Button from "../components/ui/Button";
 
@@ -146,16 +147,7 @@ export default function Configurations() {
         run()
     }, [])
 
-    const handelSetConfig = async (e: KeyboardEvent<HTMLInputElement>, name: string) => {
-
-        if (e.code === "Escape") {
-            setEditable("")
-            setConfigValue("")
-            return
-        }
-
-        if (e.code !== "Enter") return
-
+    const handelSetConfig = async (name: string) => {
         const result = await securedFetch(`api/graph/?config=${prepareArg(name)}&value=${prepareArg(configValue)}`, {
             method: 'POST',
         })
@@ -177,6 +169,19 @@ export default function Configurations() {
         setConfigValue("")
     }
 
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>, name: string) => {
+
+        if (e.code === "Escape") {
+            setEditable("")
+            setConfigValue("")
+            return
+        }
+
+        if (e.code !== "Enter") return
+
+        handelSetConfig(name)
+    }
+
     return (
         <div className="h-full w-full border border-[#57577B] rounded-lg overflow-auto">
             <Table>
@@ -192,24 +197,41 @@ export default function Configurations() {
                 <TableBody>
                     {
                         configs.map(({ name, description, value }, index) => (
-                            <TableRow key={name} className={cn("border-none", !(index % 2) && "bg-[#57577B] hover:bg-[#57577B]")}>
-                                <TableCell className="w-[20%] py-8">{name}</TableCell>
+                            <TableRow key={name} className={cn("border-none", !(index % 2) && "bg-[#57577B]")}>
+                                <TableCell className="py-8">{name}</TableCell>
                                 <TableCell className="w-[70%]">{description}</TableCell>
-                                <TableCell>
+                                <TableCell className="w-[15%]">
                                     {
                                         editable === name && !disableRunTimeConfigs.has(name) ?
-                                            <Input
-                                                ref={(ref) => {
-                                                    ref?.focus()
-                                                }}
-                                                className="w-20"
-                                                variant="Small"
-                                                onChange={(e) => setConfigValue(e.target.value)}
-                                                onBlur={() => setEditable("")}
-                                                onKeyDown={(e) => handelSetConfig(e, name)}
-                                                value={configValue}
-                                            />
+                                            <div className="flex gap-2">
+                                                <Input
+                                                    ref={(ref) => {
+                                                        ref?.focus()
+                                                    }}
+                                                    className="w-20"
+                                                    type="number"
+                                                    variant="Small"
+                                                    onChange={(e) => setConfigValue(e.target.value)}
+                                                    onKeyDown={(e) => onKeyDown(e, name)}
+                                                    value={configValue}
+                                                    style={{
+                                                        WebkitAppearance: 'none',
+                                                        margin: 0,
+                                                    }}
+                                                />
+                                                <Button
+                                                    icon={<XCircle color={!(index % 2) ? "#272746" : "#57577B"} />}
+                                                    onClick={() => setEditable("")}
+                                                    onMouseDown={(e) => e.preventDefault()}
+                                                />
+                                                <Button
+                                                    icon={<CheckCircle2 color={!(index % 2) ? "#272746" : "#57577B"} />}
+                                                    onClick={() => handelSetConfig(name)}
+                                                    onMouseDown={(e) => e.preventDefault()}
+                                                />
+                                            </div>
                                             : <Button
+                                                className={cn(disableRunTimeConfigs.has(name) && "cursor-default")}
                                                 label={typeof value === "number" ? value.toString() : value}
                                                 onClick={() => {
                                                     setEditable(name)

From bb6c9154213bafe19b61ecbf31f77e86f0a58a73 Mon Sep 17 00:00:00 2001
From: Anchel135 <yakoveidelman1@gmail.com>
Date: Mon, 9 Sep 2024 16:51:29 +0300
Subject: [PATCH 2/2] fix build

---
 app/globals.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/globals.css b/app/globals.css
index eedb951e..4413dd84 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -81,6 +81,7 @@
         align-items: center;
         justify-content: center;
     }
+}
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {