From 924babab6c6b6066f20cb72469b94351e184ebf4 Mon Sep 17 00:00:00 2001 From: AyeshaSanadi Date: Tue, 24 Feb 2026 00:27:28 -0800 Subject: [PATCH 01/36] Added Tailwind css, Commented unused code and Removed Redundant code --- server/requirements.txt | 2 +- ui/src/App.css | 40 -- .../components/ArtifactPTypeSidebar/index.css | 7 +- .../components/ArtifactPTypeSidebar/index.jsx | 181 +++--- ui/src/components/DashboardHeader/index.css | 31 - ui/src/components/DashboardHeader/index.jsx | 18 +- ui/src/components/ExecutionDropdown/index.css | 20 - ui/src/components/ExecutionDropdown/index.jsx | 33 +- .../ExecutionTangledDropdown/index.css | 7 +- .../ExecutionTangledDropdown/index.jsx | 67 ++- ui/src/components/ExecutionTree/index.jsx | 6 +- ui/src/components/Footer/index.jsx | 2 +- ui/src/components/Highlight/index.jsx | 2 - ui/src/components/LineageImage/index.jsx | 55 +- ui/src/components/LineageSidebar/index.css | 7 +- ui/src/components/LineageSidebar/index.jsx | 93 +-- ui/src/components/Loader/index.css | 6 - ui/src/components/Loader/index.jsx | 2 +- ui/src/components/ModelCardPopup/index.css | 130 ---- ui/src/components/ModelCardPopup/index.jsx | 107 ++-- ui/src/components/TangledTree/index.jsx | 567 +++++++++--------- ui/src/pages/artifacts/index.css | 72 --- ui/src/pages/artifacts/index.jsx | 317 ---------- .../components/LabelContentPanel.jsx | 307 +++++----- .../components/PaginationControls.jsx | 203 ++++--- ui/src/pages/artifacts_postgres/index.css | 12 +- ui/src/pages/artifacts_postgres/index.jsx | 564 ++++++++--------- ui/src/pages/executions/index.jsx | 264 -------- ui/src/pages/executions/index.module.css | 81 --- ui/src/pages/executions_postgres/index.jsx | 364 +++++------ .../executions_postgres/index.module.css | 11 +- ui/src/pages/home/index.jsx | 72 ++- ui/src/pages/tensorboard/index.jsx | 3 +- ui/tailwind.config.js | 10 + 34 files changed, 1405 insertions(+), 2258 deletions(-) delete mode 100644 ui/src/App.css delete mode 100644 ui/src/components/DashboardHeader/index.css delete mode 100644 ui/src/components/ExecutionDropdown/index.css delete mode 100644 ui/src/components/ModelCardPopup/index.css delete mode 100644 ui/src/pages/artifacts/index.css delete mode 100644 ui/src/pages/artifacts/index.jsx delete mode 100644 ui/src/pages/executions/index.jsx delete mode 100644 ui/src/pages/executions/index.module.css diff --git a/server/requirements.txt b/server/requirements.txt index c671165af..685b91a44 100644 --- a/server/requirements.txt +++ b/server/requirements.txt @@ -1,5 +1,5 @@ fastapi -uvicorn +uvicorn[standard] pydantic pandas dvc[s3,ssh]==3.51.1 diff --git a/ui/src/App.css b/ui/src/App.css deleted file mode 100644 index 48fc2a1b7..000000000 --- a/ui/src/App.css +++ /dev/null @@ -1,40 +0,0 @@ -.App { - text-align: center; -} - -/* -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -*/ diff --git a/ui/src/components/ArtifactPTypeSidebar/index.css b/ui/src/components/ArtifactPTypeSidebar/index.css index 626062f75..7b421016c 100644 --- a/ui/src/components/ArtifactPTypeSidebar/index.css +++ b/ui/src/components/ArtifactPTypeSidebar/index.css @@ -1,4 +1,7 @@ -.artifacttype-tabs { +/* Comment out of the entire file as it has been recently edited */ +/* and moved to a new file named ArtifactTypeSidebar. */ + +/* .artifacttype-tabs { font-family: Arial, sans-serif; color: black; } @@ -51,4 +54,4 @@ padding: 10px 24px; text-wrap: wrap; word-wrap: break-word; - } \ No newline at end of file + } */ \ No newline at end of file diff --git a/ui/src/components/ArtifactPTypeSidebar/index.jsx b/ui/src/components/ArtifactPTypeSidebar/index.jsx index 2d7a00025..5530b3bdd 100644 --- a/ui/src/components/ArtifactPTypeSidebar/index.jsx +++ b/ui/src/components/ArtifactPTypeSidebar/index.jsx @@ -1,98 +1,101 @@ -/*** - * Copyright (2023) Hewlett Packard Enterprise Development LP - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * You may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - ***/ +// Comment out of the entire file as it has been recently edited +// and moved to a new file named ArtifactTypeSidebar. -import React, { useState, useEffect } from "react"; -import "./index.css"; +// /*** +// * Copyright (2023) Hewlett Packard Enterprise Development LP +// * +// * Licensed under the Apache License, Version 2.0 (the "License"); +// * You may not use this file except in compliance with the License. +// * You may obtain a copy of the License at +// * +// * http://www.apache.org/licenses/LICENSE-2.0 +// * +// * Unless required by applicable law or agreed to in writing, software +// * distributed under the License is distributed on an "AS IS" BASIS, +// * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// * See the License for the specific language governing permissions and +// * limitations under the License. +// ***/ -const ArtifactPTypeSidebar = ({ - artifactTypes, - handleArtifactTypeClick, - onFilter -}) => { - const [clickedArtifactType, setClickedArtifactType] = useState( - artifactTypes[0], - ); +// import React, { useState, useEffect } from "react"; +// import "./index.css"; - const [filterValue, setFilterValue] = useState(""); +// const ArtifactPTypeSidebar = ({ +// artifactTypes, +// handleArtifactTypeClick, +// onFilter +// }) => { +// const [clickedArtifactType, setClickedArtifactType] = useState( +// artifactTypes[0], +// ); - useEffect(() => { - handleClick(artifactTypes[0]); - // eslint-disable-next-line - }, []); +// const [filterValue, setFilterValue] = useState(""); - useEffect(() => { - setClickedArtifactType(artifactTypes[0]); - // eslint-disable-next-line - }, [artifactTypes]); +// useEffect(() => { +// handleClick(artifactTypes[0]); +// // eslint-disable-next-line +// }, []); - const handleClick = (artifactType) => { - setClickedArtifactType(artifactType); - handleArtifactTypeClick(artifactType); - }; +// useEffect(() => { +// setClickedArtifactType(artifactTypes[0]); +// // eslint-disable-next-line +// }, [artifactTypes]); - const handleFilterChange = (e) => { - const filterValue = e.target.value; - setFilterValue(filterValue); // Update the filter string - onFilter(filterValue); - }; +// const handleClick = (artifactType) => { +// setClickedArtifactType(artifactType); +// handleArtifactTypeClick(artifactType); +// }; - return ( - <> -
-
- {artifactTypes.map((artifactType, index) => ( - - ))} -
-
-
- -
-
-
- - ); -}; +// const handleFilterChange = (e) => { +// const filterValue = e.target.value; +// setFilterValue(filterValue); // Update the filter string +// onFilter(filterValue); +// }; -export default ArtifactPTypeSidebar; +// return ( +// <> +//
+//
+// {artifactTypes.map((artifactType, index) => ( +// +// ))} +//
+//
+//
+// +//
+//
+//
+// +// ); +// }; + +// export default ArtifactPTypeSidebar; diff --git a/ui/src/components/DashboardHeader/index.css b/ui/src/components/DashboardHeader/index.css deleted file mode 100644 index b6dc6b989..000000000 --- a/ui/src/components/DashboardHeader/index.css +++ /dev/null @@ -1,31 +0,0 @@ -.metadata { - text-decoration: none; /* Remove underline from link */ - padding: 6px 12px; /* Padding to make it look like a button */ - color: black; /* Text color */ - background-color: white; /* Initial background color */ - border-radius: 20px; /* Rounded corners */ - border: none; /* No border */ - transition: background-color 0.3s ease; /* Smooth transition on hover */ - display: inline-block; /* To make padding apply properly */ -} - -.metadata:hover { - background-color: #f4f4f4f4; /* Change background color on hover */ - cursor: pointer; /* Change cursor to pointer */ - color: black; -} - -.metadata.active { - color: black; /* Change color of the active link */ - background-color: #f4f4f4f4; -} - -.cmf-server, -.cmf-server.active .cmf-server.hover { - background-color: #01a982; /* Change background color on hover */ - cursor: pointer; /* Change cursor to pointer */ - color: black; - padding: 6px 12px; - border-radius: 20px; - border: none; -} diff --git a/ui/src/components/DashboardHeader/index.jsx b/ui/src/components/DashboardHeader/index.jsx index 23ea4d1d7..8edae59b1 100644 --- a/ui/src/components/DashboardHeader/index.jsx +++ b/ui/src/components/DashboardHeader/index.jsx @@ -17,7 +17,6 @@ import React, { useState } from "react"; import { NavLink } from "react-router-dom"; -import "./index.css"; function DashboardHeader() { const [toggleMenu, setToggleMenu] = useState(false); @@ -40,6 +39,7 @@ function DashboardHeader() { to="/" className="font-bold text-2xl font-sans tracking-tight bg-teal-600 text-white px-4 py-2 rounded-lg shadow" style={{ textAlign: 'left' }} + onClick={() => { window.location.href = "/" }} > CMF SERVER @@ -51,8 +51,12 @@ function DashboardHeader() { + `text-xl font-semibold font-sans transition-colors pb-1 ${isActive + ? "text-teal-600 border-b-2 border-teal-600" + : "text-gray-700 hover:text-teal-600 border-b-2 border-transparent" + }` + } > {link.label} @@ -92,8 +96,12 @@ function DashboardHeader() { + `block px-3 py-2 rounded-md text-xl font-medium font-sans transition-colors ${isActive + ? "bg-teal-600 text-white" + : "text-gray-700 hover:bg-teal-600 hover:text-white" + }` + } onClick={() => setToggleMenu(false)} > {link.label} diff --git a/ui/src/components/ExecutionDropdown/index.css b/ui/src/components/ExecutionDropdown/index.css deleted file mode 100644 index b1fde1b56..000000000 --- a/ui/src/components/ExecutionDropdown/index.css +++ /dev/null @@ -1,20 +0,0 @@ -.dropdown { - position: relative; - display: inline-block; -} - -.dropdown-select { - appearance: none; - padding: 8px 16px; - font-size: 14px; - border: 1px solid #ccc; - border-radius: 4px; - outline: none; - cursor: pointer; - transition: border-color 0.3s ease; -} - -.dropdown-select:hover, -.dropdown-select:focus { - border-color: #4a90e2; -} diff --git a/ui/src/components/ExecutionDropdown/index.jsx b/ui/src/components/ExecutionDropdown/index.jsx index dacb4e773..7bf8bb090 100644 --- a/ui/src/components/ExecutionDropdown/index.jsx +++ b/ui/src/components/ExecutionDropdown/index.jsx @@ -14,24 +14,29 @@ const ExecutionDropdown = ({ data, exec_type, handleExecutionClick }) => { }; return ( -
- { + handleCallExecutionClick(event); + }} + > + {data.map((type, index) => ( - ); - })} - + ))} + +
- ); + ); }; export default ExecutionDropdown; diff --git a/ui/src/components/ExecutionTangledDropdown/index.css b/ui/src/components/ExecutionTangledDropdown/index.css index 725be25da..dd73574c6 100644 --- a/ui/src/components/ExecutionTangledDropdown/index.css +++ b/ui/src/components/ExecutionTangledDropdown/index.css @@ -1,4 +1,7 @@ -.dropdown { +/* Old code not using anymore, but keeping it here for */ +/* reference in case we want to use it in the future. */ + +/* .dropdown { position: relative; display: inline-block; margin-top: 2px; @@ -20,4 +23,4 @@ .dropdown-select:hover, .dropdown-select:focus { border-color: #4a90e2; -} +} */ diff --git a/ui/src/components/ExecutionTangledDropdown/index.jsx b/ui/src/components/ExecutionTangledDropdown/index.jsx index cb4be62ff..e72a72e23 100644 --- a/ui/src/components/ExecutionTangledDropdown/index.jsx +++ b/ui/src/components/ExecutionTangledDropdown/index.jsx @@ -1,37 +1,40 @@ -import React, { useState, useEffect } from "react"; +// Old code not using anymore, but keeping it here for +// reference in case we want to use it in the future. -const ExecutionTangledDropdown = ({ data, exec_type, handleTreeClick }) => { - const [selectedExecutionType, setSelectedExecutionType] = useState(""); +// import React, { useState, useEffect } from "react"; - useEffect(() => { - if (exec_type) { - setSelectedExecutionType(exec_type); - } - }, [exec_type]); +// const ExecutionTangledDropdown = ({ data, exec_type, handleTreeClick }) => { +// const [selectedExecutionType, setSelectedExecutionType] = useState(""); - const handleCallExecutionClick = (event) => { - handleTreeClick(event.target.value); - }; +// useEffect(() => { +// if (exec_type) { +// setSelectedExecutionType(exec_type); +// } +// }, [exec_type]); - return ( -
- -
- ); -}; +// const handleCallExecutionClick = (event) => { +// handleTreeClick(event.target.value); +// }; -export default ExecutionTangledDropdown; +// return ( +//
+// +//
+// ); +// }; + +// export default ExecutionTangledDropdown; diff --git a/ui/src/components/ExecutionTree/index.jsx b/ui/src/components/ExecutionTree/index.jsx index bb94bd1c3..a7b0ea037 100644 --- a/ui/src/components/ExecutionTree/index.jsx +++ b/ui/src/components/ExecutionTree/index.jsx @@ -293,11 +293,7 @@ const ExecutionTree = ({ data }) => { return (
{chart}
diff --git a/ui/src/components/Footer/index.jsx b/ui/src/components/Footer/index.jsx index d39005d03..5b2819210 100644 --- a/ui/src/components/Footer/index.jsx +++ b/ui/src/components/Footer/index.jsx @@ -18,7 +18,7 @@ import React from "react"; function Footer() { return ( -