diff --git a/src/app/components/BarGraph.tsx b/src/app/components/BarGraph.tsx index 3e9116265..892d24c7e 100644 --- a/src/app/components/BarGraph.tsx +++ b/src/app/components/BarGraph.tsx @@ -13,9 +13,6 @@ import { onHover, onHoverExit, save } from '../actions/actions'; import { useStoreContext } from '../store'; /* TYPESCRIPT */ -interface data { - snapshotId?: string; -} interface margin { top: number; diff --git a/src/app/components/BarGraphComparison.tsx b/src/app/components/BarGraphComparison.tsx index 9777edb20..1386153ec 100644 --- a/src/app/components/BarGraphComparison.tsx +++ b/src/app/components/BarGraphComparison.tsx @@ -131,7 +131,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): unknown => { return currentMax; }; - // the domain array on rendering scale will set the coordinates for Y-aix points. + // the domain array on rendering scale will set the coordinates for Y-axis points. const renderingScale = scaleLinear({ domain: [0, Math.max(calculateMaxTotalRender(series), data.maxTotalRender)], nice: true, diff --git a/src/app/components/BarGraphComparisonActions.tsx b/src/app/components/BarGraphComparisonActions.tsx index 2d8f7e514..538a787fc 100644 --- a/src/app/components/BarGraphComparisonActions.tsx +++ b/src/app/components/BarGraphComparisonActions.tsx @@ -17,12 +17,6 @@ import { deleteSeries, setCurrentTabInApp } from '../actions/actions'; import { useStoreContext } from '../store'; /* TYPESCRIPT */ -interface data { - snapshotId?: string; -} -interface series { - seriesId?: any; -} interface margin { top: number; @@ -94,7 +88,7 @@ const BarGraphComparisonActions = props => { // data accessor (used to generate scales) and formatter (add units for on hover box) const getSeriesName = action => action.seriesName; - // create visualization SCALES with cleaned data + // create visualization SCALES with cleaned data. // the domain array/xAxisPoints elements will place the bars along the x-axis const seriesNameScale = scaleBand({ domain: data.map(getSeriesName), @@ -157,38 +151,16 @@ const BarGraphComparisonActions = props => { if (!event) return; setSeries(event.target.value); setAction(false); - // setXpoints(); - }; - - const handleClose = () => { - setOpen(false); - // setXpoints(); - }; - - const handleOpen = () => { - setOpen(true); - // setXpoints(); }; const handleActionChange = event => { if (!event) return; setAction(event.target.value); setSeries(false); - // setXpoints(); - }; - - const picHandleClose = () => { - setPicOpen(false); - // setXpoints(); - }; - - const picHandleOpen = () => { - setPicOpen(true); - // setXpoints(); }; const animateButton = function (e) { - e.preventDefault; + e.preventDefault(); e.target.classList.add('animate'); e.target.innerHTML = 'Deleted!'; setTimeout(() => { @@ -230,9 +202,6 @@ const BarGraphComparisonActions = props => { labelId="simple-select-outlined-label" id="simple-select-outlined" className={classes.select} - // open={open} - // onClose={handleClose} - // onOpen={handleOpen} value={series} onChange={handleSeriesChange} > @@ -248,9 +217,6 @@ const BarGraphComparisonActions = props => { labelId="snapshot-select" id="snapshot-select" className={classes.select} - // open={picOpen} - // onClose={picHandleClose} - // onOpen={picHandleOpen} value={action} // snapshots onChange={handleActionChange} > diff --git a/src/app/components/BarGraphComparisonTEST.tsx b/src/app/components/BarGraphComparisonTEST.tsx deleted file mode 100644 index b815b0da1..000000000 --- a/src/app/components/BarGraphComparisonTEST.tsx +++ /dev/null @@ -1,502 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { BarStack } from '@visx/shape'; -import { SeriesPoint } from '@visx/shape/lib/types'; -import { Group } from '@visx/group'; -import { Grid } from '@visx/grid'; -import { AxisBottom, AxisLeft } from '@visx/axis'; -import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'; -import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'; -import { Text } from '@visx/text'; -import { schemeSet3 } from 'd3-scale-chromatic'; -import { makeStyles } from '@material-ui/core/styles'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import { title } from 'node:process'; -import { onHover, onHoverExit, deleteSeries } from '../actions/actions'; -import { useStoreContext } from '../store'; - -/* TYPESCRIPT */ -interface data { - snapshotId?: string; -} -interface series { - seriesId?: any; -} - -interface margin { - top: number; - right: number; - bottom: number; - left: number; -} - -interface snapshot { - snapshotId?: string; - children: []; - componentData: any; - name: string; - state: string; -} - -// On-hover data. -interface TooltipData { - bar: SeriesPoint; - key: string; - index: number; - height: number; - width: number; - x: number; - y: number; - color: string; -} - -/* DEFAULTS */ -const margin = { - top: 30, right: 30, bottom: 0, left: 50, -}; -const axisColor = '#62d6fb'; -const background = '#242529'; -const tooltipStyles = { - ...defaultStyles, - minWidth: 60, - backgroundColor: 'rgba(0,0,0,0.9)', - color: 'white', - fontSize: '14px', - lineHeight: '18px', - fontFamily: 'Roboto', -}; - -const BarGraphComparison = props => { - const [{ tabs, currentTab }, dispatch] = useStoreContext(); - const { - width, height, data, comparison, - } = props; - const [series, setSeries] = React.useState(0); - const [open, setOpen] = React.useState(false); - const [picOpen, setPicOpen] = React.useState(false); - const [maxRender, setMaxRender] = React.useState(data.maxTotalRender); - const [snapshots, setSnapshots] = React.useState(comparison[0]); - const [currentSnapshot, setCurrentSnapshot] = React.useState(0); - - function titleFilter(comparisonArray) { - return comparisonArray.filter( - elem => elem.title.split('-')[1] === tabs[currentTab].title.split('-')[1], - ); - } - - function snapshotFilter(tabObj) { - return tabObj; - } - - const currentIndex = tabs[currentTab].sliderIndex; - // let currentComparison = comparison.map(ele => ele[data][barStack]) - - // picIndex[ele][currentTab] = picIndex[ele][data][barStack] - - const { - tooltipOpen, - tooltipLeft, - tooltipTop, - tooltipData, - hideTooltip, - showTooltip, - } = useTooltip(); - let tooltipTimeout: number; - - const { containerRef, TooltipInPortal } = useTooltipInPortal(); - const keys = Object.keys(data.componentData); - - // data accessor (used to generate scales) and formatter (add units for on hover box) - const getSnapshotId = (d: snapshot) => d.snapshotId; - const formatSnapshotId = id => `Snapshot ID: ${id}`; - const formatRenderTime = time => `${time} ms `; - const getCurrentTab = storedSeries => storedSeries.currentTab; - - // create visualization SCALES with cleaned data - // the domain array/xAxisPoints elements will place the bars along the x-axis - const xAxisPoints = ['currentTab', 'comparison']; - const snapshotIdScale = scaleBand({ - domain: xAxisPoints, - padding: 0.2, - }); - // This function will iterate through the snapshots of the series, - // and grab the highest render times (sum of all component times). - // We'll then use it in the renderingScale function and compare - // with the render time of the current tab. - // The max render time will determine the Y-axis's highest number. - const calculateMaxTotalRender = series => { - const currentSeriesBarStacks = !comparison[series] - ? [] - : comparison[series].data.barStack; - if (currentSeriesBarStacks.length === 0) return 0; - let currentMax = -Infinity; - for (let i = 0; i < currentSeriesBarStacks.length; i += 1) { - const renderTimes = Object.values(currentSeriesBarStacks[i]).slice(1); - const renderTotal = renderTimes.reduce((acc, curr) => acc + curr); - if (renderTotal > currentMax) currentMax = renderTotal; - } - return currentMax; - }; - - // the domain array on rendering scale will set the coordinates for Y-aix points. - const renderingScale = scaleLinear({ - domain: [0, Math.max(calculateMaxTotalRender(series), data.maxTotalRender)], - nice: true, - }); - // the domain array will assign each key a different color to make rectangle boxes - // and use range to set the color scheme each bar - const colorScale = scaleOrdinal({ - domain: keys, - range: schemeSet3, - }); - - // setting max dimensions and scale ranges - const xMax = width - margin.left - margin.right; - const yMax = height - margin.top - 200; - snapshotIdScale.rangeRound([0, xMax]); - renderingScale.range([yMax, 0]); - - // useStyles will change the styling on save series dropdown feature - const useStyles = makeStyles(theme => ({ - formControl: { - margin: theme.spacing(1), - minWidth: 80, - height: 30, - }, - select: { - minWidth: 80, - fontSize: '.75rem', - fontWeight: '200', - border: '1px solid grey', - borderRadius: 4, - color: 'grey', - height: 30, - }, - })); - - const classes = useStyles(); - - const handleChange = event => { - setSeries(event.target.value); - setSnapshots(comparison[event.target.value]); - // setXpoints(); - }; - - const handleClose = () => { - setOpen(false); - // setXpoints(); - }; - - const handleOpen = () => { - setOpen(true); - // setXpoints(); - }; - - const picHandleChange = event => { - setCurrentSnapshot(event.target.value); - // setXpoints(); - }; - - const picHandleClose = () => { - setPicOpen(false); - // setXpoints(); - }; - - const picHandleOpen = () => { - setPicOpen(true); - // setXpoints(); - }; - - // manually assigning X -axis points with tab ID. - function setXpointsComparison() { - comparison[series].data.barStack.forEach(elem => { - elem.currentTab = 'comparison'; - }); - // comparison[series].data.barStack.currentTab = currentTab; - return comparison[series].data.barStack; - } - function setXpointsCurrentTab() { - data.barStack.forEach(element => { - element.currentTab = 'currentTab'; - }); - return data.barStack; - } - const animateButton = function (e) { - e.preventDefault(); - e.target.classList.add('animate'); - e.target.innerHTML = 'Deleted!'; - setTimeout(() => { - e.target.innerHTML = 'Clear All Series'; - e.target.classList.remove('animate'); - }, 1000); - }; - const classname = document.getElementsByClassName('delete-button'); - for (let i = 0; i < classname.length; i++) { - classname[i].addEventListener('click', animateButton, false); - } - return ( -
-
-
- -

