Fixed multipipelining

src/views/jobs/JobPipelineDisplay.jsx

@@ -122,7 +122,7 @@ function JobPipelineDisplay(props) {
                 disableGutters={true}
                 square
                 key={j}
-                onClick={selectJob(test)}
+                onClick={selectJob(test.name)}
               >
                 <AccordionSummary
                   style={{
@@ -134,11 +134,11 @@ function JobPipelineDisplay(props) {
                     component={"span"}
                     style={{ wordBreak: "break-word", margin: "auto 0" }}
                   >
-                    {test}
+                    {test.name}
                   </Typography>
                   <Stack sx={{ ml: "auto" }}>
                     <IconButton aria-label="retry" component="span">
-                      {jobIcon(test)}
+                      {jobIcon(test.name)}
                     </IconButton>
                   </Stack>
                 </AccordionSummary>

src/views/jobs/Jobs.jsx

@@ -35,7 +35,7 @@ export default function Jobs() {
             justifyContent="center"
             sx={{ flexFlow: "wrap" }}
           >
-            <Typography variant="h4">No jobs found! </Typography>{" "}
+            <Typography variant="h4">No jobs found!</Typography>
           </Box>
           <Box
             display="flex"
@@ -49,7 +49,9 @@ export default function Jobs() {
           </Box>
         </React.Fragment>
       ) : null}
+
       <JobBuilder />
+
       {location.hash === "" && (
         <React.Fragment>
           {jobState.jobs

src/views/jobs/builder/PipelineSelector.jsx

@@ -17,8 +17,8 @@ function PipelineSelector(props) {
     if (isLoading) return {};
     const primaryMappings = {};
     for (var pm of pipelineMappings) {
-      if (!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
-      primaryMappings[pm[0]].push(pm);
+      if (!(pm[0].name in primaryMappings)) primaryMappings[pm[0].name] = [];
+      primaryMappings[pm[0].name].push(pm);
     }
     return primaryMappings;
   };
@@ -54,8 +54,10 @@ function PipelineSelector(props) {
                 component={"span"}
                 style={{ wordBreak: "break-word", margin: "auto 0" }}
                 color={
-                  (cache.primarySelectedMappings ?? [[]])[0][0] === k
-                    ? "primary"
+                  cache.primarySelectedMappings
+                    ? cache.primarySelectedMappings[0][0].name === k
+                      ? "primary"
+                      : null
                     : null
                 }
               >

src/views/jobs/builder/PipelineTrackSelector.jsx

@@ -27,7 +27,7 @@ function PipelineTrackSelector(props) {
   const removeTrack = (test) => {
     const { tracks } = cache;
     for (var i in tracks) {
-      const index = tracks[i].indexOf(test);
+      const index = tracks[i].findIndex((t) => t.name === test.name);
       if (index === -1) continue;
       tracks[i] = tracks[i].slice(0, index);
     }
@@ -35,12 +35,13 @@ function PipelineTrackSelector(props) {
   };
 
   const selectTrack = (test) => () => {
-    if (as1d(cache.tracks).includes(test)) return removeTrack(test);
+    if (as1d(cache.tracks).find((t) => t.name === test.name))
+      return removeTrack(test);
     addTrack(test);
   };
 
   const getColor = (test) =>
-    as1d(cache.tracks).includes(test) ? "primary" : null;
+    as1d(cache.tracks).find((t) => t.name === test.name) ? "primary" : null;
 
   const nextClick = () => {
     setCache({
@@ -79,7 +80,7 @@ function PipelineTrackSelector(props) {
                       style={{ wordBreak: "break-word", margin: "auto 0" }}
                       color={getColor(test)}
                     >
-                      {test}
+                      {test.name}
                     </Typography>
                     <Stack sx={{ ml: "auto" }}>I</Stack>
                   </AccordionSummary>