Fix: lambda python functions not rendering correctly on flowchart

RELEASE.md

@@ -8,6 +8,7 @@ Please follow the established format:
 
 ## Bug fixes and other changes
 
+- Fix lambda and partial Python functions not rendering correctly on flowchart. (#851)
 - Add tooltip label text to page-navigation links. (#846)
 
 # Release 4.5.0

demo-project/src/demo_project/pipelines/data_ingestion/pipeline.py

@@ -54,6 +54,11 @@ def create_pipeline(**kwargs) -> Pipeline:
                 outputs=["prm_shuttle_company_reviews", "prm_spine_table"],
                 name="combine_step",
             ),
+            node(
+                func=lambda x: x,
+                inputs='x',
+                outputs='y'
+            )
         ],
         namespace="ingestion",  # provide inputs
         inputs={"reviews", "shuttles", "companies"},  # map inputs outside of namespace

package/kedro_viz/models/graph.py

@@ -43,10 +43,6 @@ def _strip_namespace(name: str) -> str:
     return re.sub(pattern, "", name)
 
 
-def _strip_tags(name: str) -> str:
-    return name.replace("<", "&lt;").replace(">", "&gt;")
-
-
 def _parse_filepath(dataset_description: Dict[str, Any]) -> Optional[str]:
     filepath = dataset_description.get("filepath") or dataset_description.get("path")
     return str(filepath) if filepath else None
@@ -185,8 +181,8 @@ def create_task_node(cls, node: KedroNode) -> "TaskNode":
         node_name = node._name or node._func_name
         return TaskNode(
             id=cls._hash(str(node)),
-            name=_pretty_name(_strip_tags(node_name)),
-            full_name=_strip_tags(node_name),
+            name=_pretty_name(node_name),
+            full_name=node_name,
             tags=set(node.tags),
             kedro_obj=node,
         )

package/tests/test_models/test_graph/test_graph_nodes.py

@@ -326,8 +326,8 @@ def test_task_node_metadata_with_partial_func(self):
         )
         task_node = GraphNode.create_task_node(kedro_node)
         task_node_metadata = TaskNodeMetadata(task_node=task_node)
-        assert task_node.name == "<partial>"
-        assert task_node.full_name == "<partial>"
+        assert task_node.name == "<partial>"
+        assert task_node.full_name == "<partial>"
         assert not hasattr(task_node_metadata, "code")
         assert not hasattr(task_node_metadata, "filepath")
         assert task_node_metadata.parameters == {}

src/components/metadata/metadata.js

@@ -74,10 +74,7 @@ const MetaData = ({
                   className="pipeline-metadata__icon"
                   icon={nodeTypeIcon}
                 />
-                <h2
-                  className="pipeline-metadata__title"
-                  dangerouslySetInnerHTML={{ __html: metadata.name }}
-                />
+                <h2 className="pipeline-metadata__title">{metadata.name}</h2>
               </div>
               <IconButton
                 container={React.Fragment}

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

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { changed } from '../../utils';
+import { changed, replaceMatches } from '../../utils';
 import NodeIcon from '../icons/node-icon';
 import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
@@ -11,6 +11,13 @@ import { getNodeActive } from '../../selectors/nodes';
 // The exact fixed height of a row as measured by getBoundingClientRect()
 export const nodeListRowHeight = 37;
 
+// HTML tags to replace partial and curry Python functions so we
+// don't get a conflict with using dangerouslySetInnerHTML
+const stringsToReplace = {
+  '<lambda>': '&lt;lambda&gt;',
+  '<partial>': '&lt;partial&gt;',
+};
+
 /**
  * Returns `true` if there are no props changes, therefore the last render can be reused.
  * Performance: Checks only the minimal set of props known to change after first render.
@@ -124,7 +131,9 @@ const NodeListRow = memo(
                 'pipeline-nodelist__row__label--disabled': disabled,
               }
             )}
-            dangerouslySetInnerHTML={{ __html: label }}
+            dangerouslySetInnerHTML={{
+              __html: replaceMatches(label, stringsToReplace),
+            }}
           />
         </TextButton>
         {typeof count === 'number' && (

src/utils/index.js

@@ -59,3 +59,21 @@ export const changed = (props, objectA, objectB) => {
     objectA && objectB && props.some((prop) => objectA[prop] !== objectB[prop])
   );
 };
+
+/**
+ * Replace any parts of a string that match the keys in the toReplace object
+ * @param {string} str The string to check
+ * @param {object} toReplace The object of strings to replace and their replacements
+ * @returns {string} The string with or without replaced values
+ */
+export const replaceMatches = (str, toReplace) => {
+  if (str?.length > 0) {
+    const regex = new RegExp(Object.keys(toReplace).join('|'), 'gi');
+
+    return str.replace(regex, (matched) => {
+      return toReplace[matched];
+    });
+  } else {
+    return str;
+  }
+};

src/utils/utils.test.js

@@ -1,4 +1,4 @@
-import { arrayToObject, getUrl, unique } from './index';
+import { arrayToObject, getUrl, unique, replaceMatches } from './index';
 
 describe('utils', () => {
   describe('arrayToObject', () => {
@@ -46,4 +46,17 @@ describe('utils', () => {
       expect([1, 1, 2, 2, 3, 3, 1].filter(unique)).toEqual([1, 2, 3]);
     });
   });
+
+  describe('replaceMatches', () => {
+    const entitiesToReplace = {
+      '&lt;': '<',
+      '&gt;': '>',
+    };
+
+    it('replaces matched characters from a string', () => {
+      expect(replaceMatches('&lt;lambda&gt;', entitiesToReplace)).toEqual(
+        '<lambda>'
+      );
+    });
+  });
 });