FLOW-1037 null svg element check added

Author: vikas-cldcvr

packages/flow-lineage/src/components/f-lineage/f-lineage.ts

@@ -624,12 +624,16 @@ export class FLineage extends FRoot {
 	/* eslint-disable @typescript-eslint/no-unused-vars */
 	/* eslint-disable @typescript-eslint/ban-ts-comment */
 	// @ts-ignore
-	doTemplateHotUpdate(node: LineageNodeElement, nodeSVGElement: HTMLElement, isChildNode = false) {
+	doTemplateHotUpdate(
+		node: LineageNodeElement,
+		nodeSVGElement: HTMLElement | null,
+		isChildNode = false
+	) {
 		try {
 			if (isChildNode) {
-				if (node.fNodeTemplate) {
+				if (node.fNodeTemplate && nodeSVGElement) {
 					render(node.fNodeTemplate(node), nodeSVGElement);
-				} else if (this["children-node-template"]) {
+				} else if (this["children-node-template"] && nodeSVGElement) {
 					render(this["children-node-template"](node), nodeSVGElement);
 				}
 			} else {
@@ -639,9 +643,9 @@ export class FLineage extends FRoot {
 				} else {
 					node.childrenToggle = html``;
 				}
-				if (node.fNodeTemplate) {
+				if (node.fNodeTemplate && nodeSVGElement) {
 					render(node.fNodeTemplate(node), nodeSVGElement);
-				} else if (this["node-template"]) {
+				} else if (this["node-template"] && nodeSVGElement) {
 					render(this["node-template"](node), nodeSVGElement);
 				}
 			}

stories/flow-lineage/lineage-properties.mdx

@@ -500,13 +500,13 @@ node-id-1: { //Unique node id for each node
 
 Each node is identified by a unique ID.
 
-<div class="split">
+<div className="split">
 	<div>
-		<div class="title">Node example</div>
+		<div className="title">Node example</div>
 		<img src={imageFile} />
 	</div>
 	<div>
-		<div class="title">Node data example</div>
+		<div className="title">Node data example</div>
 		<pre>
 			<code>{`tony: {                       //Unique node ID
 	fData: {
@@ -524,13 +524,13 @@ Each node is identified by a unique ID.
 
 Nodes are represented through templates, you can pass custom markup to create a custom nodes.
 
-<div class="split">
+<div className="split">
 	<div>
-		<div class="title">Node example</div>
+		<div className="title">Node example</div>
 		<img src={nodeTemplateImg} />
 	</div>
 	<div>
-		<div class="title">Node data example</div>
+		<div className="title">Node data example</div>
 		<pre>
 			<code>{`tony: {
 	fNodeTemplate:\`<f-div direction="secondary" width="100%" height="hug-content" align="top-left">
@@ -552,13 +552,13 @@ The data required by each node needs to be present in the node schema.
 
 ###### Note: Use “\$\{node.data.key}” to access fData in your node template.
 
-<div class="split">
+<div className="split">
 	<div>
-		<div class="title">Node example</div>
+		<div className="title">Node example</div>
 		<img src={templateDataImg} />
 	</div>
 	<div>
-		<div class="title">Node data example</div>
+		<div className="title">Node data example</div>
 		<pre>
 			<code>{`tony: {
 	fData: {	//Data goes here
@@ -577,13 +577,13 @@ The data required by each node needs to be present in the node schema.
 
 Each node can have fChildren.
 
-<div class="split">
+<div className="split">
 	<div>
-		<div class="title">Node example</div>
+		<div className="title">Node example</div>
 		<img src={childrenImg} />
 	</div>
 	<div>
-		<div class="title">Node data example</div>
+		<div className="title">Node data example</div>
 		<pre>
 			<code>
 				{`tony: {                       //Unique node ID
@@ -613,12 +613,12 @@ Boolean that defines whether node children will be visible on load or not.
 
 ###### Note: On load, all node children are collpased/hidden. Clicking on a node will reveal its children
 
-<div class="split">
+<div className="split">
 	<div>
-		<div class="title">Node example</div>
+		<div className="title">Node example</div>
 	</div>
 	<div>
-		<div class="title">Node data example</div>
+		<div className="title">Node data example</div>
 		<pre>add code here</pre>
 	</div>
 </div>