General cleanup

package.json

@@ -32,12 +32,12 @@
     "@niivue/niivue": "^0.41.1",
     "@patternfly/react-catalog-view-extension": "^5.0.0",
     "@patternfly/react-charts": "^7.1.2",
-    "@patternfly/react-core": "^5.2.3",
+    "@patternfly/react-core": "^5.3.1",
     "@patternfly/react-log-viewer": "^5.1.0",
-    "@patternfly/react-table": "^5.2.4",
+    "@patternfly/react-table": "^5.3.1",
     "@react-hook/resize-observer": "^1.2.6",
     "@tanstack/react-query": "^5.17.15",
-    "antd": "^5.14.1",
+    "antd": "^5.16.4",
     "axios": "^1.6.5",
     "chris-utility": "^1.1.6",
     "d3-hierarchy": "^1.1.9",
@@ -56,7 +56,7 @@
     "micromark": "^4.0.0",
     "micromark-extension-gfm": "^3.0.0",
     "niivue-react": "github:niivue/niivue-react",
-    "npm": "^10.4.0",
+    "npm": "^10.6.0",
     "pako": "^1.0.11",
     "preval.macro": "^5.0.0",
     "query-string": "^9.0.0",

src/App.tsx

@@ -1,18 +1,18 @@
+import "@patternfly/react-core/dist/styles/base.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConfigProvider, theme } from "antd";
 import { useContext } from "react";
+import { CookiesProvider } from "react-cookie";
+import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Store } from "redux";
 //@ts-ignore
 import useAckee from "use-ackee";
-import Routes from "./routes";
-import { ConfigProvider, theme } from "antd";
-import { Store } from "redux";
-import { Provider } from "react-redux";
-import { CookiesProvider } from "react-cookie";
-import { RootState } from "./store/root/applicationState";
-import "@patternfly/react-core/dist/styles/base.css";
 import "./app.css";
-import "./components/Feeds/Feeds.css";
 import { ThemeContext } from "./components/DarkTheme/useTheme";
+import "./components/Feeds/Feeds.css";
+import Routes from "./routes";
+import { RootState } from "./store/root/applicationState";
 
 interface AllProps {
   store: Store<RootState>;

src/app.css

@@ -76,10 +76,10 @@
 }
 
 .button-style {
-  border-radius: 50%;
-  padding:1rem;
-  border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  border-radius: 50% !important;
+  padding:1rem !important;
+  border: none !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
 }

src/components/FeedDetails/index.tsx

