Skip to content

Commit ea1f53a

Browse files
NkmaiNkmai
committed
Basic console log cleanup in AtomsRelationship, BarGraph, ComponentMap, Diff and ErrorHandler
> > Co-authored-by: Nkmai <[email protected]> Co-authored-by: lind-tania <[email protected]> Co-authored-by: rtviner <[email protected]> Co-authored-by: caitlinchan23 <[email protected]>
1 parent 3eaea07 commit ea1f53a

File tree

7 files changed

+126
-160
lines changed

7 files changed

+126
-160
lines changed

‎assets/.nextjs.gif.icloud

160 Bytes
Binary file not shown.

‎assets/nextjs.gif

-17.6 MB
Binary file not shown.

‎src/app/components/AtomsRelationship.tsx

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
2-
31
import React, { useMemo } from 'react';
42
import { Group } from '@visx/group';
53
import { Cluster, hierarchy } from '@visx/hierarchy';
6-
//import { HierarchyPointNode, HierarchyPointLink } from '@visx/hierarchy/lib/types';
74
import { LinkVertical } from '@visx/shape';
85
import { LinearGradient } from '@visx/gradient';
96
import { StateRouteProps} from './StateRoute'
@@ -69,7 +66,6 @@ function clusterDataPopulate(props:StateRouteProps) {
6966
bothObj[key] = []
7067
}
7168

72-
7369
if(props[0].atomSelectors[key].length){
7470
for(let i=0; i<props[0].atomSelectors[key].length;i++){
7571
if(!outerobj.children) outerobj.children = []
@@ -88,7 +84,6 @@ function clusterDataPopulate(props:StateRouteProps) {
8884
if(!innerobj.children) innerobj.children = []
8985
innerobj.children.push({name:atomCompObj[props[0].atomSelectors[key][i]]})
9086
bothObj[key].push(atomCompObj[props[0].atomSelectors[key][i]][0])
91-
9287
}
9388
}
9489
outerobj.children.push(innerobj)
@@ -105,8 +100,7 @@ function clusterDataPopulate(props:StateRouteProps) {
105100
}
106101
bothObj[key].push(atomCompObj[key][i])
107102
}
108-
}
109-
103+
}
110104
clusterData.children.push(outerobj)
111105
}
112106
}
@@ -125,10 +119,8 @@ function clusterDataPopulate(props:StateRouteProps) {
125119
}
126120
}
127121
initialFire = true
128-
129122
}
130123

