Hotfix: Remove arrow before parameter section

qua-platform · Jun 20, 2024 · 634b6ba · 634b6ba
1 parent bbfae33
commit 634b6ba
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 43 deletions.
diff --git a/frontend/src/modules/Nodes/components/NodeElement/NodeElement.module.scss b/frontend/src/modules/Nodes/components/NodeElement/NodeElement.module.scss
@@ -35,14 +35,14 @@
   display: flex;
 }
 
-.arrowIconWrapper {
-  padding-left: 10px;
-  padding-right: 5px;
-
-  svg {
-    vertical-align: middle;
-  }
-}
+//.arrowIconWrapper {
+//  padding-left: 10px;
+//  padding-right: 5px;
+//
+//  svg {
+//    vertical-align: middle;
+//  }
+//}
 
 .parametersWrapper {
   gap: 10px;

diff --git a/frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx b/frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx
@@ -6,7 +6,6 @@ import { Checkbox, CircularProgress } from "@mui/material";
 import { useNodesContext } from "../../context/NodesContext";
 import { classNames } from "../../../../utils/classnames";
 import { NodesApi } from "../../api/NodesAPI";
-import { ArrowIcon } from "../../../../ui-lib/Icons/ArrowIcon";
 
 export interface SingleParameter {
   default?: string | boolean | number;
@@ -31,7 +30,7 @@ export interface NodeMap {
 }
 
 export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ nodeKey, node }) => {
-  const [expanded, setExpanded] = React.useState<boolean>(true);
+  const [expanded] = React.useState<boolean>(true);
   const { selectedNode, setSelectedNode, isNodeRunning, setRunningNodeInfo, setIsNodeRunning, setRunningNode, allNodes, setAllNodes } =
     useNodesContext();
 
@@ -124,9 +123,9 @@ export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ node
       <div className={classNames(styles.parametersWrapper, selectedNode?.name !== node.name && styles.nodeNotSelected)}>
         {Object.entries(node.input_parameters).length > 0 && (
           <div className={styles.parameterTitle}>
-            <div className={styles.arrowIconWrapper} onClick={() => setExpanded(!expanded)}>
-              <ArrowIcon options={{ rotationDegree: expanded ? 0 : -90 }} />
-            </div>
+            {/*<div className={styles.arrowIconWrapper} onClick={() => setExpanded(!expanded)}>*/}
+            {/*  <ArrowIcon options={{ rotationDegree: expanded ? 0 : -90 }} />*/}
+            {/*</div>*/}
             Parameters
           </div>
         )}

diff --git a/frontend/src/modules/Nodes/components/RunningJob/RunningJob.module.scss b/frontend/src/modules/Nodes/components/RunningJob/RunningJob.module.scss
@@ -49,14 +49,14 @@
   display: flex;
 }
 
-.arrowIconWrapper {
-  padding-left: 10px;
-  padding-right: 5px;
-
-  svg {
-    vertical-align: middle;
-  }
-}
+//.arrowIconWrapper {
+//  padding-left: 10px;
+//  padding-right: 5px;
+//
+//  svg {
+//    vertical-align: middle;
+//  }
+//}
 
 .parameterValues {
   display: flex;
@@ -88,11 +88,13 @@
   height: 20px;
 }
 
-.stateUpdateAdditionalText {
-  padding-left: 5px;
-}
-
 .stateUpdateComponentWrapper {
   padding-top: 5px;
+  padding-left: 50px;
   display: flex;
-}
+  gap: 15px;
+}
+
+.stateUpdateAdditionalText {
+  padding-left: 5px;
+}
diff --git a/frontend/src/modules/Nodes/components/RunningJob/RunningJob.tsx b/frontend/src/modules/Nodes/components/RunningJob/RunningJob.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import styles from "./RunningJob.module.scss";
 import { useNodesContext } from "../../context/NodesContext";
-import { ArrowIcon } from "../../../../ui-lib/Icons/ArrowIcon";
 
 export const RunningJob: React.FC = () => {
   const { runningNode, runningNodeInfo } = useNodesContext();
@@ -17,23 +16,20 @@ export const RunningJob: React.FC = () => {
         )}
         {runningNodeInfo?.status && <div className={styles.runInfoRow}>Status:&nbsp;&nbsp;{runningNodeInfo?.status}</div>}
         {runningNodeInfo?.idx && <div className={styles.runInfoRow}>idx:&nbsp;&nbsp;{runningNodeInfo?.idx}</div>}
-        {runningNodeInfo?.stateUpdates && (
-          <div className={styles.runInfoRow}>State updates:&nbsp;&nbsp;{runningNodeInfo?.stateUpdates}</div>
-        )}
       </div>
     );
   };
 
   const getRunningJobParameters = () => {
-    const [expanded, setExpanded] = React.useState<boolean>(true);
+    const [expanded] = React.useState<boolean>(true);
     return (
       <>
         {Object.entries(runningNode?.input_parameters ?? {}).length > 0 && (
           <div className={styles.parameterInfo}>
             <div className={styles.parameterTitleWrapper}>
-              <div className={styles.arrowIconWrapper} onClick={() => setExpanded(!expanded)}>
-                <ArrowIcon options={{ rotationDegree: expanded ? 0 : -90 }} />
-              </div>
+              {/*<div className={styles.arrowIconWrapper} onClick={() => setExpanded(!expanded)}>*/}
+              {/*  <ArrowIcon options={{ rotationDegree: expanded ? 0 : -90 }} />*/}
+              {/*</div>*/}
               Parameters:
             </div>
             <div>
@@ -51,10 +47,20 @@ export const RunningJob: React.FC = () => {
     );
   };
 
-  // const stateUpdateComponent = () => {
+  // const stateUpdateComponent = (key: string, stateUpdateObject: StateUpdateObject) => {
   //   return (
-  //     <div className={styles.stateUpdateComponentWrapper}>
-  //       <BlueButton className={styles.stateUpdateButton}> Update </BlueButton> sdadfijafsiojasiofj asfjaiosjdfaioj f
+  //     <div key={key} className={styles.stateUpdateComponentWrapper}>
+  //       <BlueButton
+  //         className={styles.stateUpdateButton}
+  //         onClick={() => {
+  //           if (runningNodeInfo && runningNodeInfo.idx && stateUpdateObject && stateUpdateObject.new) {
+  //             SnapshotsApi.updateState(runningNodeInfo?.idx, key, stateUpdateObject.new.toString());
+  //           }
+  //         }}
+  //       >
+  //         Update
+  //       </BlueButton>
+  //       {stateUpdateObject?.label ? stateUpdateObject?.label.toString() : key.toString()}
   //       <div className={styles.stateUpdateAdditionalText}></div>
   //     </div>
   //   );
@@ -63,12 +69,8 @@ export const RunningJob: React.FC = () => {
   // const getStateUpdates = () => {
   //   return (
   //     <>
-  //       <div className={styles.stateTitle}>State updates:</div>
-  //       <div className={styles.stateWrapper}>
-  //         {/*{stateUpdateComponent()}*/}
-  //         {/*{stateUpdateComponent()}*/}
-  //         {/*{stateUpdateComponent()}*/}
-  //       </div>
+  //       {runningNodeInfo?.stateUpdates && <div className={styles.stateTitle}>State updates:</div>}
+  //       {Object.entries(runningNodeInfo?.stateUpdates ?? {}).map(([key, parameter]) => stateUpdateComponent(key, parameter))}
   //     </>
   //   );
   // };