Skip to content

Commit 231301a

Browse files
TheqwertypusherTheqwertypusher
authored
Merge branch 'staging' into performancehover
2 parents 5d55067 + 2505a18 commit 231301a

File tree

7 files changed

+414
-94
lines changed

7 files changed

+414
-94
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@
108108
},
109109
"dependencies": {
110110
"@visx/axis": "^1.0.0",
111+
"@visx/clip-path": "^1.0.0",
112+
"@visx/event": "^1.0.0",
111113
"@visx/glyph": "^1.0.0",
112114
"@visx/gradient": "^1.0.0",
113115
"@visx/grid": "^1.0.0",
@@ -119,6 +121,7 @@
119121
"@visx/shape": "^1.0.0",
120122
"@visx/text": "^1.0.0",
121123
"@visx/tooltip": "^1.0.0",
124+
"@visx/zoom": "^1.0.0",
122125
"acorn": "^7.3.1",
123126
"acorn-jsx": "^5.2.0",
124127
"bower": "^1.8.8",

‎src/app/components/AtomsRelationship.tsx

Lines changed: 72 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Cluster, hierarchy } from '@visx/hierarchy';
55
import { LinkVertical } from '@visx/shape';
66
import { LinearGradient } from '@visx/gradient';
77
import { StateRouteProps} from './StateRoute'
8+
import { onHover, onHoverExit } from '../actions/actions'
9+
import { useStoreContext } from '../store'
810
import Legend from './AtomsRelationshipLegend'
911