131-
132124
function reorganizedCompObj(props) {
133125
let atomsComponentObj = props[0].atomsComponents;
134126
let reorganizedCompObj = {};
@@ -146,7 +138,6 @@ function reorganizedCompObj(props) {
146138
}
147139

148140
function Node({ node, snapshots, dispatch, bothObj}) {
149-
// const [dispatch] = useStoreContext();
150141
const selector = node.depth === 1 && node.height === 2
151142
const isRoot = node.depth === 0;
152143
const isParent = !!node.children;
@@ -209,12 +200,9 @@ function RootNode({ node }) {
209200
x={centerX}
210201
rx="10"
211202
ry="10"
212-
// fill="url('#top')"
213203
/>
214204
<text
215205
dy=".33em"
216-
// top={node.y}
217-
// left={node.x}
218206
fontSize={9}
219207
fontFamily="Arial"
220208
textAnchor="middle"
@@ -277,12 +265,6 @@ function removeDup(bothObj){
277265

278266
const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
279267

280-
// export type DendrogramProps = {
281-
// width: number;
282-
// height: number;
283-
// margin?: { top: number; right: number; bottom: number; left: number };
284-
// };
285-
286268
export default function AtomsRelationship({
287269
width,
288270
height,
@@ -306,9 +288,7 @@ export default function AtomsRelationship({
306288
return width < 10 ? null : (
307289
<>
308290
<div>
309-
<Legend
310-
// hierarchy = {hierarchy}
311-
/>
291+
<Legend />
312292
</div>
313293
<svg width={width} height={height}>
314294

‎src/app/components/BarGraph.tsx

Lines changed: 123 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -86,139 +86,138 @@ const BarGraph = (props) => {
8686
});
8787

8888
// setting max dimensions and scale ranges
89-
9089
const xMax = width - margin.left - margin.right;
9190
const yMax = height - margin.top - 150;
9291
snapshotIdScale.rangeRound([0, xMax]);
9392
renderingScale.range([yMax, 0]);
94-
return (
95-
<div>
96-
<svg ref={containerRef} width={width} height={height}>
97-
{}
98-
<rect
99-
x={0}
100-
y={0}
101-
width={width}
102-
height={height}
103-
fill={background}
104-
rx={14}
105-
/>
106-
<Grid
107-
top={margin.top}
108-
left={margin.left}
109-
xScale={snapshotIdScale}
110-
yScale={renderingScale}
111-
width={xMax}
112-
height={yMax}
113-
stroke="black"
114-
strokeOpacity={0.1}
115-
xOffset={snapshotIdScale.bandwidth() / 2}
116-
/>
117-
<Group top={margin.top} left={margin.left}>
118-
<BarStack
119-
data={data.barStack}
120-
keys={keys}
121-
x={getSnapshotId}
93+
return (
94+
<div>
95+
<svg ref={containerRef} width={width} height={height}>
96+
{}
97+
<rect
98+
x={0}
99+
y={0}
100+
width={width}
101+
height={height}
102+
fill={background}
103+
rx={14}
104+
/>
105+
<Grid
106+
top={margin.top}
107+
left={margin.left}
122108
xScale={snapshotIdScale}
123109
yScale={renderingScale}
124-
color={colorScale}
110+
width={xMax}
111+
height={yMax}
112+
stroke="black"
113+
strokeOpacity={0.1}
114+
xOffset={snapshotIdScale.bandwidth() / 2}
115+
/>
116+
<Group top={margin.top} left={margin.left}>
117+
<BarStack
118+
data={data.barStack}
119+
keys={keys}
120+
x={getSnapshotId}
121+
xScale={snapshotIdScale}
122+
yScale={renderingScale}
123+
color={colorScale}
124+
>
125+
{barStacks =>
126+
barStacks.map(barStack =>
127+
barStack.bars.map(((bar, idx) => {
128+
// hides new components if components don't exist in previous snapshots
129+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
130+
bar.height = 0;
131+
}
132+
return (
133+
<rect
134+
key={`bar-stack-${barStack.index}-${bar.index}`}
135+
x={bar.x}
136+
y={bar.y}
137+
height={bar.height === 0 ? null : bar.height}
138+
width={bar.width}
139+
fill={bar.color}
140+
/* TIP TOOL EVENT HANDLERS */
141+
// Hides tool tip once cursor moves off the current rect
142+
onMouseLeave={() => {
143+
dispatch(onHoverExit(data.componentData[bar.key].rtid),
144+
tooltipTimeout = window.setTimeout(() => {
145+
hideTooltip()
146+
}, 300))
147+
}}
148+
// Cursor position in window updates position of the tool tip
149+
onMouseMove={event => {
150+
dispatch(onHover(data.componentData[bar.key].rtid))
151+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
152+
const top = event.clientY - margin.top - bar.height;
153+
const left = bar.x + bar.width / 2;
154+
showTooltip({
155+
tooltipData: bar,
156+
tooltipTop: top,
157+
tooltipLeft: left,
158+
});
159+
}}
160+
/>
161+
)})))
162+
}
163+
</BarStack>
164+
</Group>
165+
<AxisLeft
166+
top={margin.top}
167+
left={margin.left}
168+
scale={renderingScale}
169+
stroke={axisColor}
170+
tickStroke={axisColor}
171+
strokeWidth={2}
172+
tickLabelProps={() => ({
173+
fill: 'rgb(231, 231, 231)',
174+
fontSize: 11,
175+
verticalAnchor: 'middle',
176+
textAnchor: 'end',
177+
})}
178+
/>
179+
<AxisBottom
180+
top={yMax + margin.top}
181+
left={margin.left}
182+
scale={snapshotIdScale}
183+
stroke={axisColor}
184+
tickStroke={axisColor}
185+
strokeWidth={2}
186+
tickLabelProps={() => ({
187+
fill: 'rgb(231, 231, 231)',
188+
fontSize: 11,
189+
textAnchor: 'middle',
190+
})}
191+
/>
192+
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={12} fill="#FFFFFF"> Rendering Time (ms) </Text>
193+
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
194+
</svg>
195+
{/* FOR HOVER OVER DISPLAY */}
196+
{tooltipOpen && tooltipData && (
197+
<TooltipInPortal
198+
key={Math.random()} // update tooltip bounds each render
199+
top={tooltipTop}
200+
left={tooltipLeft}
201+
style={tooltipStyles}
125202
>
126-
{barStacks =>
127-
barStacks.map(barStack =>
128-
barStack.bars.map(((bar, idx) => {
129-
// hides new components if components don't exist in previous snapshots
130-
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
131-
bar.height = 0;
132-
}
133-
return (
134-
<rect
135-
key={`bar-stack-${barStack.index}-${bar.index}`}
136-
x={bar.x}
137-
y={bar.y}
138-
height={bar.height === 0 ? null : bar.height}
139-
width={bar.width}
140-
fill={bar.color}
141-
/* TIP TOOL EVENT HANDLERS */
142-
// Hides tool tip once cursor moves off the current rect
143-
onMouseLeave={() => {
144-
dispatch(onHoverExit(data.componentData[bar.key].rtid),
145-
tooltipTimeout = window.setTimeout(() => {
146-
hideTooltip()
147-
}, 300))
148-
}}
149-
// Cursor position in window updates position of the tool tip
150-
onMouseMove={event => {
151-
dispatch(onHover(data.componentData[bar.key].rtid))
152-
if (tooltipTimeout) clearTimeout(tooltipTimeout);
153-
const top = event.clientY - margin.top - bar.height;
154-
const left = bar.x + bar.width / 2;
155-
showTooltip({
156-
tooltipData: bar,
157-
tooltipTop: top,
158-
tooltipLeft: left,
159-
});
160-
}}
161-
/>
162-
)})))
163-
}
164-
</BarStack>
165-
</Group>
166-
<AxisLeft
167-
top={margin.top}
168-
left={margin.left}
169-
scale={renderingScale}
170-
stroke={axisColor}
171-
tickStroke={axisColor}
172-
strokeWidth={2}
173-
tickLabelProps={() => ({
174-
fill: 'rgb(231, 231, 231)',
175-
fontSize: 11,
176-
verticalAnchor: 'middle',
177-
textAnchor: 'end',
178-
})}
179-
/>
180-
<AxisBottom
181-
top={yMax + margin.top}
182-
left={margin.left}
183-
scale={snapshotIdScale}
184-
stroke={axisColor}
185-
tickStroke={axisColor}
186-
strokeWidth={2}
187-
tickLabelProps={() => ({
188-
fill: 'rgb(231, 231, 231)',
189-
fontSize: 11,
190-
textAnchor: 'middle',
191-
})}
192-
/>
193-
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={12} fill="#FFFFFF"> Rendering Time (ms) </Text>
194-
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
195-
</svg>
196-
{/* FOR HOVER OVER DISPLAY */}
197-
{tooltipOpen && tooltipData && (
198-
<TooltipInPortal
199-
key={Math.random()} // update tooltip bounds each render
200-
top={tooltipTop}
201-
left={tooltipLeft}
202-
style={tooltipStyles}
203-
>
204-
<div style={{ color: colorScale(tooltipData.key) }}>
205-
{' '}
206-
<strong>{tooltipData.key}</strong>
207-
{' '}
208-
</div>
209-
<div>{data.componentData[tooltipData.key].stateType}</div>
210-
<div>
211-
{' '}
212-
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
203+
<div style={{ color: colorScale(tooltipData.key) }}>
213204
{' '}
214-
</div>
215-
<div>
205+
<strong>{tooltipData.key}</strong>
216206
{' '}
217-
<small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>
218-
</div>
219-
</TooltipInPortal>
220-
)}
221-
</div>
207+
</div>
208+
<div>{data.componentData[tooltipData.key].stateType}</div>
209+
<div>
210+
{' '}
211+
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
212+
{' '}
213+
</div>
214+
<div>
215+
{' '}
216+
<small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>
217+
</div>
218+
</TooltipInPortal>
219+
)}
220+
</div>
222221
)};
223222

224223
export default BarGraph;

‎src/app/components/ComponentMap.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ export default function ComponentMap({
5959

6060
// Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
6161
const forceUpdate = useForceUpdate();
62-
// setting the margins for the Map to render in the tab window.
6362

63+
// setting the margins for the Map to render in the tab window.
6464
const innerWidth = totalWidth - margin.left - margin.right;
6565
const innerHeight = totalHeight - margin.top - margin.bottom;
6666

@@ -70,7 +70,6 @@ export default function ComponentMap({
7070

7171
// This sets the starting position for the root node on the maps display. the polar layout sets the root node to the relative center of the display box based on the size of the browser window.
7272
// the else conditional statements determines the root nodes location either in the left middle or top middle of the browser window relative to the size of the browser.
73-
7473
if (layout === 'polar') {
7574
origin = {
7675
x: innerWidth / 2,

‎src/app/components/Diff.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/* eslint-disable max-len */
2-
/* eslint-disable @typescript-eslint/no-explicit-any */
3-
/* eslint-disable @typescript-eslint/ban-types */
4-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
5-
/* eslint-disable react/require-default-props */
61
import React from 'react';
72
import { diff, formatters } from 'jsondiffpatch';
83
import ReactHtmlParser from 'react-html-parser';

‎src/app/components/ErrorHandler.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
2-
/* eslint-disable react/prop-types */
3-
/* eslint-disable semi */
4-
/* eslint-disable react/destructuring-assignment */
5-
/* eslint-disable no-console */
6-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
7-
/* eslint-disable @typescript-eslint/no-explicit-any */
81
import React from 'react';
92

103
class ErrorHandler extends React.Component {

0 commit comments

Comments
 (0)