refactor: Addresses minor UI nits and inconsistencies to ensure a mor…

…e polished appearance (#1136)
FNNDSC · Mar 28, 2024 · 28ca910 · 28ca910
1 parent 3a8634d
commit 28ca910
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 40 deletions.
diff --git a/src/components/Pacs/components/SeriesCard.tsx b/src/components/Pacs/components/SeriesCard.tsx
@@ -377,7 +377,7 @@ const SeriesCardCopy = ({ series }: { series: any }) => {
         </>
       )}
       <div className="flex-series-item steps-container">
-        {isPending && !isError ? (
+        {isPending && !isError && !data ? (
           <DotsIndicator title="Fetching current status..." />
         ) : data ? (
           <Progress
@@ -398,13 +398,15 @@ const SeriesCardCopy = ({ series }: { series: any }) => {
             measureLocation={ProgressMeasureLocation.top}
           />
         ) : (
-          <Alert
-            style={{ height: "100%" }}
-            closable
-            type="error"
-            message={error?.message || "Failed to get status. Try again"}
-            description={<span>{retrieveButton}</span>}
-          />
+          isError && (
+            <Alert
+              style={{ height: "100%" }}
+              closable
+              type="error"
+              message={error?.message || "Failed to get status. Try again"}
+              description={<span>{retrieveButton}</span>}
+            />
+          )
         )}
       </div>
 

diff --git a/src/components/Pacs/index.tsx b/src/components/Pacs/index.tsx
@@ -169,6 +169,7 @@ const QueryBuilder = () => {
             },
           });
 
+          // This is just for production instances where PACSDCM is the default service always.
           const findIndex = list.findIndex(
             (listItem: string) => listItem === "PACSDCM",
           );
@@ -177,7 +178,7 @@ const QueryBuilder = () => {
             dispatch({
               type: Types.SET_SELECTED_PACS_SERVICE,
               payload: {
-                selectedPacsService: findIndex > 1 ? list[findIndex] : list[0],
+                selectedPacsService: findIndex >= 1 ? list[findIndex] : list[0],
               },
             });
           }

diff --git a/src/components/Pacs/pacs-copy.css b/src/components/Pacs/pacs-copy.css
@@ -113,12 +113,14 @@
 
 .progress-active {
   .pf-v5-c-progress__indicator{
-    background-color:#bee1f4;
+    background-color: #BEE1F4
   }
 }
 
 .progress-success{
    .pf-v5-c-progress__indicator{
-    background-color:#004080;
+    background-color:#0066CC;
   }
-}
+}
+
+
diff --git a/src/components/Wrapper/Sidebar.tsx b/src/components/Wrapper/Sidebar.tsx
@@ -28,26 +28,34 @@ const Sidebar: React.FC<AllProps> = ({
   const isLoggedIn = useTypedSelector((state) => state.user.isLoggedIn);
   const onSelect = (selectedItem: any) => {
     const { itemId } = selectedItem;
+    if (sidebarActiveItem === itemId) return;
     setSidebarActive({
       activeItem: itemId,
     });
   };
 
   const urlParam = isLoggedIn ? "private" : "public";
 
+  const renderLink = (to: string, label: string, itemId: string) => {
+    if (sidebarActiveItem === itemId) {
+      return <span style={{ color: "gray" }}>{label}</span>;
+    }
+    return <Link to={to}>{label}</Link>;
+  };
+
   const PageNav = (
     <Nav onSelect={onSelect} aria-label="ChRIS Demo site navigation">
       <NavList>
         <NavItem itemId="overview" isActive={sidebarActiveItem === "overview"}>
-          <Link to="/">Overview</Link>
+          {renderLink("/", "Overview", "overview")}
         </NavItem>
 
         <NavGroup title="Data">
           <NavItem itemId="lib" isActive={sidebarActiveItem === "lib"}>
-            <Link to="/library">Library</Link>
+            {renderLink("/library", "Library", "lib")}
           </NavItem>
           <NavItem itemId="pacs" isActive={sidebarActiveItem === "pacs"}>
-            <Link to="/pacs">PACS Query/Retrieve</Link>
+            {renderLink("/pacs", "PACS Query/Retrieve", "pacs")}
           </NavItem>
         </NavGroup>
 
@@ -56,46 +64,30 @@ const Sidebar: React.FC<AllProps> = ({
             itemId="analyses"
             isActive={sidebarActiveItem === "analyses"}
           >
-            <Link to={`/feeds?type=${urlParam}`}>
-              New and Existing Analyses
-            </Link>
+            {renderLink(
+              `/feeds?type=${urlParam}`,
+              "New and Existing Analyses",
+              "analyses",
+            )}
           </NavItem>
           <NavItem itemId="catalog" isActive={sidebarActiveItem === "catalog"}>
-            <Link to="/catalog">Plugins</Link>
+            {renderLink("/catalog", "Plugins", "catalog")}
           </NavItem>
 
           <NavItem itemId="compute" isActive={sidebarActiveItem === "compute"}>
-            <Link to="/compute">Compute</Link>
+            {renderLink("/compute", "Compute", "compute")}
           </NavItem>
 
           <NavItem
             itemId="pipelines"
             isActive={sidebarActiveItem === "pipelines"}
           >
-            <Link to="/pipelines">Pipelines</Link>
+            {renderLink("/pipelines", "Pipelines", "pipelines")}
           </NavItem>
 
           <NavItem itemId="dataset" isActive={sidebarActiveItem === "dataset"}>
-            <Link to="/dataset">Volume View</Link>
+            {renderLink("/dataset", "Volume View", "dataset")}
           </NavItem>
-
-          {import.meta.env.REACT_APP_ALPHA_FEATURES === "development" && (
-            <NavItem
-              itemId="workflows"
-              isActive={sidebarActiveItem === "workflows"}
-            >
-              <Link to="/workflows">Run a Quick Workflow</Link>
-            </NavItem>
-          )}
-
-          {import.meta.env.REACT_APP_ALPHA_FEATURES === "development" && (
-            <NavItem
-              itemId="workflows"
-              isActive={sidebarActiveItem === "workflows"}
-            >
-              <Link to="/workflows">Run a Quick Workflow</Link>
-            </NavItem>
-          )}
         </NavGroup>
       </NavList>
     </Nav>