Improve UI of the app

Martarion-Code · Martarion-Code · commit ba61df096a9b · 2023-07-07T19:08:12.000+07:00
I tried to change the appeareance of the nodes and content or label inside the nodes. I also add gap for  buttons inside panel. I also remove the draggable feature of the nodes, because everytime user drag the node, fitView will get executed so that everytime user drag the node the viewport zoom to root node
diff --git a/src/App.css b/src/App.css
@@ -1,95 +1,128 @@
-/* #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
 
-.card {
-  padding: 2em;
+:root {
+  --bg-sidebar-clr: #313131;
 }
 
-.read-the-docs {
-  color: #888;
-} */
-
-html{
+html {
   font-size: 16px;
 }
 
-.body{
+.body {
   margin: 0;
   padding: 0;
 }
 
-.app-cont{
+.app-cont {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: row-reverse;
 }
 
-.sidebar{
+.sidebar {
   width: 20vw;
   min-height: 100vh;
-  background-color: #1a1a1a;
+  background-color: var(--bg-sidebar-clr);
   color: #fff;
   display: flex;
   flex-direction: column;
 }
 
-.sidebar__text-cont{
+.sidebar__text-cont {
   flex-grow: 1;
-  background: #313131;
+  background: var(--bg-sidebar-clr);
   outline: none;
   border: none;
   flex-shrink: 1;
   color: #fff;
-  font-size: .8rem;
-  padding: .7rem;
+  font-size: 0.8rem;
+  padding: 0.7rem;
 }
-.sidebar__title-cont{
+.sidebar__title-cont {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 10px;
-
 }
-.sidebar__title-cont h1{
+.sidebar__title-cont h1 {
   font-size: 1.3rem;
 }
 
-
-
-.sidebar__title-cont button{
+.sidebar__title-cont button {
   margin: 1rem 0;
   font-size: 0.9rem;
-}
+}
+
+.react-flow {
+  background-color: #202021;
+}
+
+.react-flow__background {
+  color: #2f2f2f;
+}
+.react-flow__node {
+  background: transparent;
+}
+
+.react-flow__node-jsonVis {
+
+  background-color: transparent;
+  position: relative;
+  width: 200px;
+  min-height: 50px;
+  display: flex;
+  justify-content: center;
+
+}
+
+.react-flow__handle {
+
+  opacity: 0;
+}
+
+.react-flow__handle-top {
+  top: 5% !important;
+}
+
+.react-flow__handle-bottom {
+  bottom: 5% !important;
+}
+
+.react-flow__handle-right {
+  right: 2% !important;
+}
+
+.react-flow__handle-left {
+  left: 2% !important;
+}
+
+.react-flow__panel-1 {
+  display: flex;
+  gap: 2vw;
+}
+
+.react-flow__node-jsonVis ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.jsonVisNode__label{
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 200px;;
+  display: flex;
+  flex-wrap: wrap;
+  color: #fff;
+  padding: 1rem;
+  border-radius: 10px;
+  background-color: var(--bg-sidebar-clr);
+}
+
+.jsonVisNode__label__key{
+  color:#c39c6b;
+  font-weight: 600;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,17 @@ import {
   useReactFlow,
   Panel,
 } from "reactflow";
+import JsonVisNode from "./Custom Nodes/jsonVisNode";
+
+// we define the nodeTypes outside of the component to prevent re-renderings
+// you could also use useMemo inside the component
+const nodeTypes = { jsonVis: JsonVisNode }; 
+const edgeTypes = {
+  jsonVis: JsonVisEdge,
+};
+
+const defaultEdgeOpt = {type: 'jsonVis'}
+
 
 import { shallow } from "zustand/shallow";
 
@@ -19,6 +30,7 @@ import convertJsonToTree from "./utils/convertJsonToTree";
 import convertTreeToNodes from "./utils/convertTreeToNodes";
 
 import "reactflow/dist/style.css";
+import JsonVisEdge from "./Custom Edges/JsonVisEdge";
 
 /**
  * Select which variable or func that will get used from store 
@@ -42,8 +54,8 @@ const elk = new ELK();
 //Elk options for layouting the tree
 const elkOptions = {
   "elk.algorithm": "layered",
-  "elk.layered.spacing.nodeNodeBetweenLayers": "100",
-  "elk.spacing.nodeNode": "80",
+  "elk.layered.spacing.nodeNodeBetweenLayers": "200",
+  "elk.spacing.nodeNode": "150",
   "elk.edgeRouting": "SPLINES",
 };
 
@@ -56,6 +68,7 @@ const elkOptions = {
  */
 const getLayoutedElements = (nodes, edges, options = {}) => {
   const isHorizontal = options?.["elk.direction"] === "RIGHT";
+  console.log(isHorizontal)
   const graph = {
     id: "root",
     layoutOptions: options,
@@ -64,14 +77,15 @@ const getLayoutedElements = (nodes, edges, options = {}) => {
       ...node,
       targetPosition: isHorizontal ? "left" : "top",
       sourcePosition: isHorizontal ? "right" : "bottom",
-
       //Hardcode a width and height for node so that elk can use it when layouting.
       width: 150,
       height: 50,
     })),
     edges: edges,
   };
 
+  // console.log(graph);
+
   //Return promises
   return elk
     .layout(graph)
@@ -93,8 +107,8 @@ function App() {
     edges,
     setNodes,
     setEdges,
-    onNodesChange,
-    onEdgesChange,
+    // onNodesChange,
+    // onEdgesChange,
     needToRenderJson,
   } = useStore(selector, shallow);
 
@@ -127,6 +141,8 @@ function App() {
     [nodes, edges]   //So that the useCallback will rememoize the nodes and edges variable if it values changed.
   );
 
+  console.log(nodes);
+
   //It will render before "layout" phase happening when rendering page. So that the page will outputing layouted nodes and edges
   useLayoutEffect(() => {
     const nodeTree = convertJsonToTree(needToRenderJson); //to convert json to tree
@@ -151,13 +167,16 @@ function App() {
           <ReactFlow
             nodes={nodes}
             edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
+            // onNodesChange={onNodesChange}
+            // onEdgesChange={onEdgesChange}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            defaultEdgeOptions={defaultEdgeOpt}
           >
-            <Background gap={20} variant={BackgroundVariant.Lines}></Background>
+            <Background gap={30} color={'#373737'} variant={BackgroundVariant.Lines}></Background>
             <Controls showInteractive={false}></Controls>
-            <Panel position="top-right">
-              <button onClick={() => onLayout({ direction: "DOWN" })}>
+            <Panel position="top-right" className="react-flow__panel-1">
+              <button onClick={() => onLayout({ direction: "DOWN" })} className="panel__btn">
                 vertical layout
               </button>
 
diff --git a/src/Custom Edges/JsonVisEdge.jsx b/src/Custom Edges/JsonVisEdge.jsx
@@ -0,0 +1,17 @@
+import { BaseEdge, getBezierPath } from 'reactflow';
+
+function JsonVisEdge(props) {
+  // eslint-disable-next-line react/prop-types
+  const { sourceX, sourceY, targetX, targetY, sourcePosition,  targetPosition } = props;
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,  targetPosition,
+    targetX,
+    targetY,
+  });
+
+  return <BaseEdge path={edgePath} {...props} />;
+}
+
+export default JsonVisEdge;
diff --git a/src/Custom Nodes/JsonVisNode.jsx b/src/Custom Nodes/JsonVisNode.jsx
@@ -0,0 +1,44 @@
+/* eslint-disable react/prop-types */
+
+import {Handle} from 'reactflow';
+
+// eslint-disable-next-line react/prop-types
+function JsonVisNode({data, targetPosition, sourcePosition}){
+
+    // console.log
+    // console.log(data.label);
+    let str;
+    if(typeof data.label === 'object'){
+        str = Object.entries(data.label);
+    }else{
+        str = data.label;
+    }
+
+    // console.log(str);
+
+    // const strArr = (typeof data.label === 'object' ) ? data.label?.split(',') 
+    // console.log(strArr)
+    return (
+        <>
+            <Handle type="target" position={targetPosition} ></Handle>
+            <div className='jsonVisNode__label'>
+                <ul>
+                { 
+                (typeof data.label === 'object') ? 
+                Object.entries(data.label).map(([key, value], index) =>(
+                     <li key={index}>
+                        <span className="jsonVisNode__label__key">{key} : </span>
+                        <span>{String(value)}</span>
+                     </li>                    
+                )) : str
+                }
+                </ul>
+                </div>
+            <Handle type="source" position={sourcePosition} ></Handle>
+        </>
+
+    )
+}
+
+
+export default JsonVisNode;
diff --git a/src/utils/convertTreeToNodes.js b/src/utils/convertTreeToNodes.js
@@ -6,8 +6,9 @@ let edges = [];
 function addRootNode(node) {
   const newNode = {
     id: node.id,
-    data: { label: JSON.stringify(node.value) },
+    data: { label: node.value },
     position: { x: 0, y: 0 },
+    type: 'jsonVis',
   };
 
   nodes = [...nodes, newNode];
@@ -20,8 +21,9 @@ function addChildNode(node, parentNode) {
       label:
         typeof node.value === "string" || typeof node.value === "number"
           ? node.value
-          : JSON.stringify(node.value),
+          : node.value,
     },
+    type: 'jsonVis',
     position: { x: 0, y: 0 },
     parent: parentNode.id,
   };
