From 9e2b73eac9a0b4f7a4f47f5ed1072f9234b8edf8 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 2 Oct 2023 21:45:48 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(DropdownButtonComponent):=20?=
 =?UTF-8?q?add=20id=20attribute=20to=20Button=20component=20to=20improve?=
 =?UTF-8?q?=20accessibility=20and=20testing=20capabilities=20=F0=9F=94=A7?=
 =?UTF-8?q?=20fix(floatComponent):=20add=20id=20attribute=20to=20Input=20c?=
 =?UTF-8?q?omponent=20to=20improve=20accessibility=20and=20testing=20capab?=
 =?UTF-8?q?ilities=20=F0=9F=94=A7=20fix(keypairListComponent):=20add=20id?=
 =?UTF-8?q?=20attribute=20to=20Input=20components=20to=20improve=20accessi?=
 =?UTF-8?q?bility=20and=20testing=20capabilities=20=F0=9F=94=A7=20fix(keyp?=
 =?UTF-8?q?airListComponent):=20add=20id=20attribute=20to=20Plus=20and=20M?=
 =?UTF-8?q?inus=20buttons=20to=20improve=20accessibility=20and=20testing?=
 =?UTF-8?q?=20capabilities=20=F0=9F=94=A7=20fix(toggleShadComponent):=20ad?=
 =?UTF-8?q?d=20id=20attribute=20to=20Switch=20component=20to=20improve=20a?=
 =?UTF-8?q?ccessibility=20and=20testing=20capabilities=20=F0=9F=94=A7=20fi?=
 =?UTF-8?q?x(EditNodeModal):=20add=20id=20attribute=20to=20ToggleShadCompo?=
 =?UTF-8?q?nent=20component=20to=20improve=20accessibility=20and=20testing?=
 =?UTF-8?q?=20capabilities=20=F0=9F=94=A7=20fix(PageComponent):=20add=20id?=
 =?UTF-8?q?=20attribute=20to=20div=20element=20to=20improve=20accessibilit?=
 =?UTF-8?q?y=20and=20testing=20capabilities=20=F0=9F=94=A7=20fix(extraSide?=
 =?UTF-8?q?barComponent):=20add=20id=20attribute=20to=20div=20element=20to?=
 =?UTF-8?q?=20improve=20accessibility=20and=20testing=20capabilities=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(nodeToolbarComponent):=20add=20id=20attribut?=
 =?UTF-8?q?e=20to=20div=20element=20to=20improve=20accessibility=20and=20t?=
 =?UTF-8?q?esting=20capabilities=20=F0=9F=94=A7=20fix(nodeToolbarComponent?=
 =?UTF-8?q?):=20add=20id=20attribute=20to=20button=20element=20to=20improv?=
 =?UTF-8?q?e=20accessibility=20and=20testing=20capabilities=20=F0=9F=94=A7?=
 =?UTF-8?q?=20fix(types/components):=20add=20id=20attribute=20to=20ToggleC?=
 =?UTF-8?q?omponentType=20to=20improve=20accessibility=20and=20testing=20c?=
 =?UTF-8?q?apabilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚀 feat(keypair.spec.ts): add tests for KeypairListComponent to verify key-value pairs functionality
🚀 feat(float.spec.ts): add tests for FloatComponent to verify float input functionality

🚀 feat: add support for toggling various options in the UI

This commit adds support for toggling various options in the UI. The following options can now be toggled:
- showtemperature
- showtop_k
- showtop_p
- showuse_mlock
- showuse_mmap
- showverbose
- showvocab_only
- showcache
- showecho
- showf16_kv
- showgrammar_path
- showlast_n_tokens_size
- showlogits_all
- showlogprobs
- showlora_base
- showlora_path
- showmax_tokens
- showmetadata
- showmodel_kwargs
- showmodel_path
- shown_batch
- shown_ctx
- shown_gpu_layers
- shown_parts
- shown_threads
- showrepeat_penalty
- showrope_freq_base
- showrope_freq_scale
- showseed
- showstop
- showstreaming
- showsuffix
- showtags

