Minor adjustments in displaying inputs+outputs count

metapages · Sep 21, 2024 · 0a8d55b · 0a8d55b
1 parent ae452c3
commit 0a8d55b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 28 deletions.
diff --git a/app/browser/src/components/MainHeader.tsx b/app/browser/src/components/MainHeader.tsx
@@ -1,9 +1,6 @@
 import { useEffect } from 'react';
 
 import { JobControlButton } from '/@/components/header/JobControlButton';
-import {
-  useOptionJobStartAutomatically,
-} from '/@/hooks/useOptionJobStartAutomatically';
 import {
   DockerJobDefinitionParamsInUrlHash,
   JobInputs,
@@ -33,7 +30,6 @@ import {
 } from '@phosphor-icons/react';
 
 export const MainHeader: React.FC = () => {
-  const [jobsStartAutomatically] = useOptionJobStartAutomatically();
   const [jobDefinitionBlob] = useHashParamJson<DockerJobDefinitionParamsInUrlHash>("job");
   const [jobInputs] = useHashParamJson<JobInputs | undefined>("inputs");
 

diff --git a/app/browser/src/components/sections/PanelInputs.tsx b/app/browser/src/components/sections/PanelInputs.tsx
@@ -1,21 +1,26 @@
-import { useCallback } from "react";
+import { useCallback } from 'react';
+
+import { PanelContainer } from '/@/components/generic/PanelContainer';
+import { PanelHeader } from '/@/components/generic/PanelHeader';
+import {
+  AddInputButtonAndModal,
+} from '/@/components/sections/inputs/AddInputButtonAndModal';
+import { InputRow } from '/@/components/sections/inputs/InputRow';
+import { JobInputs } from '/@/shared/types';
+import { useStore } from '/@/store';
+
 import {
   Button,
+  Container,
+  HStack,
   Table,
   Tbody,
   Text,
-  HStack,
-  Container,
-} from "@chakra-ui/react";
-import { useHashParamJson } from "@metapages/hash-query"  ;
-import { JobInputs } from "/@/shared/types";
-
-import { PanelHeader } from '/@/components/generic/PanelHeader';
-import { PanelContainer } from '/@/components/generic/PanelContainer';
-import { AddInputButtonAndModal } from "/@/components/sections/inputs/AddInputButtonAndModal";
-import { InputRow } from "/@/components/sections/inputs/InputRow";
+} from '@chakra-ui/react';
+import { useHashParamJson } from '@metapages/hash-query';
 
 export const PanelInputs: React.FC = () => {
+  const clientJobDefinition = useStore((state) => state.newJobDefinition); 
   const [jobInputs, setJobInputs] = useHashParamJson<JobInputs | undefined>(
     "inputs"
   );
@@ -46,12 +51,13 @@ export const PanelInputs: React.FC = () => {
   );
 
   const names: string[] = jobInputs ? Object.keys(jobInputs).sort() : [];
+  const incomingInputsCount = clientJobDefinition?.definition?.inputs ? Object.keys(clientJobDefinition.definition.inputs).length - (jobInputs ? Object.keys(jobInputs).length : 0) : 0;
 
   return (
     <PanelContainer>
-      <PanelHeader title={'Inputs'} />
+      <PanelHeader title={`Inputs (${incomingInputsCount})`} />
       <HStack px={4} width="100%" justifyContent="space-between">
-        <Text>{"/inputs/<files>"}</Text>
+        <Text>{"/inputs/<scripts>"}</Text>
         <AddInputButtonAndModal add={addNewInput} showText={false} />
       </HStack>
       <Container>

diff --git a/app/browser/src/components/sections/PanelOutputs.tsx b/app/browser/src/components/sections/PanelOutputs.tsx
@@ -1,4 +1,5 @@
-import { useRef } from 'react';
+import { PanelContainer } from '/@/components/generic/PanelContainer';
+import { PanelHeader } from '/@/components/generic/PanelHeader';
 import {
   DataRef,
   DockerJobDefinitionRow,
@@ -8,20 +9,17 @@ import {
 import { useStore } from '/@/store';
 
 import {
+  Container,
+  HStack,
+  Icon,
   Table,
   Tbody,
   Td,
   Text,
-  Center,
   Tr,
-  Container,
-  HStack,
-  Icon,
 } from '@chakra-ui/react';
-import { ArrowDown } from '@phosphor-icons/react'
+import { ArrowDown } from '@phosphor-icons/react';
 
-import { PanelHeader } from '/@/components/generic/PanelHeader';
-import { PanelContainer } from '/@/components/generic/PanelContainer';
 // import { UPLOAD_DOWNLOAD_BASE_URL } from '/@/config';
 
 export const PanelOutputs: React.FC = () => {
@@ -34,14 +32,14 @@ export const PanelOutputs: React.FC = () => {
   }
   return (
     <PanelContainer>
-      <PanelHeader title={'Outputs'} />
+      <PanelHeader title={`Outputs (${outputs ? Object.keys(outputs).length : 0})`} />
       <HStack px={4} width="100%" justifyContent="space-between">
         <Text>{"/outputs/<files>"}</Text>
 
       </HStack>
-      <Center px={4} width="100%">
+      {/* <Center px={4} width="100%">
         <Text fontSize={'0.9rem'}>Output Files</Text>
-      </Center>
+      </Center> */}
       <Container>
         <Table px={5} variant="simple">
           <Tbody>