Comparison Series:

- - - -

Comparator Snapshot?

- - - -
-
- - - {} - - - - - {barStacks => barStacks.map((barStack, idx) => { - // Uses map method to iterate through all components, - // creating a rect component (from visx) for each iteration. - // height/width/etc. are calculated by visx. - // to set X and Y scale, it will used the passed in function and - // will run it on the array thats outputted by data - const bar = barStack.bars[currentIndex] - if (Number.isNaN(bar.bar[1]) || bar.height < 0) { - bar.height = 0; - } - return ( - { - dispatch( - onHoverExit(data.componentData[bar.key].rtid), - (tooltipTimeout = window.setTimeout(() => { - hideTooltip(); - }, 300)), - ); - }} - // Cursor position in window updates position of the tool tip - onMouseMove={event => { - dispatch(onHover(data.componentData[bar.key].rtid)); - if (tooltipTimeout) clearTimeout(tooltipTimeout); - const top = event.clientY - margin.top - bar.height; - const left = bar.x + bar.width / 2; - showTooltip({ - tooltipData: bar, - tooltipTop: top, - tooltipLeft: left, - }); - }} - /> - ); - })} - - - {barStacks => barStacks.map((barStack, idx) => { - // Uses map method to iterate through all components, - // creating a rect component (from visx) for each iteration. - // height/width/etc. are calculated by visx. - if (!barStack.bars[currentIndex]) { - return

No Comparison

; - } - const bar = barStack.bars[currentIndex]; - if (Number.isNaN(bar.bar[1]) || bar.height < 0) { - bar.height = 0; - } - return ( - { - dispatch( - onHoverExit(data.componentData[bar.key].rtid), - (tooltipTimeout = window.setTimeout(() => { - hideTooltip(); - }, 300)), - ); - }} - // Cursor position in window updates position of the tool tip - onMouseMove={event => { - dispatch(onHover(data.componentData[bar.key].rtid)); - if (tooltipTimeout) clearTimeout(tooltipTimeout); - const top = event.clientY - margin.top - bar.height; - const left = bar.x + bar.width / 2; - showTooltip({ - tooltipData: bar, - tooltipTop: top, - tooltipLeft: left, - }); - }} - /> - ); - })} - - - ({ - fill: 'rgb(231, 231, 231)', - fontSize: 11, - verticalAnchor: 'middle', - textAnchor: 'end', - })} - /> - ({ - fill: 'rgb(231, 231, 231)', - fontSize: 11, - textAnchor: 'middle', - })} - /> - - Rendering Time (ms) - - - Series ID - - - {/* FOR HOVER OVER DISPLAY */} - {tooltipOpen && tooltipData && ( - -
- {' '} - {tooltipData.key} - {' '} -
-
{data.componentData[tooltipData.key].stateType}
-
- {' '} - {formatRenderTime(tooltipData.bar.data[tooltipData.key])} - {' '} -
-
- {' '} - - {formatSnapshotId(getSnapshotId(tooltipData.bar.data))} - -
- - )} -
- ); -}; - -export default BarGraphComparison; diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx index d1a7074cb..4331cfe5f 100644 --- a/src/app/components/ComponentMap.tsx +++ b/src/app/components/ComponentMap.tsx @@ -23,29 +23,6 @@ import { useStoreContext } from '../store'; const exclude = ['childExpirationTime', 'staticContext', '_debugSource', 'actualDuration', 'actualStartTime', 'treeBaseDuration', '_debugID', '_debugIsCurrentlyTiming', 'selfBaseDuration', 'expirationTime', 'effectTag', 'alternate', '_owner', '_store', 'get key', 'ref', '_self', '_source', 'firstBaseUpdate', 'updateQueue', 'lastBaseUpdate', 'shared', 'responders', 'pending', 'lanes', 'childLanes', 'effects', 'memoizedState', 'pendingProps', 'lastEffect', 'firstEffect', 'tag', 'baseState', 'baseQueue', 'dependencies', 'Consumer', 'context', '_currentRenderer', '_currentRenderer2', 'mode', 'flags', 'nextEffect', 'sibling', 'create', 'deps', 'next', 'destroy', 'parentSub', 'child', 'key', 'return', 'children', '$$typeof', '_threadCount', '_calculateChangedBits', '_currentValue', '_currentValue2', 'Provider', '_context', 'stateNode', 'elementType', 'type']; -// const root = hierarchy({ -// name: 'root', -// children: [ -// { name: 'child #1' }, -// { -// name: 'child #2', -// children: [ -// { name: 'grandchild #1' }, -// { name: 'grandchild #2' }, -// { name: 'grandchild #3' }, -// ], -// }, -// ], -// }); - -interface TreeNode { - name: string; - isExpanded?: boolean; - children?: TreeNode[]; -} - -// type HierarchyNode = HierarchyPointNode; - const defaultMargin = { top: 30, left: 30, right: 55, bottom: 70, }; @@ -174,30 +151,6 @@ export default function ComponentMap({ const formatState = state => { if (state === 'stateless') return ['stateless']; - // Something in this code below is breaking the app, - // when you hover over a stateful component on the map - // -------------------------------------------------------------------------------------------- - // const result = []; - // const inner = arg => { - // if (Array.isArray(arg)) { - // result.push('['); - // arg.forEach(e => { inner(e); }); - // result.push('] '); - // } else if ((typeof arg) === 'object') { - // result.push('{ '); - // Object.keys(arg).forEach((key, i, arr) => { - // result.push(`${key}: `); - // ((typeof arg[key]) === 'object') ? inner(arg[key]) : result.push(arg[key]); - // if (i !== arr.length - 1) result.push(', '); - // }); - // result.push(' } '); - // } else { - // result.push(` ${arg}, `); - // } - // }; - // inner(state); - // return result; - // -------------------------------------------------------------------------------------------- return ['stateful']; }; diff --git a/src/app/components/Diff.tsx b/src/app/components/Diff.tsx index 8ed79cac2..5009c1fc2 100644 --- a/src/app/components/Diff.tsx +++ b/src/app/components/Diff.tsx @@ -28,7 +28,7 @@ function Diff(props: DiffProps) { } // cleaning preview from stateless data - const statelessCleanning = (obj:{name?:string; componentData?:object; state?:string|any; stateSnaphot?:object; children?:any[]}) => { + const statelessCleanning = (obj:{name?:string; componentData?: Record; state?:string| any; stateSnaphot?: Record; children?: any[]}) => { const newObj = { ...obj }; if (newObj.name === 'nameless') { delete newObj.name; @@ -45,7 +45,7 @@ function Diff(props: DiffProps) { if (newObj.children) { newObj.children = []; if (obj.children.length > 0) { - obj.children.forEach((element:{state?:object | string; children?:[]}) => { + obj.children.forEach((element:{state?: Record | string; children?:[]}) => { if (element.state !== 'stateless' || element.children.length > 0) { const clean = statelessCleanning(element); newObj.children.push(clean);