1012
export const blue = '#acdbdf';
@@ -39,8 +41,10 @@ interface selectorsCache {
3941

4042

4143
const clusterData : clusterShape = {};
42-
const selectorsCache :selectorsCache = {}
43-
44+
const selectorsCache :selectorsCache = {};
45+
const bothObj = {};
46+
47+
4448
let initialFire = false
4549
function clusterDataPopulate(props:StateRouteProps) {
4650
let atomCompObj = reorganizedCompObj(props);
@@ -58,10 +62,14 @@ function clusterDataPopulate(props:StateRouteProps) {
5862
let outerobj:outerObjShape = {}
5963
outerobj.name = key
6064
selectorsCache[key] = true
65+
66+
if(!bothObj[key]){
67+
bothObj[key] = []
68+
}
69+
6170

6271
if(props[0].atomSelectors[key].length){
6372
for(let i=0; i<props[0].atomSelectors[key].length;i++){
64-
6573
if(!outerobj.children) outerobj.children = []
6674
let innerobj:innerObjShape = {}
6775
innerobj.name = props[0].atomSelectors[key][i]
@@ -70,8 +78,15 @@ function clusterDataPopulate(props:StateRouteProps) {
7078
//if atoms contain components
7179
if(atomCompObj[props[0].atomSelectors[key][i]]){
7280
for(let j=0; j<atomCompObj[props[0].atomSelectors[key][i]].length;j++){
81+
if(!bothObj[props[0].atomSelectors[key][i]]){
82+
bothObj[props[0].atomSelectors[key][i]] = []
83+
}
84+
bothObj[props[0].atomSelectors[key][i]].push(atomCompObj[props[0].atomSelectors[key][i]][0])
85+
7386
if(!innerobj.children) innerobj.children = []
7487
innerobj.children.push({name:atomCompObj[props[0].atomSelectors[key][i]]})
88+
bothObj[key].push(atomCompObj[props[0].atomSelectors[key][i]][0])
89+
7590
}
7691
}
7792
outerobj.children.push(innerobj)
@@ -82,6 +97,11 @@ function clusterDataPopulate(props:StateRouteProps) {
8297
if(atomCompObj[key] && atomCompObj[key].length){
8398
for (let i=0; i<atomCompObj[key].length;i++){
8499
outerobj.children.push({name:atomCompObj[key][i]})
100+
101+
if(!bothObj[key]){
102+
bothObj[key] = []
103+
}
104+
bothObj[key].push(atomCompObj[key][i])
85105
}
86106
}
87107

@@ -93,9 +113,11 @@ function clusterDataPopulate(props:StateRouteProps) {
93113
let outObj:outerObjShape = {};
94114
if(!selectorsCache[key]){
95115
outObj.name = key
116+
if(!bothObj[key]) bothObj[key] = []
96117
for (let i=0; i<atomCompObj[key].length;i++){
97118
if(!outObj.children) outObj.children = []
98119
outObj.children.push({name:atomCompObj[key][i]})
120+
bothObj[key].push(atomCompObj[key][i])
99121
}
100122
clusterData.children.push(outObj)
101123
}
@@ -121,13 +143,14 @@ function reorganizedCompObj(props) {
121143
return reorganizedCompObj;
122144
}
123145

124-
function Node({ node }) {
146+
function Node({ node, snapshots, dispatch, bothObj}) {
147+
// const [dispatch] = useStoreContext();
125148
const selector = node.depth === 1 && node.height === 2
126149
const isRoot = node.depth === 0;
127150
const isParent = !!node.children;
128-
151+
129152
if (isRoot) return <RootNode node={node} />;
130-
if (selector) return <SelectorNode node = {node}/>;
153+
if (selector) return <SelectorNode node = {node} snapshots = {snapshots} bothObj = {bothObj} dispatch = {dispatch}/>;
131154

132155
return (
133156
<Group top={node.y} left={node.x}>
@@ -136,9 +159,16 @@ function Node({ node }) {
136159
r={12}
137160
fill={isParent ? orange : blue}
138161
stroke={isParent ? orange : blue}
139-
// onClick={() => {
140-
// alert(`clicked: ${JSON.stringify(node.data.name)}`);
141-
// }}
162+
onMouseLeave={()=> {
163+
for (let i=0; i<bothObj[node.data.name].length; i++){
164+
dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
165+
}
166+
}}
167+
onMouseEnter={()=> {
168+
for (let i=0; i<bothObj[node.data.name].length; i++){
169+
dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
170+
}
171+
}}
142172
/>
143173
)}
144174
<text
@@ -157,6 +187,7 @@ function Node({ node }) {
157187
}
158188

159189
function RootNode({ node }) {
190+
160191
const width = 40;
161192
const height = 20;
162193
const centerX = -width / 2;
@@ -190,17 +221,24 @@ function RootNode({ node }) {
190221
);
191222
}
192223

193-
function SelectorNode({ node }) {
224+
function SelectorNode({ node, snapshots, dispatch, bothObj}) {
194225
return (
195226
<Group top={node.y} left={node.x}>
196227
{node.depth !== 0 && (
197228
<circle
198229
r={12}
199230
fill={selectWhite}
200231
stroke={selectWhite}
201-
// onClick={() => {
202-
// alert(`clicked: ${JSON.stringify(node.data.name)}`);
203-
// }}
232+
onMouseLeave={()=> {
233+
for (let i=0; i<bothObj[node.data.name].length; i++){
234+
dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
235+
}
236+
}}
237+
onMouseEnter={()=> {
238+
for (let i=0; i<bothObj[node.data.name].length; i++){
239+
dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
240+
}
241+
}}
204242
/>
205243
)}
206244
<text
@@ -218,6 +256,15 @@ function SelectorNode({ node }) {
218256
);
219257
}
220258

259+
function removeDup(bothObj){
260+
let filteredObj = {}
261+
for (let key in bothObj){
262+
let array = bothObj[key].filter((a,b) => bothObj[key].indexOf(a) === b)
263+
filteredObj[key] = array
264+
}
265+
return filteredObj
266+
}
267+
221268
const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
222269

223270
// export type DendrogramProps = {
@@ -226,13 +273,18 @@ const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
226273
// margin?: { top: number; right: number; bottom: number; left: number };
227274
// };
228275

229-
export default function Example({
276+
export default function AtomsRelationship({
230277
width,
231278
height,
232279
margin = defaultMargin,
233280
snapshots,
234281
}) {
235282

283+
284+
let filtered = removeDup(bothObj)
285+
286+
const [{ tabs, currentTab }, dispatch] = useStoreContext();
287+
236288
if(!initialFire){
237289
clusterDataPopulate(snapshots);
238290
}
@@ -262,11 +314,15 @@ export default function Example({
262314
stroke={merlinsbeard}
263315
strokeWidth="1"
264316
strokeOpacity={0.2}
265-
fill="none"
317+
fill="none"
266318
/>
267319
))}
268320
{cluster.descendants().map((node, i) => (
269-
<Node key={`cluster-node-${i}`} node={node} />
321+
<Node key={`cluster-node-${i}`}
322+
node={node}
323+
bothObj = {filtered}
324+
snapshots = {snapshots}
325+
dispatch = {dispatch} />
270326
))}
271327
</Group>
272328
)}

‎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
}

0 commit comments

Comments
 (0)