Merge branch 'main' into DLS_NEW_SAMPLE_VALVE

jmotow · web-flow · commit a78d90a95f8f · 2025-12-10T09:50:56.000+01:00
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/CopyPipelineButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/CopyPipelineButton.tsx
@@ -36,6 +36,7 @@ const CopyPipelineButton = ({
   const selectedPipeline = pipelines[selectedTag];
 
   const [name, setName] = useState(`Copy of ${baseName} [${tags[0] || ""}]`);
+  const [nameError, setNameError] = useState(false);
   const [description, setDescription] = useState(pipelineDescription);
   const [isNameManuallyEdited, setIsNameManuallyEdited] = useState(false);
 
@@ -92,9 +93,15 @@ const CopyPipelineButton = ({
       const errorMessage = isApiError(error)
         ? error.data.message
         : "Unknown error";
-      toast.error("Failed to copy pipeline", {
-        description: errorMessage,
-      });
+
+      if (errorMessage.startsWith("Invalid version")) {
+        setNameError(true);
+      } else {
+        toast.error("Failed to copy pipeline", {
+          description: errorMessage,
+        });
+      }
+
       console.error("Failed to copy pipeline:", error);
     }
   };
@@ -149,6 +156,9 @@ const CopyPipelineButton = ({
               placeholder="Enter pipeline name..."
               className="w-full px-3 py-2 border"
             />
+            {nameError && (
+              <span className="text-destructive">This name already exists</span>
+            )}
           </div>
 
           <div>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx
@@ -41,6 +41,7 @@ export const ParticipationSlider = ({
         min={min}
         max={max}
         className="w-[4rem] px-2 py-1 text-sm font-medium text-center border"
+        disabled={true}
       />
       <span className="text-sm text-gray-600">%</span>
     </div>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx
@@ -0,0 +1,24 @@
+const SaveOutputWarning = () => {
+  return (
+    <div className="text-muted-foreground border border-amber-400 my-2 p-2 bg-amber-200/50 w-1/2">
+      <b>Note 1</b>: The current implementation does not automatically infer the
+      best encoding device from the existing pipeline. Select the same device
+      that is already used by other blocks in your pipeline. To learn more,
+      refer to our documentation:{" "}
+      <a
+        href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/index.html"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="hover:text-classic-blue transition-colors underline"
+      >
+        link
+      </a>
+      .
+      <br />
+      <b>Note 2</b>: Selecting this option will negatively impact the
+      performance results.
+    </div>
+  );
+};
+
+export default SaveOutputWarning;
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx
@@ -41,6 +41,7 @@ export const StreamsSlider = ({
         min={min}
         max={max}
         className="w-[4rem] px-2 py-1 text-sm font-medium text-center border"
+        disabled={true}
       />
     </div>
   );
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/lib/timeUtils.ts b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/lib/timeUtils.ts
@@ -0,0 +1,12 @@
+export const formatElapsedTimeMillis = (milliseconds: number) => {
+  const seconds = milliseconds / 1000;
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}m ${secs}s`;
+};
+
+export const formatElapsedTimeSeconds = (seconds: number) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}m ${secs}s`;
+};
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx
@@ -19,6 +19,7 @@ import {
 import { Plus, X } from "lucide-react";
 import { ParticipationSlider } from "@/components/shared/ParticipationSlider";
 import DeviceSelect from "@/components/shared/DeviceSelect";
+import SaveOutputWarning from "@/components/shared/SaveOutputWarning.tsx";
 
 interface PipelineSelection {
   pipelineId: string;
@@ -43,7 +44,7 @@ const DensityTests = () => {
     streams_per_pipeline: PipelinePerformanceSpec[] | null;
     video_output_paths: { [key: string]: string[] } | null;
   } | null>(null);
-  const [videoOutputEnabled, setVideoOutputEnabled] = useState(true);
+  const [videoOutputEnabled, setVideoOutputEnabled] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [encoderDevice, setEncoderDevice] = useState<string>("CPU");
 
@@ -328,12 +329,7 @@ const DensityTests = () => {
                 />
               </div>
             )}
-            {videoOutputEnabled && (
-              <div className="text-muted-foreground">
-                Note: Select the device that is used in other blocks in your
-                pipeline.
-              </div>
-            )}
+            {videoOutputEnabled && <SaveOutputWarning />}
           </div>
 
           <button
@@ -349,7 +345,7 @@ const DensityTests = () => {
           </button>
 
           {jobId && jobStatus && (
-            <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800">
+            <div className="m-4 p-3 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800">
               <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
                 Test Status: {jobStatus.state}
               </p>
@@ -368,7 +364,7 @@ const DensityTests = () => {
           )}
 
           {errorMessage && (
-            <div className="mb-4 p-3 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800">
+            <div className="my-4 p-3 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800">
               <p className="text-sm font-medium text-red-900 dark:text-red-100 mb-2">
                 Test Failed
               </p>
@@ -379,7 +375,7 @@ const DensityTests = () => {
           )}
 
           {testResult && (
-            <div className="mb-4 p-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800">
+            <div className="my-4 p-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800">
               <p className="text-sm font-medium text-green-900 dark:text-green-100 mb-2">
                 Test Completed Successfully
               </p>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx
@@ -151,7 +151,7 @@ const Home = () => {
           <div className="flex gap-3">
             <BookOpen className="w-6 h-6 text-classic-blue shrink-0" />
             <a
-              href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/get-started.html"
+              href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/index.html"
               target="_blank"
               rel="noopener noreferrer"
               className="hover:text-classic-blue transition-colors"
@@ -166,7 +166,7 @@ const Home = () => {
           <div className="flex gap-3">
             <Sparkles className="w-6 h-6 text-classic-blue shrink-0" />
             <a
-              href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/release-notes.html"
+              href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/index.html"
               target="_blank"
               rel="noopener noreferrer"
               className="hover:text-classic-blue transition-colors"
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Jobs.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Jobs.tsx
@@ -1,8 +1,8 @@
 import { Link, useLocation } from "react-router";
 import {
-  useGetPerformanceStatusesQuery,
   useGetDensityStatusesQuery,
   useGetOptimizationStatusesQuery,
+  useGetPerformanceStatusesQuery,
 } from "@/api/api.generated";
 import {
   Table,
@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/table";
 import { format } from "date-fns";
 import { PipelineName } from "@/components/shared/PipelineName";
+import { formatElapsedTimeMillis } from "@/lib/timeUtils.ts";
 
 const Jobs = () => {
   const location = useLocation();
@@ -43,13 +44,6 @@ const Jobs = () => {
     { id: "optimize", label: "Optimize", path: "/jobs/optimize" },
   ];
 
-  const formatElapsedTime = (milliseconds: number) => {
-    const seconds = milliseconds / 1000;
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}m ${secs}s`;
-  };
-
   const formatTimestamp = (timestamp: number) => {
     return format(new Date(timestamp), "MMM d, yyyy HH:mm:ss");
   };
@@ -154,7 +148,7 @@ const Jobs = () => {
                             {formatTimestamp(job.start_time)}
                           </TableCell>
                           <TableCell>
-                            {formatElapsedTime(job.elapsed_time)}
+                            {formatElapsedTimeMillis(job.elapsed_time)}
                           </TableCell>
                           <TableCell>
                             {job.total_fps !== null
@@ -227,7 +221,7 @@ const Jobs = () => {
                             {formatTimestamp(job.start_time)}
                           </TableCell>
                           <TableCell>
-                            {formatElapsedTime(job.elapsed_time)}
+                            {formatElapsedTimeMillis(job.elapsed_time)}
                           </TableCell>
                           <TableCell>
                             {job.total_fps !== null
@@ -317,7 +311,7 @@ const Jobs = () => {
                             {formatTimestamp(job.start_time)}
                           </TableCell>
                           <TableCell>
-                            {formatElapsedTime(job.elapsed_time)}
+                            {formatElapsedTimeMillis(job.elapsed_time)}
                           </TableCell>
                           <TableCell>
                             {job.total_fps !== null
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/PerformanceTests.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/PerformanceTests.tsx
@@ -17,6 +17,7 @@ import {
 import { Plus, X } from "lucide-react";
 import { StreamsSlider } from "@/components/shared/StreamsSlider";
 import DeviceSelect from "@/components/shared/DeviceSelect";
+import SaveOutputWarning from "@/components/shared/SaveOutputWarning.tsx";
 
 interface PipelineSelection {
   pipelineId: string;
@@ -41,7 +42,7 @@ const PerformanceTests = () => {
       [key: string]: string[];
     } | null;
   } | null>(null);
-  const [videoOutputEnabled, setVideoOutputEnabled] = useState(true);
+  const [videoOutputEnabled, setVideoOutputEnabled] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [encoderDevice, setEncoderDevice] = useState<string>("CPU");
 
@@ -306,12 +307,7 @@ const PerformanceTests = () => {
               />
             </div>
           )}
-          {videoOutputEnabled && (
-            <div className="text-muted-foreground">
-              Note: Select the device that is used in other blocks in your
-              pipeline.
-            </div>
-          )}
+          {videoOutputEnabled && <SaveOutputWarning />}
         </div>
 
         <button
@@ -327,7 +323,7 @@ const PerformanceTests = () => {
         </button>
 
         {jobId && jobStatus && (
-          <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800">
+          <div className="my-4 p-3 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800">
             <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
               Test Status: {jobStatus.state}
             </p>
@@ -346,7 +342,7 @@ const PerformanceTests = () => {
         )}
 
         {errorMessage && (
-          <div className="mb-4 p-3 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800">
+          <div className="my-4 p-3 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800">
             <p className="text-sm font-medium text-red-900 dark:text-red-100 mb-2">
               Test Failed
             </p>
@@ -357,7 +353,7 @@ const PerformanceTests = () => {
         )}
 
         {testResult && (
-          <div className="mb-4 p-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800">
+          <div className="my-4 p-3 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800">
             <p className="text-sm font-medium text-green-900 dark:text-green-100 mb-2">
               Test Completed Successfully
             </p>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Pipelines.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Pipelines.tsx
@@ -625,6 +625,23 @@ const Pipelines = () => {
               />
             )}
           </div>
+          {videoOutputEnabled && (
+            <div className="text-muted-foreground border border-amber-400 my-2 p-2 bg-amber-200/50 w-[634px]">
+              <b>Note</b>: The current implementation does not automatically
+              infer the best encoding device from the existing pipeline. Select
+              the same device that is already used by other blocks in your
+              pipeline. To learn more, refer to our documentation:{" "}
+              <a
+                href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/index.html"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-classic-blue transition-colors underline"
+              >
+                link
+              </a>
+              .
+            </div>
+          )}
         </div>
       </div>
     );
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Videos.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Videos.tsx
@@ -8,6 +8,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table.tsx";
+import { formatElapsedTimeSeconds } from "@/lib/timeUtils.ts";
 
 const Videos = () => {
   const { data: videos, isSuccess } = useGetVideosQuery();
@@ -27,8 +28,8 @@ const Videos = () => {
             <TableHeader>
               <TableRow>
                 <TableHead className="w-[25%]">File name</TableHead>
-                <TableHead>Size</TableHead>
-                <TableHead>Frames</TableHead>
+                <TableHead>Resolution</TableHead>
+                <TableHead>Number of frames</TableHead>
                 <TableHead>Codec</TableHead>
                 <TableHead>Duration</TableHead>
                 <TableHead></TableHead>
@@ -45,7 +46,9 @@ const Videos = () => {
                   </TableCell>
                   <TableCell>{video.frame_count}</TableCell>
                   <TableCell>{video.codec}</TableCell>
-                  <TableCell>{video.duration}</TableCell>
+                  <TableCell>
+                    {formatElapsedTimeSeconds(video.duration)}
+                  </TableCell>
                   <TableCell>
                     <video
                       src={`/assets/videos/input/${video.filename}`}