These options can be toggled by clicking on the respective elements in the UI. The commit also includes tests to ensure that the toggling functionality works as expected.
---
 .../DropdownButtonComponent/index.tsx         |   1 +
 .../src/components/floatComponent/index.tsx   |   1 +
 .../components/keypairListComponent/index.tsx |   4 +
 .../components/toggleShadComponent/index.tsx  |   2 +
 .../src/modals/EditNodeModal/index.tsx        |   6 +
 .../components/PageComponent/index.tsx        |   2 +-
 .../extraSidebarComponent/index.tsx           |   8 +-
 .../components/nodeToolbarComponent/index.tsx |   7 +-
 src/frontend/src/types/components/index.ts    |  25 +-
 src/frontend/tests/keypair.spec.ts            | 459 ++++++++++++++++++
 10 files changed, 498 insertions(+), 17 deletions(-)
 create mode 100644 src/frontend/tests/keypair.spec.ts

diff --git a/src/frontend/src/components/DropdownButtonComponent/index.tsx b/src/frontend/src/components/DropdownButtonComponent/index.tsx
index 784a08528..9491336d6 100644
--- a/src/frontend/src/components/DropdownButtonComponent/index.tsx
+++ b/src/frontend/src/components/DropdownButtonComponent/index.tsx
@@ -21,6 +21,7 @@ export default function DropdownButton({
       <DropdownMenu open={showOptions}>
         <DropdownMenuTrigger asChild>
           <Button
+            id="new-project-btn"
             variant="primary"
             className="relative pr-10"
             onClick={(event) => {
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 454d3b601..7e57361f0 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -23,6 +23,7 @@ export default function FloatComponent({
   return (
     <div className="w-full">
       <Input
+        id="float-input"
         type="number"
         step={step}
         min={min}
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index 360ebb37e..ca63c362c 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -55,6 +55,7 @@ export default function KeypairListComponent({
           return (
             <div key={idx} className="flex w-full gap-2">
               <Input
+                id={"keypair" + index}
                 type="text"
                 value={key.trim()}
                 className={classNames(
@@ -72,6 +73,7 @@ export default function KeypairListComponent({
               />
 
               <Input
+                id={"keypair" + (index + 100).toString()}
                 type="text"
                 value={obj[key]}
                 className={editNode ? "input-edit-node" : ""}
@@ -88,6 +90,7 @@ export default function KeypairListComponent({
                     newInputList.push({ "": "" });
                     onChange(newInputList);
                   }}
+                  id={"plusbtn" + index.toString()}
                 >
                   <IconComponent
                     name="Plus"
@@ -101,6 +104,7 @@ export default function KeypairListComponent({
                     newInputList.splice(index, 1);
                     onChange(newInputList);
                   }}
+                  id={"minusbtn" + index.toString()}
                 >
                   <IconComponent
                     name="X"
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 9c0967398..328b1f911 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -6,6 +6,7 @@ export default function ToggleShadComponent({
   setEnabled,
   disabled,
   size,
+  id = "",
 }: ToggleComponentType): JSX.Element {
   let scaleX, scaleY;
   switch (size) {
@@ -29,6 +30,7 @@ export default function ToggleShadComponent({
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
       <Switch
+        id={id}
         style={{
           transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
         }}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 4e1eb6612..5da769693 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -467,6 +467,11 @@ const EditNodeModal = forwardRef(
                             <TableCell className="p-0 text-right">
                               <div className="items-center text-center">
                                 <ToggleShadComponent
+                                  id={
+                                    "show" +
+                                    myData.current.node?.template[templateParam]
+                                      .name
+                                  }
                                   enabled={
                                     !myData.current.node?.template[
                                       templateParam
@@ -492,6 +497,7 @@ const EditNodeModal = forwardRef(
 
         <BaseModal.Footer>
           <Button
+            id={"saveChangesBtn"}
             className="mt-3"
             onClick={() => {
               const newData = cloneDeep(myData.current);
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index ec1a2da28..0fcb4a58a 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -434,7 +434,7 @@ export default function Page({
           <div className="h-full w-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
             Object.keys(types).length > 0 ? (
-              <div className="h-full w-full">
+              <div id="react-flow-id" className="h-full w-full">
                 <ReactFlow
                   nodes={nodes}
                   onMove={() => {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 88cedfedf..fb8f35f32 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -271,7 +271,13 @@ export default function ExtraSidebar(): JSX.Element {
                               );
                             }}
                           >
-                            <div className="side-bar-components-div-form">
+                            <div
+                              className="side-bar-components-div-form"
+                              id={
+                                "side" +
+                                data[SBSectionName][SBItemName].display_name
+                              }
+                            >
                               <span className="side-bar-components-text">
                                 {data[SBSectionName][SBItemName].display_name}
                               </span>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 54651ff4d..16f6f1ed9 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -138,7 +138,7 @@ export default function NodeToolbarComponent({
             <Select onValueChange={handleSelectChange} value={selectedValue}>
               <ShadTooltip content="More" side="top">
                 <SelectTrigger>
-                  <div>
+                  <div id="advancedIcon">
                     <div
                       className={classNames(
                         "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
@@ -163,6 +163,7 @@ export default function NodeToolbarComponent({
                   }
                 >
                   <div
+                    id="editAdvancedBtn"
                     className={
                       "flex " +
                       (nodeLength == 0
@@ -179,7 +180,7 @@ export default function NodeToolbarComponent({
                 </SelectItem>
                 {isMinimal && (
                   <SelectItem value={getRandomKeyByssmm() + "show"}>
-                    <div className="flex">
+                    <div className="flex" id="editAdvanced">
                       <IconComponent
                         name={showNode ? "Minimize2" : "Maximize2"}
                         className="relative top-0.5 mr-2 h-4 w-4"
@@ -192,7 +193,7 @@ export default function NodeToolbarComponent({
             </Select>
           ) : (
             <ShadTooltip content="Edit" side="top">
-              <div>
+              <div id="editAdvancedIcon">
                 <button
                   disabled={nodeLength === 0}
                   onClick={() => setShowModalAdvanced(true)}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 915ae2928..f0a92bff2 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -23,6 +23,7 @@ export type ToggleComponentType = {
   setEnabled: (state: boolean) => void;
   disabled: boolean | undefined;
   size: "small" | "medium" | "large";
+  id?: string;
 };
 export type DropDownComponentType = {
   value: string;
@@ -136,18 +137,18 @@ export type TooltipComponentType = {
   children: ReactElement;
   title: string | ReactElement;
   placement?:
-    | "bottom-end"
-    | "bottom-start"
-    | "bottom"
-    | "left-end"
-    | "left-start"
-    | "left"
-    | "right-end"
-    | "right-start"
-    | "right"
-    | "top-end"
-    | "top-start"
-    | "top";
+  | "bottom-end"
+  | "bottom-start"
+  | "bottom"
+  | "left-end"
+  | "left-start"
+  | "left"
+  | "right-end"
+  | "right-start"
+  | "right"
+  | "top-end"
+  | "top-start"
+  | "top";
 };
 
 export type ProgressBarType = {
diff --git a/src/frontend/tests/keypair.spec.ts b/src/frontend/tests/keypair.spec.ts
new file mode 100644
index 000000000..cd435fe92
--- /dev/null
+++ b/src/frontend/tests/keypair.spec.ts
@@ -0,0 +1,459 @@
+import { expect, test } from "@playwright/test";
+
+test("KeypairListComponent", async ({ page }) => {
+    await page.goto('http://localhost:3000/');
+    await page.waitForTimeout(2000);
+
+    await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(2000);
+
+    await page.getByPlaceholder('Search').click();
+    await page.getByPlaceholder('Search').fill('csv');
+
+    await page.waitForTimeout(2000);
+
+    await page.locator('//*[@id="sideCSVLoader"]').dragTo(page.locator('//*[@id="react-flow-id"]'));
+    await page.mouse.up();
+    await page.mouse.down();
+
+    await page.locator('//*[@id="keypair0"]').click();
+    await page.locator('//*[@id="keypair0"]').fill('testtesttesttest');
+    await page.locator('//*[@id="keypair100"]').click();
+    await page.locator('//*[@id="keypair100"]').fill('testtesttesttesttesttest');
+
+    const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
+    const elementCountNode = await plusButtonLocatorNode.count();
+    if (elementCountNode > 0) {
+        await plusButtonLocatorNode.click();
+    }
+
+    await page.locator('//*[@id="keypair1"]').click();
+    await page.locator('//*[@id="keypair1"]').fill('testtesttesttest1');
+    await page.locator('//*[@id="keypair101"]').click();
+    await page.locator('//*[@id="keypair101"]').fill('testtesttesttesttesttest1');
+    await page.locator('//*[@id="plusbtn1"]').click();
+
+    await page.locator('//*[@id="keypair2"]').click();
+    await page.locator('//*[@id="keypair2"]').fill('testtesttesttest2');
+    await page.locator('//*[@id="keypair102"]').click();
+    await page.locator('//*[@id="keypair102"]').fill('testtesttesttesttesttest2');
+
+    await page.locator('//*[@id="minusbtn1"]').click();
+
+    const keyPairVerification = page.locator('//*[@id="keypair102"]');
+    const elementKeyCount = await keyPairVerification.count();
+
+    if (elementKeyCount === 0) {
+        expect(true).toBeTruthy();
+
+    } else {
+        expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showfile_path"]').click();
+    expect(await page.locator('//*[@id="showfile_path"]').isChecked()).toBeFalsy();
+    await page.locator('//*[@id="showmetadata"]').click();
+    expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+    const elementCount = await plusButtonLocator.count();
+    if (elementCount === 0) {
+        expect(true).toBeTruthy();
+
+        await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
+        await page.locator('//*[@id="advancedIcon"]').click();
+        await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+        await page.locator('//*[@id="showfile_path"]').click();
+        expect(await page.locator('//*[@id="showfile_path"]').isChecked()).toBeTruthy();
+        await page.locator('//*[@id="showmetadata"]').click();
+        expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeTruthy();
+
+        await page.locator('//*[@id="keypair0"]').click();
+        await page.locator('//*[@id="keypair0"]').fill('testtesttesttest');
+        await page.locator('//*[@id="keypair100"]').click();
+        await page.locator('//*[@id="keypair100"]').fill('testtesttesttesttesttest');
+
+        const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+        const elementCount = await plusButtonLocator.count();
+        if (elementCount > 0) {
+            await plusButtonLocator.click();
+        }
+
+        await page.locator('//*[@id="keypair1"]').click();
+        await page.locator('//*[@id="keypair1"]').fill('testtesttesttest1');
+        await page.locator('//*[@id="keypair101"]').click();
+        await page.locator('//*[@id="keypair101"]').fill('testtesttesttesttesttest1');
+        await page.locator('//*[@id="plusbtn1"]').click();
+
+        await page.locator('//*[@id="keypair2"]').click();
+        await page.locator('//*[@id="keypair2"]').fill('testtesttesttest2');
+        await page.locator('//*[@id="keypair102"]').click();
+        await page.locator('//*[@id="keypair102"]').fill('testtesttesttesttesttest2');
+
+        await page.locator('//*[@id="minusbtn1"]').click();
+
+        const keyPairVerification = page.locator('//*[@id="keypair102"]');
+        const elementKeyCount = await keyPairVerification.count();
+
+        if (elementKeyCount === 0) {
+            await page.locator('//*[@id="saveChangesBtn"]').click();
+
+            const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
+            const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
+            const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
+            const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
+
+            if (key1 === 'testtesttesttest' && value1 === 'testtesttesttesttesttest' && key2 === 'testtesttesttest2' && value2 === 'testtesttesttesttesttest2') {
+                expect(true).toBeTruthy();
+            }
+            else {
+                expect(false).toBeTruthy();
+            }
+        } else {
+            expect(false).toBeTruthy();
+        }
+
+    } else {
+        expect(false).toBeTruthy();
+    }
+});
+
+test("FloatComponent", async ({ page }) => {
+    await page.goto('http://localhost:3000/');
+    await page.waitForTimeout(2000);
+
+    await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(2000);
+
+    await page.getByPlaceholder('Search').click();
+    await page.getByPlaceholder('Search').fill('llamacpp');
+
+    await page.waitForTimeout(2000);
+
+    await page.locator('//*[@id="sideLlamaCpp"]').dragTo(page.locator('//*[@id="react-flow-id"]'));
+    await page.mouse.up();
+    await page.mouse.down();
+
+    await page.locator('//*[@id="float-input"]').click();
+    await page.locator('//*[@id="float-input"]').fill('3');
+
+    let value = await page.locator('//*[@id="float-input"]').inputValue();
+
+    if (value != "2") {
+        expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="float-input"]').click();
+    await page.locator('//*[@id="float-input"]').fill('-3');
+
+    value = await page.locator('//*[@id="float-input"]').inputValue();
+
+    if (value != "-2") {
+        expect(false).toBeTruthy();
+    }
+
+
+    await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
+    await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+    await page.locator('//*[@id="showcache"]').click();
+    expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
+
+    // showecho
+    await page.locator('//*[@id="showecho"]').click();
+    expect(await page.locator('//*[@id="showecho"]').isChecked()).toBeTruthy();
+
+    // showf16_kv
+    await page.locator('//*[@id="showf16_kv"]').click();
+    expect(await page.locator('//*[@id="showf16_kv"]').isChecked()).toBeTruthy();
+
+    // showgrammar_path
+    await page.locator('//*[@id="showgrammar_path"]').click();
+    expect(await page.locator('//*[@id="showgrammar_path"]').isChecked()).toBeTruthy();
+
+    // showlast_n_tokens_size
+    await page.locator('//*[@id="showlast_n_tokens_size"]').click();
+    expect(await page.locator('//*[@id="showlast_n_tokens_size"]').isChecked()).toBeTruthy();
+
+    // showlogits_all
+    await page.locator('//*[@id="showlogits_all"]').click();
+    expect(await page.locator('//*[@id="showlogits_all"]').isChecked()).toBeTruthy();
+
+    // showlogprobs
+    await page.locator('//*[@id="showlogprobs"]').click();
+    expect(await page.locator('//*[@id="showlogprobs"]').isChecked()).toBeTruthy();
+
+    // showlora_base
+    await page.locator('//*[@id="showlora_base"]').click();
+    expect(await page.locator('//*[@id="showlora_base"]').isChecked()).toBeTruthy();
+
+    // showlora_path
+    await page.locator('//*[@id="showlora_path"]').click();
+    expect(await page.locator('//*[@id="showlora_path"]').isChecked()).toBeTruthy();
+
+    // showmax_tokens
+    await page.locator('//*[@id="showmax_tokens"]').click();
+    expect(await page.locator('//*[@id="showmax_tokens"]').isChecked()).toBeTruthy();
+
+    // showmetadata
+    await page.locator('//*[@id="showmetadata"]').click();
+    expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeTruthy();
+
+    // showmodel_kwargs
+    await page.locator('//*[@id="showmodel_kwargs"]').click();
+    expect(await page.locator('//*[@id="showmodel_kwargs"]').isChecked()).toBeTruthy();
+
+    // showmodel_path
+    await page.locator('//*[@id="showmodel_path"]').click();
+    expect(await page.locator('//*[@id="showmodel_path"]').isChecked()).toBeFalsy();
+
+    // shown_batch
+    await page.locator('//*[@id="shown_batch"]').click();
+    expect(await page.locator('//*[@id="shown_batch"]').isChecked()).toBeTruthy();
+
+    // shown_ctx
+    await page.locator('//*[@id="shown_ctx"]').click();
+    expect(await page.locator('//*[@id="shown_ctx"]').isChecked()).toBeTruthy();
+
+    // shown_gpu_layers
+    await page.locator('//*[@id="shown_gpu_layers"]').click();
+    expect(await page.locator('//*[@id="shown_gpu_layers"]').isChecked()).toBeTruthy();
+
+    // shown_parts
+    await page.locator('//*[@id="shown_parts"]').click();
+    expect(await page.locator('//*[@id="shown_parts"]').isChecked()).toBeTruthy();
+
+    // shown_threads
+    await page.locator('//*[@id="shown_threads"]').click();
+    expect(await page.locator('//*[@id="shown_threads"]').isChecked()).toBeTruthy();
+
+    // showrepeat_penalty
+    await page.locator('//*[@id="showrepeat_penalty"]').click();
+    expect(await page.locator('//*[@id="showrepeat_penalty"]').isChecked()).toBeTruthy();
+
+    // showrope_freq_base
+    await page.locator('//*[@id="showrope_freq_base"]').click();
+    expect(await page.locator('//*[@id="showrope_freq_base"]').isChecked()).toBeTruthy();
+
+    // showrope_freq_scale
+    await page.locator('//*[@id="showrope_freq_scale"]').click();
+    expect(await page.locator('//*[@id="showrope_freq_scale"]').isChecked()).toBeTruthy();
+
+    // showseed
+    await page.locator('//*[@id="showseed"]').click();
+    expect(await page.locator('//*[@id="showseed"]').isChecked()).toBeTruthy();
+
+    // showstop
+    await page.locator('//*[@id="showstop"]').click();
+    expect(await page.locator('//*[@id="showstop"]').isChecked()).toBeTruthy();
+
+    // showstreaming
+    await page.locator('//*[@id="showstreaming"]').click();
+    expect(await page.locator('//*[@id="showstreaming"]').isChecked()).toBeTruthy();
+
+    // showsuffix
+    await page.locator('//*[@id="showsuffix"]').click();
+    expect(await page.locator('//*[@id="showsuffix"]').isChecked()).toBeTruthy();
+
+    // showtags
+    await page.locator('//*[@id="showtags"]').click();
+    expect(await page.locator('//*[@id="showtags"]').isChecked()).toBeTruthy();
+
+    // showtemperature
+    await page.locator('//*[@id="showtemperature"]').click();
+    expect(await page.locator('//*[@id="showtemperature"]').isChecked()).toBeFalsy();
+
+    // showtop_k
+    await page.locator('//*[@id="showtop_k"]').click();
+    expect(await page.locator('//*[@id="showtop_k"]').isChecked()).toBeTruthy();
+
+    // showtop_p
+    await page.locator('//*[@id="showtop_p"]').click();
+    expect(await page.locator('//*[@id="showtop_p"]').isChecked()).toBeTruthy();
+
+    // showuse_mlock
+    await page.locator('//*[@id="showuse_mlock"]').click();
+    expect(await page.locator('//*[@id="showuse_mlock"]').isChecked()).toBeTruthy();
+
+    // showuse_mmap
+    await page.locator('//*[@id="showuse_mmap"]').click();
+    expect(await page.locator('//*[@id="showuse_mmap"]').isChecked()).toBeTruthy();
+
+    // showverbose
+    await page.locator('//*[@id="showverbose"]').click();
+    expect(await page.locator('//*[@id="showverbose"]').isChecked()).toBeTruthy();
+
+    // showvocab_only
+    await page.locator('//*[@id="showvocab_only"]').click();
+    expect(await page.locator('//*[@id="showvocab_only"]').isChecked()).toBeTruthy();
+
+
+
+    await page.locator('//*[@id="showcache"]').click();
+    expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
+
+    // showecho
+    await page.locator('//*[@id="showecho"]').click();
+    expect(await page.locator('//*[@id="showecho"]').isChecked()).toBeFalsy();
+
+    // showf16_kv
+    await page.locator('//*[@id="showf16_kv"]').click();
+    expect(await page.locator('//*[@id="showf16_kv"]').isChecked()).toBeFalsy();
+
+    // showgrammar_path
+    await page.locator('//*[@id="showgrammar_path"]').click();
+    expect(await page.locator('//*[@id="showgrammar_path"]').isChecked()).toBeFalsy();
+
+    // showlast_n_tokens_size
+    await page.locator('//*[@id="showlast_n_tokens_size"]').click();
+    expect(await page.locator('//*[@id="showlast_n_tokens_size"]').isChecked()).toBeFalsy();
+
+    // showlogits_all
+    await page.locator('//*[@id="showlogits_all"]').click();
+    expect(await page.locator('//*[@id="showlogits_all"]').isChecked()).toBeFalsy();
+
+    // showlogprobs
+    await page.locator('//*[@id="showlogprobs"]').click();
+    expect(await page.locator('//*[@id="showlogprobs"]').isChecked()).toBeFalsy();
+
+    // showlora_base
+    await page.locator('//*[@id="showlora_base"]').click();
+    expect(await page.locator('//*[@id="showlora_base"]').isChecked()).toBeFalsy();
+
+    // showlora_path
+    await page.locator('//*[@id="showlora_path"]').click();
+    expect(await page.locator('//*[@id="showlora_path"]').isChecked()).toBeFalsy();
+
+    // showmax_tokens
+    await page.locator('//*[@id="showmax_tokens"]').click();
+    expect(await page.locator('//*[@id="showmax_tokens"]').isChecked()).toBeFalsy();
+
+    // showmetadata
+    await page.locator('//*[@id="showmetadata"]').click();
+    expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
+
+    // showmodel_kwargs
+    await page.locator('//*[@id="showmodel_kwargs"]').click();
+    expect(await page.locator('//*[@id="showmodel_kwargs"]').isChecked()).toBeFalsy();
+
+    // showmodel_path
+    await page.locator('//*[@id="showmodel_path"]').click();
+    expect(await page.locator('//*[@id="showmodel_path"]').isChecked()).toBeTruthy();
+
+    // shown_batch
+    await page.locator('//*[@id="shown_batch"]').click();
+    expect(await page.locator('//*[@id="shown_batch"]').isChecked()).toBeFalsy();
+
+    // shown_ctx
+    await page.locator('//*[@id="shown_ctx"]').click();
+    expect(await page.locator('//*[@id="shown_ctx"]').isChecked()).toBeFalsy();
+
+    // shown_gpu_layers
+    await page.locator('//*[@id="shown_gpu_layers"]').click();
+    expect(await page.locator('//*[@id="shown_gpu_layers"]').isChecked()).toBeFalsy();
+
+    // shown_parts
+    await page.locator('//*[@id="shown_parts"]').click();
+    expect(await page.locator('//*[@id="shown_parts"]').isChecked()).toBeFalsy();
+
+    // shown_threads
+    await page.locator('//*[@id="shown_threads"]').click();
+    expect(await page.locator('//*[@id="shown_threads"]').isChecked()).toBeFalsy();
+
+    // showrepeat_penalty
+    await page.locator('//*[@id="showrepeat_penalty"]').click();
+    expect(await page.locator('//*[@id="showrepeat_penalty"]').isChecked()).toBeFalsy();
+
+    // showrope_freq_base
+    await page.locator('//*[@id="showrope_freq_base"]').click();
+    expect(await page.locator('//*[@id="showrope_freq_base"]').isChecked()).toBeFalsy();
+
+    // showrope_freq_scale
+    await page.locator('//*[@id="showrope_freq_scale"]').click();
+    expect(await page.locator('//*[@id="showrope_freq_scale"]').isChecked()).toBeFalsy();
+
+    // showseed
+    await page.locator('//*[@id="showseed"]').click();
+    expect(await page.locator('//*[@id="showseed"]').isChecked()).toBeFalsy();
+
+    // showstop
+    await page.locator('//*[@id="showstop"]').click();
+    expect(await page.locator('//*[@id="showstop"]').isChecked()).toBeFalsy();
+
+    // showstreaming
+    await page.locator('//*[@id="showstreaming"]').click();
+    expect(await page.locator('//*[@id="showstreaming"]').isChecked()).toBeFalsy();
+
+    // showsuffix
+    await page.locator('//*[@id="showsuffix"]').click();
+    expect(await page.locator('//*[@id="showsuffix"]').isChecked()).toBeFalsy();
+
+    // showtags
+    await page.locator('//*[@id="showtags"]').click();
+    expect(await page.locator('//*[@id="showtags"]').isChecked()).toBeFalsy();
+
+    // showtop_k
+    await page.locator('//*[@id="showtop_k"]').click();
+    expect(await page.locator('//*[@id="showtop_k"]').isChecked()).toBeFalsy();
+
+    // showtop_p
+    await page.locator('//*[@id="showtop_p"]').click();
+    expect(await page.locator('//*[@id="showtop_p"]').isChecked()).toBeFalsy();
+
+    // showuse_mlock
+    await page.locator('//*[@id="showuse_mlock"]').click();
+    expect(await page.locator('//*[@id="showuse_mlock"]').isChecked()).toBeFalsy();
+
+    // showuse_mmap
+    await page.locator('//*[@id="showuse_mmap"]').click();
+    expect(await page.locator('//*[@id="showuse_mmap"]').isChecked()).toBeFalsy();
+
+    // showverbose
+    await page.locator('//*[@id="showverbose"]').click();
+    expect(await page.locator('//*[@id="showverbose"]').isChecked()).toBeFalsy();
+
+    // showvocab_only
+    await page.locator('//*[@id="showvocab_only"]').click();
+    expect(await page.locator('//*[@id="showvocab_only"]').isChecked()).toBeFalsy();
+
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    const plusButtonLocator = page.locator('//*[@id="float-input"]');
+    const elementCount = await plusButtonLocator.count();
+    if (elementCount === 0) {
+        expect(true).toBeTruthy();
+
+        await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
+        await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+        // showtemperature
+        await page.locator('//*[@id="showtemperature"]').click();
+        expect(await page.locator('//*[@id="showtemperature"]').isChecked()).toBeTruthy();
+
+        await page.locator('//*[@id="saveChangesBtn"]').click();
+        await page.locator('//*[@id="float-input"]').click();
+        await page.locator('//*[@id="float-input"]').fill('3');
+
+        let value = await page.locator('//*[@id="float-input"]').inputValue();
+
+        if (value != "2") {
+            expect(false).toBeTruthy();
+        }
+
+        await page.locator('//*[@id="float-input"]').click();
+        await page.locator('//*[@id="float-input"]').fill('-3');
+
+        value = await page.locator('//*[@id="float-input"]').inputValue();
+
+        if (value != "-2") {
+            expect(false).toBeTruthy();
+        }
+    }
+});