fixed issue with modular pipelines highlight

.eslintrc.json

@@ -4,7 +4,7 @@
     "curly": ["error"],
     "valid-typeof": ["error"],
     "camelcase": "error",
-    "id-length": ["error", { "min": 3, "exceptions": ["_","a","b","d","e","i","j","k","x","y","id","el","pi","PI","up"] }],
+    "id-length": ["error", { "min": 3, "exceptions": ["_","a","b","d","e","i","j","k","x","y","id","el","pi","PI","up","fs"] }],
     "no-var": ["error"],
     "lines-between-class-members": ["error", "always"]
   }

package.json

@@ -73,6 +73,7 @@
     "highlight.js": "^10.7.3",
     "kiwi.js": "^1.1.3",
     "lodash": "^4.17.21",
+    "path": "^0.12.7",
     "plotly.js-dist-min": "^2.26.0",
     "react-content-loader": "^6.2.0",
     "react-csv": "^2.2.2",
@@ -172,4 +173,4 @@
     "not op_mini all"
   ],
   "snyk": true
-}
+}

src/apollo/config.js

@@ -2,27 +2,71 @@ import fetch from 'cross-fetch';
 import {
   ApolloClient,
   InMemoryCache,
-  createHttpLink,
-  split,
+  HttpLink,
+  ApolloLink,
+  Observable,
 } from '@apollo/client';
-import { getMainDefinition } from '@apollo/client/utilities';
+import { onError } from '@apollo/client/link/error';
 import { sanitizedPathname } from '../utils';
+import loadJsonData from '../store/load-data';
 
-const httpLink = createHttpLink({
-  // our graphql endpoint, normally here: http://localhost:4141/graphql
-  uri: `${sanitizedPathname()}graphql`,
+const apiBaseUrl = `${sanitizedPathname()}graphql`;
+
+// Create a link to handle static file fetching
+const staticFileLink = new ApolloLink((operation, forward) => {
+  return new Observable((observer) => {
+    (async () => {
+      const staticFilePath = `/data/${operation.operationName}.json`;
+      try {
+        const staticData = await loadJsonData(staticFilePath, null);
+        if (staticData) {
+          observer.next({ data: staticData });
+          observer.complete();
+        } else {
+          forward(operation).subscribe({
+            next: observer.next.bind(observer),
+            error: observer.error.bind(observer),
+            complete: observer.complete.bind(observer),
+          });
+        }
+      } catch (error) {
+        forward(operation).subscribe({
+          next: observer.next.bind(observer),
+          error: observer.error.bind(observer),
+          complete: observer.complete.bind(observer),
+        });
+      }
+    })();
+  });
+});
+
+// Create an HTTP link for GraphQL API calls
+const httpLink = new HttpLink({
+  uri: apiBaseUrl,
   fetch,
 });
 
-const splitLink = split(({ query }) => {
-  const definition = getMainDefinition(query);
+// Error handling link
+const errorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    graphQLErrors.forEach(({ message, locations, path }) =>
+      console.log(
+        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+      )
+    );
+  }
+  if (networkError) {
+    console.log(`[Network error]: ${networkError}`);
+  }
+});
 
-  return definition.kind === 'OperationDefinition';
-}, httpLink);
+// Combine the links
+const link = ApolloLink.from([staticFileLink, errorLink, httpLink]);
 
+// Create the Apollo Client
 export const client = new ApolloClient({
   connectToDevTools: true,
-  link: splitLink,
+  link: link,
   cache: new InMemoryCache(),
   defaultOptions: {
     query: {

src/apollo/utils.js

@@ -13,6 +13,19 @@ export const useApolloQuery = (query, options) => {
   useEffect(() => {
     if (queryData !== undefined) {
       setData(queryData);
+
+      // Create a JSON dump of the query data
+      const jsonDump = (data) => {
+        // Convert the entire data object to JSON format with pretty-printing
+        const jsonContent = JSON.stringify(data, null, 2);
+
+        // Log the JSON content to console (simulating a JSON dump)
+        console.log('JSON Dump:', jsonContent);
+
+        // Optionally, you could save this data to a file or backend
+      };
+
+      jsonDump(queryData);
     }
   }, [queryData]);
 

src/components/flowchart/flowchart.js

@@ -3,7 +3,10 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { select } from 'd3-selection';
 import { updateChartSize, updateZoom } from '../../actions';
-import { toggleSingleModularPipelineExpanded } from '../../actions/modular-pipelines';
+import {
+  toggleSingleModularPipelineExpanded,
+  toggleModularPipelineActive,
+} from '../../actions/modular-pipelines';
 import {
   loadNodeData,
   toggleNodeHovered,
@@ -485,7 +488,11 @@ export class FlowChart extends Component {
    * @param {Object} node Datum for a single node
    */
   handleNodeMouseOver = (event, node) => {
-    this.props.onToggleNodeHovered(node.id);
+    if (node.type === 'modularPipeline') {
+      this.props.onToggleModularPipelineActive(node.id, true);
+    } else {
+      this.props.onToggleNodeHovered(node.id);
+    }
     node && this.showTooltip(event, node.fullName);
   };
 
@@ -552,8 +559,12 @@ export class FlowChart extends Component {
    * Remove a node's active state, hide tooltip, and dim linked nodes
    * @param {Object} node Datum for a single node
    */
-  handleNodeMouseOut = () => {
-    this.props.onToggleNodeHovered(null);
+  handleNodeMouseOut = (event, node) => {
+    if (node.type === 'modularPipeline') {
+      this.props.onToggleModularPipelineActive(node.id, false);
+    } else {
+      this.props.onToggleNodeHovered(null);
+    }
     this.hideTooltip();
   };
 
@@ -742,6 +753,9 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
   onToggleNodeClicked: (id) => {
     dispatch(toggleNodeClicked(id));
   },
+  onToggleModularPipelineActive: (modularPipelineIDs, active) => {
+    dispatch(toggleModularPipelineActive(modularPipelineIDs, active));
+  },
   onToggleNodeHovered: (nodeHovered) => {
     dispatch(toggleNodeHovered(nodeHovered));
   },

src/components/node-list/node-list-tree.js

@@ -73,7 +73,7 @@ const getModularPipelineRowData = ({
     type: 'modularPipeline',
     icon: 'modularPipeline',
     focusModeIcon: focusModeIcon,
-    active: false,
+    active: data.active,
     selected: false,
     faded: disabled || !checked,
     visible: !disabled && checked,