hide null keys from node

src/containers/LiveEditor/CustomNode.tsx

@@ -90,22 +90,25 @@ const CustomNode = ({ nodeProps }) => {
             <StyledForeignObject width={width} height={height} x={0} y={0}>
               <StyledTextWrapper>
                 <StyledText width={width} height={height}>
-                  {entries.map((val) => (
-                    <div
-                      key={nodeProps.id}
-                      style={{
-                        height: "fit-content",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        padding: '0 auto',
-                        width: width - 20
-                      }}
-                    >
-                      <StyledKey>{val[0]}: </StyledKey>
-                      {val[1]}
-                    </div>
-                  ))}
+                  {entries.map(
+                    (val) =>
+                      val[1] !== null && (
+                        <div
+                          key={nodeProps.id}
+                          style={{
+                            height: "fit-content",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            padding: "0 auto",
+                            width: width - 20,
+                          }}
+                        >
+                          <StyledKey>{val[0]}: </StyledKey>
+                          {val[1]}
+                        </div>
+                      )
+                  )}
                 </StyledText>
               </StyledTextWrapper>
             </StyledForeignObject>

src/containers/LiveEditor/helpers.ts

@@ -22,8 +22,8 @@ export function getEdgeNodes(graph: any, isExpanded: boolean = true): any {
       nodes.push({
         id: el.id,
         text: el.text,
-        width: isExpanded ? (35 + longestLine * 8) : 180,
-        height: isExpanded ? (30 + lines.length * 10) : 50,
+        width: isExpanded ? 35 + longestLine * 8 : 180,
+        height: isExpanded ? 30 + lines.length * 10 : 50,
         data: { type: "special" },
       });
     } else {