Merge pull request #38 from sarbull/react

Hide console.log via debug prop parameter

package.json

@@ -20,7 +20,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "uuid": "8.3.2",
     "vis-network": "^9.1.2",
     "web-vitals": "2.1.4",
     "web-worker": "1.2.0"

src/components/App/index.tsx

@@ -20,6 +20,7 @@ export function App() {
     <div className="container">
       <HappiGraph rawData={{...rawData}}
                   algorithm={""}
+                  debug={false}
                   graphDirection={"VERTICAL"}
                   selectedNodeId={"term@68e36496-7167-4af7-abdd-a0cd36e24084:6662c0f2.e1b1ec6c.66k78i6du.uchsna1.rn2epa.rfn2fjqf7h4qvmt5lflm8"}
                   actions={<HappiGraphActions rawData={{...rawData}}/>} />

src/components/HappiGraph/happi-graph-legend.component.tsx

@@ -10,18 +10,18 @@ import {
   graphNodesUpdateInLegendData
 } from './happi-graph-legend.render';
 
-import { v4 as uuidv4 } from 'uuid';
-
 interface Props {
   nodes: any;
   links: any;
+  debug?: boolean;
 }
 
 interface State {
   nodes: any;
   links: any;
   isMinimised: boolean;
   legendData: any;
+  debug: boolean;
 }
 
 /**
@@ -37,6 +37,7 @@ class HappiGraphLegend extends React.Component<Props, State> {
     super(props);
 
     this.state = {
+      debug: props.debug ? true : false,
       nodes: [...props.nodes],
       links: [...props.links],
       isMinimised: true,
@@ -50,7 +51,7 @@ class HappiGraphLegend extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    const { nodes, links } = this.state;
+    const { nodes, links, debug } = this.state;
 
     let data = {};
 
@@ -59,7 +60,7 @@ class HappiGraphLegend extends React.Component<Props, State> {
       ...graphNodesUpdateInLegendData(nodes)
     };
 
-    console.log(data);
+    debug && console.log(data);
 
     this.setState({
       legendData: { ...data }
@@ -72,25 +73,25 @@ class HappiGraphLegend extends React.Component<Props, State> {
     return (<>
       <div className="happi-graph-legend">
         <div className="toggler">
-          <MantineSwitch label="Legend" checked={!isMinimised} onClick={() => { this.toggleMinimise() }} />
+          <MantineSwitch label="Legend" checked={!isMinimised} onChange={() => { this.toggleMinimise() }} />
         </div>
 
         <div className="contents">
           { legendData && !isMinimised && getLegendCategories(legendData).map((legendKey: any, legendKeyId: number) => {
-            return <><div className="icon-title" key={`${uuidv4()}-${legendKeyId}`}>
+            return <div key={legendKeyId}><div className="icon-title">
               <b>{ legendKey }</b>
             </div>
 
             <div className="svg-icons">
               { legendData && legendKey && getLegendLabels(legendData, legendKey).map((label: any, labelId: number) => {
-                return <div className="svg-icon" key={`${uuidv4()}-${labelId}`}>
+                return <div className="svg-icon" key={`${labelId}`}>
                   <img src={ `data:image/svg+xml;utf8,${ getIcon(legendKey, label, legendData) }` } alt="icon" />
 
                   <span>{ label }</span>
                 </div>
               }) }
             </div>
-          </>}) }
+          </div>}) }
         </div>
       </div>
     </>);

src/components/HappiGraph/happi-graph.component.tsx

@@ -54,8 +54,6 @@ class HappiGraph extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    console.warn('render()');
-
     const mappedNodes = mapNodes(props.rawData.nodes, props.selectedNodeId);
     const mappedLinks = mapLinks(props.rawData.edges, mappedNodes);
 
@@ -142,26 +140,30 @@ class HappiGraph extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    const { happiGraph } = this.state;
+    const { happiGraph, debug } = this.state;
 
-    console.log("componentDidMount()", this.state);
+    debug && console.log("componentDidMount()", this.state);
 
     this.setState({
       svg: d3.select(happiGraph.current)
     }, () => {
       this.selectAlgorithm(() => {
-        console.log('Everything is ready.');
+        debug && console.log('Everything is ready.');
         this.init();
       });
     });
   }
 
   componentDidUpdate() {
-    console.log("componentDidUpdate()", this.state);
+    const { debug } = this.state;
+
+    debug && console.log("componentDidUpdate()", this.state);
   }
 
   init() {
-    console.log('init()');
+    const { debug } = this.state;
+
+    debug && console.log('init()');
     const { svg, nodes, links, graphDirection } = this.state;
 
     const allGroup =
@@ -174,8 +176,8 @@ class HappiGraph extends React.Component<Props, State> {
     let svgWidth = parseInt(svg.style('width'));
     let svgHeight = parseInt(svg.style('height'));
 
-    console.log('svgWitdh = ', svgWidth);
-    console.log('svgHeight = ', svgHeight);
+    debug && console.log('svgWitdh = ', svgWidth);
+    debug && console.log('svgHeight = ', svgHeight);
 
     this.setState({
       allGroup: allGroup,
@@ -225,7 +227,8 @@ class HappiGraph extends React.Component<Props, State> {
       nodes,
       links,
       allGroup,
-      isFullscreen
+      isFullscreen,
+      debug
     } = this.state;
 
     return (<>
@@ -298,7 +301,7 @@ class HappiGraph extends React.Component<Props, State> {
         </div>
 
         <div className="happi-graph-legend-wrapper">
-          <HappiGraphLegend nodes={nodes} links={links}/>
+          <HappiGraphLegend nodes={nodes} links={links} debug={debug}/>
         </div>
       </div>
     </>);

src/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+// import React from 'react';
 import ReactDOM from 'react-dom/client';
-import reportWebVitals from './reportWebVitals';
+// import reportWebVitals from './reportWebVitals';
 
 import { App } from './components/App';
 
@@ -17,4 +17,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log);
+// reportWebVitals(console.log);