Update experiment pages layout (#219)

* update fancytree counter font size

* add experiment upper bar

* solve responsive issues

* minor visual fixes

* update CHANGELOG

Author: LuiggiTenorioK

public/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Changelog
 
+### Pre-release v4.0.1-beta.4 - Release date: TBD
+
+* Updated upper bar in experiment pages to show basic information in all sub sections
+* Multiple minor visual improvements
+
 ### Pre-release v4.0.1-beta.3 - Release date: 2024-12-10
 
 * **Compatibility with Autosubmit API version >= [4.0.1b5](https://pypi.org/project/autosubmit-api/4.0.1b5/)**

src/App.scss

@@ -542,45 +542,6 @@ pre.bash-joblog {
   height: 22px;
 }
 
-.scroll {
-  max-height: 75vh;
-  overflow-y: auto;
-}
-
-.scroll-ready-tree {
-  max-height: 308px;
-  height: 308px;
-  overflow-y: auto;
-}
-
-.scroll-ready-graph {
-  max-height: 317px;
-  height: 317px;
-  overflow-y: auto;
-}
-
-.scroll-y {
-  overflow-y: auto;
-  height: 275px;
-  font-size: 0.7rem;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.scroll-y-jobs {
-  overflow-y: auto;
-  min-height: 100px;
-  max-height: 500px;
-  /* font-size: 0.9rem;
-  font-family: Arial, Helvetica, sans-serif; */
-}
-
-.scroll-y-tree {
-  overflow-y: auto;
-  height: 281px;
-  font-size: 0.7rem;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
 .scroll-x {
   overflow-x: auto;
 }

src/common/AuthBadge.jsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import { AUTHENTICATION } from "../consts";
 import { Menu, Transition } from "@headlessui/react";
 import { cn } from "../services/utils";
+import { DotLoader } from "./Loaders";
 
 const AuthBadge = () => {
   const authState = useSelector((state) => state.auth);
@@ -114,7 +115,7 @@ const AuthBadge = () => {
           className="btn btn-light rounded-full font-bold drop-shadow py-2 px-4 border"
           onClick={handleLogin}
         >
-          {isFetching ? "..." : "Login"}
+          {isFetching ? <DotLoader /> : "Login"}
         </button>
       )}
     </>

src/common/ExperimentCard.jsx

@@ -12,6 +12,7 @@ const ActiveIndicator = ({ isActive }) => {
       className={cn(
         "relative",
         "min-w-6 min-h-6 rounded-full border",
+        "w-6 h-6",
         "dark:border-dark",
         isActive ? "bg-success animate-pulse-soft" : "bg-white"
       )}
@@ -163,3 +164,4 @@ const ExperimentCard = forwardRef(({ experiment }, ref) => {
 });
 
 export default ExperimentCard;
+export { ActiveIndicator };

src/common/ExperimentInfoHeader.jsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { autosubmitApiV3 } from "../services/autosubmitApiV3";
+import { cn } from "../services/utils";
+import { ActiveIndicator } from "./ExperimentCard";
+import { DotLoader } from "./Loaders";
+
+const ExperimentInfoHeader = ({ expid }) => {
+  const [open, setOpen] = useState(false);
+
+  const {
+    data: expInfoData,
+    isFetching: isExpInfoFetching,
+    isError: isExpInfoError,
+  } = autosubmitApiV3.endpoints.getExperimentInfo.useQuery(expid);
+
+  const handleToggle = () => {
+    setOpen((prev) => !prev);
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 mb-2">
+        <div className="flex px-4 gap-6 items-center">
+          <ActiveIndicator isActive={expInfoData?.running} />
+          <div className="text-xl font-semibold grow line-clamp-3">
+            {isExpInfoFetching ? (
+              <DotLoader dotClassName={"bg-black dark:bg-white"} />
+            ) : (
+              <>
+                {isExpInfoError ? (
+                  <span className="text-danger">
+                    <i className="fa-solid fa-triangle-exclamation"></i>{" "}
+                    {"Error getting experiment info"}
+                  </span>
+                ) : (
+                  <>{expInfoData?.description || "-"}</>
+                )}
+              </>
+            )}
+          </div>
+          <button
+            onClick={handleToggle}
+            className="btn rounded-full hover:bg-black/5 aspect-square"
+          >
+            <i
+              className={cn(
+                "ms-auto fa-solid",
+                open ? "fa-angle-down" : "fa-angle-up"
+              )}
+            ></i>
+          </button>
+        </div>
+
+        {open && (
+          <div className="flex flex-col items-start ps-16 pe-6 gap-2 overflow-auto">
+            <div className="flex items-center gap-16">
+              <div>
+                <span className="font-semibold">User: </span>
+                {expInfoData?.owner || "-"}
+              </div>
+              <div>
+                <span className="font-semibold">HPC: </span>
+                {expInfoData?.hpc || "-"}
+              </div>
+              <div>
+                <span className="font-semibold">Autosubmit version: </span>
+                {expInfoData?.version || "-"}
+              </div>
+            </div>
+            <div className="flex items-center gap-16">
+              <div>
+                <span className="font-semibold">Model: </span>
+                {expInfoData?.model || "-"}
+              </div>
+              <div>
+                <span className="font-semibold">Branch: </span>
+                {expInfoData?.branch || "-"}
+              </div>
+            </div>
+          </div>
+        )}
+
+        <hr />
+      </div>
+    </>
+  );
+};
+
+export default ExperimentInfoHeader;

src/common/FancyTree.scss

@@ -4,6 +4,7 @@
 
 .fancytree-ext-childcounter span.fancytree-childcounter {
   border: 0px !important;
+  font-size: 7px;
 }
 
 ul.fancytree-container {
@@ -49,3 +50,7 @@ span.fancytree-node.fancytree-active-clone {
     border-color: #dedede; */
   background-color: #e0f2fe;
 }
+
+.fancytree-title > span {
+  color: black;
+}

src/common/Loaders.css

@@ -0,0 +1,35 @@
+.dot-loader {
+  display: flex;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  background-color: black;
+  border-radius: 50%;
+  animation: dot-loader 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+@keyframes dot-loader {
+  0%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}

src/common/Loaders.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Loaders.css";
+import { cn } from "../services/utils";
+
+const DotLoader = ({className, dotClassName}) => {
+  return (
+    <div className={cn("dot-loader", className)}>
+      <div className={cn("dot", dotClassName)}></div>
+      <div className={cn("dot", dotClassName)}></div>
+      <div className={cn("dot", dotClassName)}></div>
+    </div>
+  );
+};
+
+export { DotLoader };

src/common/LogModal.jsx

@@ -23,7 +23,7 @@ const LogModal = ({ logFile, show, onHide }) => {
           data.found === true &&
           data.logcontent &&
           data.logcontent.length > 0 && (
-            <pre className='bash bash-data mb-0 scroll'>
+            <pre className='bash bash-data mb-0 overflow-y-auto max-h-[75vh]'>
               <ul style={{ listStyleType: "none" }} className='p-1 mb-0 ul-2'>
                 {data.logcontent.map((item) => (
                   <li key={item.index}>

src/layout/ExperimentWrapper.jsx

@@ -2,6 +2,7 @@ import { Link, useLocation, useParams } from "react-router-dom";
 import { useState } from "react";
 import { useLocalStorage, useWindowSize } from "@uidotdev/usehooks";
 import { cn } from "../services/utils";
+import ExperimentInfoHeader from "../common/ExperimentInfoHeader";
 
 const EXPERIMENT_MENU_ITEMS = [
   {
@@ -76,6 +77,7 @@ const ExperimentMenuItems = ({ showLabels = true }) => {
 }
 
 const ExperimentWrapper = ({ children }) => {
+  const routeParams = useParams()
   const { width } = useWindowSize()
   const [
     showExperimentMenuLabelsDesktop,
@@ -108,7 +110,11 @@ const ExperimentWrapper = ({ children }) => {
                   (showLabels ? "fa-angles-left" : "fa-angles-right"))}></i>
               </div>
             </div>
-            {children}
+              
+            <div className="flex flex-col gap-4 grow min-w-0">
+              <ExperimentInfoHeader expid={routeParams.expid} />
+              {children}
+            </div>
           </div>
           :
           <div className="flex gap-4 flex-col">
@@ -129,7 +135,8 @@ const ExperimentWrapper = ({ children }) => {
                 </div>
               }
             </div>
-
+            
+            <ExperimentInfoHeader expid={routeParams.expid} />
             {children}
           </div>