Skip to content

Commit 43260cf

Browse files
TheqwertypusherTheqwertypusher
authored
Merge branch 'staging' into onHover
2 parents ed8db3a + ed44f24 commit 43260cf

File tree

5 files changed

+337
-71
lines changed

5 files changed

+337
-71
lines changed

‎package.json

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,16 +107,19 @@
107107
},
108108
"dependencies": {
109109
"@visx/axis": "^1.0.0",
110+
"@visx/clip-path": "^1.0.0",
111+
"@visx/event": "^1.0.0",
112+
"@visx/glyph": "^1.0.0",
113+
"@visx/gradient": "^1.0.0",
110114
"@visx/grid": "^1.0.0",
115+
"@visx/group": "^1.0.0",
116+
"@visx/hierarchy": "^1.0.0",
111117
"@visx/legend": "^1.0.0",
112118
"@visx/responsive": "^1.0.0",
113119
"@visx/scale": "^1.0.0",
114-
"@visx/tooltip": "^1.0.0",
115-
"@visx/gradient": "^1.0.0",
116-
"@visx/group": "^1.0.0",
117-
"@visx/hierarchy": "^1.0.0",
118-
"@visx/glyph": "^1.0.0",
119120
"@visx/shape": "^1.0.0",
121+
"@visx/tooltip": "^1.0.0",
122+
"@visx/zoom": "^1.0.0",
120123
"acorn": "^7.3.1",
121124
"acorn-jsx": "^5.2.0",
122125
"bower": "^1.8.8",

‎src/app/components/History.tsx

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
import React, { Component, useEffect, useState } from 'react';
22
import * as d3 from 'd3';
3+
import LegendKey from './legend';
4+
import { changeView, changeSlider } from '../actions/actions';
5+
// import { useStoreContext } from '../store';
6+
// import { string } from 'prop-types';
7+
import { Zoom } from '@visx/zoom';
8+
import { localPoint } from '@visx/event';
9+
import { RectClipPath } from '@visx/clip-path';
10+
// import ZoomI from './zoomFt';
11+
12+
// const colorScale = scaleLinear<number>({ range: [0, 1], domain: [0, 1000] });
13+
// const sizeScale = scaleLinear<number>({ domain: [0, 600], range: [0.5, 8] });
14+
15+
const initialTransform = {
16+
scaleX: 1.27,
17+
scaleY: 1.27,
18+
translateX: -211.62,
19+
translateY: 162.59,
20+
skewX: 0,
21+
skewY: 0,
22+
};
323

424
/**
525
* @var colors: Colors array for the diffrerent node branches, each color is for a different branch
@@ -34,10 +54,17 @@ const filterHooks = (data: any[]) => {
3454
* @method maked3Tree :Creates a new D3 Tree
3555
*/
3656

37-
function History(props) {
38-
let { hierarchy } = props;
57+
function History(props: any) {
58+
//visx zoom first
59+
const [showMiniMap, setShowMiniMap] = useState<boolean>(true);
60+
61+
const { width, height, hierarchy, dispatch, sliderIndex, viewIndex } = props;
62+
console.log(
63+
`inside History tab -> width is ${width} and height is ${height}`
64+
);
3965
let root = JSON.parse(JSON.stringify(hierarchy));
4066
let isRecoil = false;
67+
// console.log('before makedTree, hierarchy is, ', hierarchy);
4168
let HistoryRef = React.createRef(root); //React.createRef(root);
4269
useEffect(() => {
4370
maked3Tree();
@@ -72,7 +99,7 @@ function History(props) {
7299
// d3.hierarchy constructs a root node from the specified hierarchical data
73100
// (our object titled dataset), which must be an object representing the root node
74101
const hierarchy = d3.hierarchy(root);
75-
102+
// console.log('after maked3tree, hierarchy is now: ', hierarchy);
76103
const tree = d3
77104
.tree()
78105
.nodeSize([width / 10, height / 10])
@@ -134,43 +161,24 @@ function History(props) {
134161
return 'translate(' + reinfeldTidierAlgo(d.x, d.y) + ')';
135162
});
136163

164+
// here we the node circle is created and given a radius size, we are also giving it a mouseover and onClick functionality
165+
// mouseover will highlight the node while onClick will dispatch changeSlider and changeView actions. This will act as a timeJump request.
166+
//
137167
node
138168
.append('circle')
139-
.attr('r', 15)
140-
.on('mouseover', function (d: any) {
141-
d3.select(this).transition(100).duration(20).attr('r', 25);
142-
143-
tooltipDiv.transition().duration(50).style('opacity', 0.9);
144-
145-
if (d.data.stateSnapshot.children[0].name === 'RecoilRoot') {
146-
isRecoil = true;
147-
}
148-
if (!isRecoil) {
149-
tooltipDiv
150-
.html(filterHooks(d.data.stateSnapshot.children), this)
151-
.style('left', d3.event.pageX - 90 + 'px')
152-
.style('top', d3.event.pageY - 65 + 'px');
153-
} else {
154-
tooltipDiv
155-
.html(
156-
'Load Time : ' +
157-
JSON.stringify(
158-
d.data.stateSnapshot.children[0].componentData.actualDuration
159-
).substring(0, 5) +
160-
' ms',
161-
this
162-
)
163-
.style('left', d3.event.pageX - 90 + 'px')
164-
.style('top', d3.event.pageY - 65 + 'px');
165-
}
169+
.attr('r', 13)
170+
.on('mouseover', function (d: `Record<string, unknown>`) {
171+
d3.select(this).transition(100).duration(20).attr('r', 20);
172+
})
173+
.on('click', function (d: `Record<string, unknown>`) {
174+
const index = parseInt(`${d.data.name}.${d.data.branch}`);
175+
dispatch(changeSlider(index));
176+
dispatch(changeView(index));
166177
})
167-
// eslint-disable-next-line no-unused-vars
168-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
169178
.on('mouseout', function (d: any) {
170-
d3.select(this).transition().duration(300).attr('r', 15);
171-
172-
tooltipDiv.transition().duration(400).style('opacity', 0);
179+
d3.select(this).transition().duration(300).attr('r', 13);
173180
});
181+
174182
node
175183
.append('text')
176184
// adjusts the y coordinates for the node text
@@ -193,6 +201,7 @@ function History(props) {
193201
})
194202
.text(function (d: { data: { name: number; branch: number } }) {
195203
// display the name of the specific patch
204+
// return `${d.data.name}.${d.data.branch}`;
196205
return `${d.data.name}.${d.data.branch}`;
197206
});
198207

@@ -201,7 +210,7 @@ function History(props) {
201210
svgContainer.call(
202211
zoom.transform,
203212
// Changes the initial view, (left, top)
204-
d3.zoomIdentity.translate(width / 2, height / 2).scale(1)
213+
d3.zoomIdentity.translate(width / 3, height / 4).scale(1)
205214
);
206215
// allows the canvas to be zoom-able
207216
svgContainer.call(
@@ -250,10 +259,21 @@ function History(props) {
250259
return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
251260
}
252261
};
262+
// console.log('have we hit maked3dtree');
263+
// below we are rendering the LegendKey component and passing hierarchy as props
264+
// then rendering each node in History tab to render using D3
253265

254266
return (
255267
<>
256-
<div ref={HistoryRef} className="history-d3-div" id="historyContainer" />
268+
<div>
269+
<LegendKey hierarchy={hierarchy} />
270+
<div
271+
ref={HistoryRef}
272+
className="history-d3-div"
273+
id="historyContainer"
274+
// position="absolute"
275+
/>
276+
</div>
257277
</>
258278
);
259279
}

‎src/app/components/StateRoute.tsx

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
} from 'react-router-dom';
1414
import Tree from './Tree';
1515
import ComponentMap from './ComponentMap';
16+
import { changeView, changeSlider } from '../actions/actions';
17+
import { useStoreContext } from '../store';
1618
import PerformanceVisx from './PerformanceVisx';
1719
import Legend from './AtomsRelationshipLegend'
1820
import { ParentSize } from '@visx/responsive';
@@ -44,6 +46,9 @@ export interface StateRouteProps {
4446

4547
const StateRoute = (props: StateRouteProps) => {
4648
const { snapshot, hierarchy, snapshots, viewIndex } = props;
49+
50+
const [{ tabs, currentTab }, dispatch] = useStoreContext();
51+
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
4752
const isRecoil = snapshot.atomsComponents ? true : false;
4853
const [noRenderData, setNoRenderData] = useState(false);
4954
// component map zoom state
@@ -74,18 +79,10 @@ const StateRoute = (props: StateRouteProps) => {
7479
// the hierarchy gets set on the first click in the page
7580
// when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
7681
// if true involk render chart with hierarchy
82+
//* we wrap History in a ParentSize div, in order to make use of Visx's Zoom functionality
7783
const renderHistory = () => {
7884
if (hierarchy) {
79-
return (
80-
<div>
81-
<div>
82-
<Legendary hierarchy={hierarchy} />
83-
</div>
84-
<div>
85-
<History hierarchy={hierarchy} />
86-
</div>
87-
</div>
88-
);
85+
return <History hierarchy={hierarchy} />;
8986
}
9087
return <div className="noState">{NO_STATE_MSG}</div>;
9188
};
@@ -114,15 +111,17 @@ const StateRoute = (props: StateRouteProps) => {
114111
const renderPerfView = () => {
115112
if (hierarchy) {
116113
return (
117-
<ParentSize>{({ width, height }) =>
118-
<PerformanceVisx
119-
width={width}
120-
height={height}
121-
snapshots={snapshots}
122-
hierarchy={hierarchy}
123-
/>}
114+
<ParentSize>
115+
{({ width, height }) => (
116+
<PerformanceVisx
117+
width={width}
118+
height={height}
119+
snapshots={snapshots}
120+
hierarchy={hierarchy}
121+
/>
122+
)}
124123
</ParentSize>
125-
124+
126125
// <PerfView
127126
// viewIndex={viewIndex}
128127
// snapshots={snapshots}

‎src/app/components/legend.tsx

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,48 @@ import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
44

55
// implement algorithm to check snapshot history and their respective colors
66

7-
const legendGlyphSize = 12;
7+
const legendGlyphSize = 8;
88

9-
export default function Legendary(props: any) {
10-
// { events = false }: { events?: boolean }) {
9+
type snapHierarchy = {`Record<string, unknown>`}
10+
};
1111

12+
export default function LegendKey(props: snapHierarchy) {
1213
const { hierarchy } = props;
14+
// console.log('which ends up being, hierarchy: ', hierarchy);
15+
16+
// We are taking the array of displayNames and sifting through them and placing each set of
17+
// branches as a key in an object, { '.0': [1.0, 2.0, 3.0, 4.0], '.1': [1.1, 2.1, 3.1,...], '.2': [....]}
18+
// we then take that and place it in an array, with each element being a range of the values in that branch -> ['1.0-4.0', '1.1-6.1',...]
19+
function colorRanger(snapshotIdsArray) {
20+
const resultRangeColor = {};
21+
22+
for (let i = 0; i < snapshotIdsArray.length; i += 1) {
23+
const current = snapshotIdsArray[i];
24+
let key = current - Math.floor(current);
25+
key = key.toFixed(2);
26+
27+
if (current % 1 === 0) {
28+
key = current - Math.floor(current);
29+
resultRangeColor[key]
30+
? resultRangeColor[key].push(current)
31+
: (resultRangeColor[key] = [current]);
32+
} else if (current - Math.floor(current) !== 0) {
33+
resultRangeColor[key]
34+
? resultRangeColor[key].push(current)
35+
: (resultRangeColor[key] = [current]);
36+
}
37+
}
38+
// now we convert the object to an array, each index being a string of the range of the branch
39+
const branchesArr = [];
40+
const arrValues = Object.values(resultRangeColor);
41+
42+
for (let i = 0; i < arrValues.length; i += 1) {
43+
const len = arrValues[i].length;
44+
const tempVal = `${arrValues[i][0]} - ${arrValues[i][len - 1]}`;
45+
branchesArr.push(tempVal);
46+
}
47+
return branchesArr;
48+
}
1349

1450
const getSnapshotIds = (obj, snapshotIds = []) => {
1551
snapshotIds.push(`${obj.name}.${obj.branch}`);
@@ -18,14 +54,15 @@ export default function Legendary(props: any) {
1854
getSnapshotIds(child, snapshotIds);
1955
});
2056
}
21-
return snapshotIds;
57+
const resultRange = colorRanger(snapshotIds);
58+
return resultRange;
2259
};
2360

61+
// invoking getSnaphshotIds, which will ultimately return our array of split up branches
2462
const snap = getSnapshotIds(hierarchy);
2563

2664
const ordinalColorScale = scaleOrdinal<number, string>({
2765
domain: snap,
28-
// sync in with the snapshot color chosen in history tab already
2966
range: [
3067
'#95B6B7',
3168
'#475485',
@@ -51,14 +88,14 @@ export default function Legendary(props: any) {
5188
<LegendVisual title="State Snapshots">
5289
<LegendOrdinal scale={ordinalColorScale}>
5390
{(labels) => (
54-
<div style={{ display: 'flex', flexDirection: 'row' }}>
91+
<div style={{ display: 'flex', flexDirection: 'column' }}>
5592
{labels.map((label, i) => (
5693
<LegendItem
5794
key={`legend-quantile-${i}`}
5895
margin="0 5px"
59-
// onClick={() => {
60-
// if (events) alert(`clicked: ${JSON.stringify(label)}`);
61-
// }}
96+
onClick={() => {
97+
// if (Event) alert('clicked: YO BRILLIANT GENIUS');
98+
}}
6299
>
63100
<svg width={10} height={10}>
64101
<rect
@@ -80,11 +117,13 @@ export default function Legendary(props: any) {
80117
<style jsx>
81118
{`
82119
.legends {
120+
position: center;
121+
width: 25%;
83122
font-family: arial;
84123
font-weight: 900;
85-
background-color: 242529;
124+
// background-color: 242529;
86125
border-radius: 14px;
87-
padding: 24px 24px 24px 32px;
126+
padding: 2px 2px 2px 2px;
88127
overflow-y: auto;
89128
flex-grow: 1;
90129
}
@@ -108,6 +147,8 @@ function LegendVisual({
108147
<style jsx>
109148
{`
110149
.legend {
150+
position: absolute;
151+
with: 120px;
111152
line-height: 0.9em;
112153
color: #efefef;
113154
font-size: 9px;

0 commit comments

Comments
 (0)