@@ -12,7 +12,6 @@ import {
   BrainIcon,
   CodeBranchIcon,
   FeedBrowserIcon,
-  DuplicateIcon as FolderTreeIcon,
   NodeDetailsPanelIcon,
   NoteEditIcon,
   PreviewIcon,

src/components/FeedTree/FeedTree.tsx

@@ -85,7 +85,7 @@ const FeedTree = (props: OwnProps) => {
     (state) => state.feed,
   );
   const [feedTree, setFeedTree] = React.useState<{
-    nodes?: HierarychyPointNode<TreeNodeDatum>[];
+    nodes?: HierarchyPointNode<TreeNodeDatum>[];
     links?: HierarchyPointLink<TreeNodeDatum>[];
   }>({
     nodes: [],
@@ -120,60 +120,66 @@ const FeedTree = (props: OwnProps) => {
         nodes = rootNode.descendants();
         links = rootNode.links();
 
-        const newLinksToAdd = [];
+        const newLinksToAdd: HierarchyPointLink<TreeNodeDatum>[] = [];
 
-        if (tsIds) {
+        if (tsIds && Object.keys(tsIds).length > 0) {
           for (const link of links) {
-            // Extract target and source IDs from the link
             const targetId = link.target.data.id;
-            const sourceId = link.target.data.id; // Corrected to use link.target.data.id
+            const sourceId = link.source.data.id;
 
             // Check if targetId and sourceId exist and if at least one of them is in 'tsIds'
             if (targetId && sourceId && (tsIds[targetId] || tsIds[sourceId])) {
               // 'tsPlugin' found
 
-              // Determine the topological link based on 'tsIds'
-              let topologicalLink: any;
+              let topologicalLink:
+                | HierarchyPointNode<TreeNodeDatum>
+                | undefined;
 
               if (tsIds[targetId]) {
                 topologicalLink = link.target;
               } else {
                 topologicalLink = link.source;
               }
 
-              // Get the parents from 'tsIds'
-              const parents = tsIds[topologicalLink.data.id];
-
-              // Create a dictionary to store unique source and target nodes
-              const dict: { [key: string]: any } = {};
-
-              // Iterate over all links to find nodes related to parents
-              for (const innerLink of links) {
-                for (let i = 0; i < parents.length; i++) {
-                  // Check if the source ID matches any parent and it is not already in the dictionary
-                  if (
-                    innerLink.source.data.id === parents[i] &&
-                    !dict[innerLink.source.data.id]
-                  ) {
-                    dict[innerLink.source.data.id] = innerLink.source;
+              // Check if 'topologicalLink' is defined
+              if (topologicalLink.data.id) {
+                const parents = tsIds[topologicalLink.data.id];
+
+                // Check if 'parents' is defined and not empty
+                if (parents && parents.length > 0) {
+                  const dict: {
+                    [key: string]: HierarchyPointNode<TreeNodeDatum>;
+                  } = {};
+
+                  for (const innerLink of links) {
+                    if (innerLink.source && innerLink.target) {
+                      for (let i = 0; i < parents.length; i++) {
+                        if (
+                          innerLink.source.data.id === parents[i] &&
+                          !dict[innerLink.source.data.id]
+                        ) {
+                          dict[innerLink.source.data.id] = innerLink.source;
+                        }
+                        if (
+                          innerLink.target.data.id === parents[i] &&
+                          !dict[innerLink.target.data.id]
+                        ) {
+                          dict[innerLink.target.data.id] = innerLink.target;
+                        }
+                      }
+                    }
                   }
-                  // Check if the target ID matches any parent and it is not already in the dictionary
-                  else if (
-                    innerLink.target.data.id === parents[i] &&
-                    !dict[innerLink.target.data.id]
-                  ) {
-                    dict[innerLink.target.data.id] = innerLink.target;
+
+                  for (const key in dict) {
+                    if (Object.prototype.hasOwnProperty.call(dict, key)) {
+                      newLinksToAdd.push({
+                        source: dict[key],
+                        target: topologicalLink,
+                      });
+                    }
                   }
                 }
               }
-
-              // Add new links to the array based on the dictionary
-              for (const i in dict) {
-                newLinksToAdd.push({
-                  source: dict[i],
-                  target: topologicalLink,
-                });
-              }
             }
           }
         }

src/components/FeedTree/data.ts

@@ -1,6 +1,7 @@
 import {
   PipelinePipingDefaultParameterList,
   PluginInstance,
+  PluginInstanceParameter,
   PluginParameter,
   PluginPiping,
 } from "@fnndsc/chrisapi";

src/components/Feeds/FeedListView.tsx

@@ -16,7 +16,6 @@ import {
   ToggleGroupItemProps,
   Tooltip,
 } from "@patternfly/react-core";
-import { SearchIcon } from "../Icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useQuery } from "@tanstack/react-query";
 import { Typography } from "antd";
@@ -40,6 +39,7 @@ import CreateFeed from "../CreateFeed/CreateFeed";
 import { CreateFeedProvider } from "../CreateFeed/context";
 import { ThemeContext } from "../DarkTheme/useTheme";
 import IconContainer from "../IconContainer";
+import { SearchIcon } from "../Icons";
 import { PipelineProvider } from "../PipelinesCopy/context";
 import WrapperConnect from "../Wrapper";
 import { usePaginate, useSearchQueryParams } from "./usePaginate";
@@ -168,12 +168,16 @@ const TableSelectable: React.FunctionComponent = () => {
     type === "private"
       ? data?.totalFeedsCount === -1
         ? 0
-        : data?.totalFeedsCount || "Fetching..."
+        : data?.totalFeedsCount
       : publicFeeds?.totalFeedsCount === -1
         ? 0
-        : publicFeeds?.totalFeedsCount || "Fetching...";
+        : publicFeeds?.totalFeedsCount;
+
+  const generatePagination = (feedCount?: number) => {
+    if (!feedCount) {
+      return <Skeleton width="25%" screenreaderText="Loaded Feed Count" />;
+    }
 
-  const generatePagination = () => {
     return (
       <Pagination
         itemCount={feedCount}
@@ -191,7 +195,9 @@ const TableSelectable: React.FunctionComponent = () => {
         <PageSection className="feed-header">
           <InfoIcon
             data-test-id="analysis-count"
-            title={`New and Existing Analyses (${feedCount})`}
+            title={`New and Existing Analyses (${
+              !feedCount ? "Fetching..." : feedCount
+            })`}
             p1={
               <Paragraph>
                 Analyses (aka ChRIS feeds) are computational experiments where
@@ -227,7 +233,7 @@ const TableSelectable: React.FunctionComponent = () => {
                 />
               </ToggleGroup>
             </div>
-            {generatePagination()}
+            {generatePagination(feedCount)}
           </div>
           <div className="feed-list__split">
             <DataTableToolbar

src/components/LibraryCopy/BreadcrumbContainer.tsx

@@ -23,7 +23,7 @@ const BreadcrumbContainer = ({
                 handleFolderClick("/" + newPath);
               }
             }}
-            key={index}
+            key={`${path}`}
             to="#"
           >
             {index === 0 ? <HomeIcon /> : path}

src/components/LibraryCopy/Cart.tsx

@@ -218,7 +218,7 @@ export default function Cart() {
               </>
             }
             style={{ width: "100%", marginTop: "3em", padding: "2em" }}
-          ></Alert>
+          />
           {alert && <Alert type="error" description={alert} />}
           {progress.currentProgress > 0 && (
             <Progress
@@ -229,7 +229,6 @@ export default function Cart() {
         </AlertGroup>
       </>
     );
-  } else {
-    return null;
   }
+  return null;
 }

src/components/PipelinesCopy/Tree.tsx

@@ -126,52 +126,58 @@ const Tree = (props: TreeProps) => {
       const rootNode = d3Tree(hierarchy(data[0]));
       nodes = rootNode.descendants();
       links = rootNode.links();
-      const newLinksToAdd = [];
+      const newLinksToAdd: HierarchyPointLink<TreeNode>[] = [];
 
-      if (tsIds) {
+      if (tsIds && Object.keys(tsIds).length > 0) {
         for (const link of links) {
           const targetId = link.target.data.id;
-          const sourceId = link.target.data.id;
+          const sourceId = link.source.data.id;
 
           if (targetId && sourceId && (tsIds[targetId] || tsIds[sourceId])) {
             // tsPlugin found
-            let topologicalLink: any;
+            let topologicalLink: HierarchyPointNode<TreeNode> | undefined;
 
             if (tsIds[targetId]) {
               topologicalLink = link.target;
             } else {
               topologicalLink = link.source;
             }
 
-            const parents = tsIds[topologicalLink.data.id];
-            const dict: { [key: string]: any } = {};
-
-            // Iterate over all links to find nodes related to parents
-            for (const innerLink of links) {
-              for (let i = 0; i < parents.length; i++) {
-                // Check if the source ID matches any parent and it is not already in the dictionary
-                if (
-                  innerLink.source.data.id === parents[i] &&
-                  !dict[innerLink.source.data.id]
-                ) {
-                  dict[innerLink.source.data.id] = innerLink.source;
+            if (topologicalLink) {
+              const parents = tsIds[topologicalLink.data.id];
+              if (parents && parents.length > 0) {
+                const dict: { [key: string]: HierarchyPointNode<TreeNode> } =
+                  {};
+
+                // Iterate over all links to find nodes related to parents
+                for (const innerLink of links) {
+                  if (innerLink.source && innerLink.target) {
+                    for (let i = 0; i < parents.length; i++) {
+                      if (
+                        innerLink.source.data.id === parents[i] &&
+                        !dict[innerLink.source.data.id]
+                      ) {
+                        dict[innerLink.source.data.id] = innerLink.source;
+                      } else if (
+                        innerLink.target.data.id === parents[i] &&
+                        !dict[innerLink.target.data.id]
+                      ) {
+                        dict[innerLink.target.data.id] = innerLink.target;
+                      }
+                    }
+                  }
                 }
-                // Check if the target ID matches any parent and it is not already in the dictionary
-                else if (
-                  innerLink.target.data.id === parents[i] &&
-                  !dict[innerLink.target.data.id]
-                ) {
-                  dict[innerLink.target.data.id] = innerLink.target;
+
+                for (const key in dict) {
+                  if (Object.prototype.hasOwnProperty.call(dict, key)) {
+                    newLinksToAdd.push({
+                      source: dict[key],
+                      target: topologicalLink,
+                    });
+                  }
                 }
               }
             }
-
-            for (const i in dict) {
-              newLinksToAdd.push({
-                source: dict[i],
-                target: topologicalLink,
-              });
-            }
           }
         }
       }