Skip to content

Commit 800361a

Browse files
TheqwertypusherTheqwertypusher
authored
Merge branch 'master' into staging
2 parents bab5fd0 + e938454 commit 800361a

File tree

4 files changed

+48
-44
lines changed

4 files changed

+48
-44
lines changed

‎src/app/components/ComponentMap.tsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ import getLinkComponent from './getLinkComponent';
1414
import { onHover, onHoverExit } from '../actions/actions'
1515
import { useStoreContext } from '../store'
1616

17-
const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
17+
// setting the base margins for the Map to render in the Chrome extension window.
18+
const defaultMargin = { top: 30, left: 30, right: 30, bottom: 30 };
1819

20+
// export these types because this will only be used on this page, interface not needed as it will not be re-used.
1921
export type LinkTypesProps = {
2022
width: number;
2123
height: number;
@@ -32,24 +34,26 @@ export default function ComponentMap({
3234
}: LinkTypesProps) {
3335

3436
const [{ tabs, currentTab }, dispatch] = useStoreContext();
35-
// preparing the data to be used for render
37+
// This is where we select the last object in the snapshots array from props to allow hierarchy to parse the data for render on the component map per hierarchy layout specifications.
3638
const lastNode = snapshots.length - 1;
3739
const data = snapshots[lastNode];
40+
// importing custom hooks for the selection tabs.
3841

3942
const [layout, setLayout] = useState<string>('cartesian');
4043
const [orientation, setOrientation] = useState<string>('horizontal');
4144
const [linkType, setLinkType] = useState<string>('diagonal');
42-
const [stepPercent, setStepPercent] = useState<number>(0.5);
45+
const [stepPercent, setStepPercent] = useState<number>(10);
4346
const forceUpdate = useForceUpdate();
44-
// setting the margins for the Map to render in the tab
47+
4548
const innerWidth = totalWidth - margin.left - margin.right;
4649
const innerHeight = totalHeight - margin.top - margin.bottom;
4750

4851
let origin: { x: number; y: number };
4952
let sizeWidth: number;
5053
let sizeHeight: number;
5154

52-
// rendering for the different tab selections
55+
// Conditional statement sets the location of the root node in the middle of the window
56+
// Else statement sets the location of the root node to the right or top of the window per dropdown selection.
5357
if (layout === 'polar') {
5458
origin = {
5559
x: innerWidth / 2,
@@ -67,7 +71,12 @@ export default function ComponentMap({
6771
sizeHeight = innerWidth;
6872
}
6973
}
70-
// controls for the map
74+
75+
// render controls for the map
76+
// svg - complete layout of self contained component map
77+
// Tree is rendering each component from the component tree.
78+
// rect- Contains both text and rectangle node information for rendering each component on the map.
79+
// circle- setup and layout for the root node.
7180
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
7281
return totalWidth < 10 ? null : (
7382
<div>
@@ -89,7 +98,7 @@ export default function ComponentMap({
8998
<Tree
9099
root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
91100
size={[sizeWidth, sizeHeight]}
92-
separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
101+
separation={(a, b) => (a.parent === b.parent ? 10 : 0) / a.depth}
93102
>
94103
{(tree) => (
95104
<Group top={origin.y} left={origin.x}>
@@ -103,7 +112,7 @@ export default function ComponentMap({
103112
fill='none'
104113
/>
105114
))}
106-
115+
translate
107116
{tree.descendants().map((node, key) => {
108117
const width = 40;
109118
const height = 15;

‎src/app/components/LinkControls.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import { link } from 'fs';
12
import React from 'react';
23

34
const controlStyles = { fontSize: 10 };
4-
5+
// props for orientation controls
56
type Props = {
67
layout: string;
78
orientation: string;
@@ -12,7 +13,7 @@ type Props = {
1213
setLinkType: (linkType: string) => void;
1314
setStepPercent: (percent: number) => void;
1415
};
15-
16+
// below are the control options for each of the drop downs.
1617
export default function LinkControls({
1718
layout,
1819
orientation,
@@ -54,7 +55,6 @@ export default function LinkControls({
5455
>
5556
<option value='diagonal'>Diagonal</option>
5657
<option value='step'>Step</option>
57-
<option value='curve'>Curve</option>
5858
<option value='line'>Line</option>
5959
</select>
6060
{linkType === 'step' && layout !== 'polar' && (
@@ -65,7 +65,7 @@ export default function LinkControls({
6565
onClick={(e) => e.stopPropagation()}
6666
type='range'
6767
min={0}
68-
max={1}
68+
max={5}
6969
step={0.1}
7070
onChange={(e) => setStepPercent(Number(e.target.value))}
7171
value={stepPercent}

‎src/app/components/StateRoute.tsx

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export interface StateRouteProps {
4545
const StateRoute = (props: StateRouteProps) => {
4646
const { snapshot, hierarchy, snapshots, viewIndex } = props;
4747

48+
4849
const [{ tabs, currentTab }, dispatch] = useStoreContext();
4950
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
5051
const isRecoil = snapshot.atomsComponents ? true : false;
@@ -71,13 +72,12 @@ const StateRoute = (props: StateRouteProps) => {
7172
</ParentSize>
7273
);
7374
}
74-
return <div className="noState">{NO_STATE_MSG}</div>;
75+
return <div className='noState'>{NO_STATE_MSG}</div>;
7576
};
7677

7778
// the hierarchy gets set on the first click in the page
7879
// when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
79-
// if true involk render chart with hierarchy
80-
//* we wrap History in a ParentSize div, in order to make use of Visx's Zoom functionality
80+
// if true invoke render chart with hierarchy
8181
const renderHistory = () => {
8282
if (hierarchy) {
8383
return (<History
@@ -87,7 +87,7 @@ const StateRoute = (props: StateRouteProps) => {
8787
viewIndex={viewIndex}
8888
/>)
8989
}
90-
return <div className="noState">{NO_STATE_MSG}</div>;
90+
return <div className='noState'>{NO_STATE_MSG}</div>;
9191
};
9292

9393
const renderAtomsRelationship = () => (
@@ -103,12 +103,12 @@ const StateRoute = (props: StateRouteProps) => {
103103

104104
// the hierarchy gets set on the first click in the page
105105
// when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
106-
// if true involk render Tree with snapshot
106+
// if true invoke render Tree with snapshot
107107
const renderTree = () => {
108108
if (hierarchy) {
109109
return <Tree snapshot={snapshot} />;
110110
}
111-
return <div className="noState">{NO_STATE_MSG}</div>;
111+
return <div className='noState'>{NO_STATE_MSG}</div>;
112112
};
113113

114114
const renderPerfView = () => {
@@ -134,55 +134,55 @@ const StateRoute = (props: StateRouteProps) => {
134134
// />
135135
);
136136
}
137-
return <div className="noState">{NO_STATE_MSG}</div>;
137+
return <div className='noState'>{NO_STATE_MSG}</div>;
138138
};
139139

140140
return (
141141
<Router>
142-
<div className="navbar">
142+
<div className='navbar'>
143143
<NavLink
144-
className="router-link"
145-
activeClassName="is-active"
144+
className='router-link'
145+
activeClassName='is-active'
146146
exact
147-
to="/"
147+
to='/'
148148
>
149149
Tree
150150
</NavLink>
151151
<NavLink
152-
className="router-link"
153-
activeClassName="is-active"
154-
to="/history"
152+
className='router-link'
153+
activeClassName='is-active'
154+
to='/history'
155155
>
156156
History
157157
</NavLink>
158-
<NavLink className="router-link" activeClassName="is-active" to="/map">
158+
<NavLink className='router-link' activeClassName='is-active' to='/map'>
159159
Map
160160
</NavLink>
161161

162162
{isRecoil && (
163163
<NavLink
164-
className="router-link"
165-
activeClassName="is-active"
166-
to="/relationship"
164+
className='router-link'
165+
activeClassName='is-active'
166+
to='/relationship'
167167
>
168168
AtomsRecoil
169169
</NavLink>
170170
)}
171171

172172
<NavLink
173-
className="router-link"
174-
activeClassName="is-active"
175-
to="/performance"
173+
className='router-link'
174+
activeClassName='is-active'
175+
to='/performance'
176176
>
177177
Performance
178178
</NavLink>
179179
</div>
180180
<Switch>
181-
<Route path="/map" render={renderComponentMap} />
182-
<Route path="/history" render={renderHistory} />
183-
<Route path="/relationship" render={renderAtomsRelationship} />
184-
<Route path="/performance" render={renderPerfView} />
185-
<Route path="/" render={renderTree} />
181+
<Route path='/map' render={renderComponentMap} />
182+
<Route path='/history' render={renderHistory} />
183+
<Route path='/relationship' render={renderAtomsRelationship} />
184+
<Route path='/performance' render={renderPerfView} />
185+
<Route path='/' render={renderTree} />
186186
</Switch>
187187
</Router>
188188
);

‎src/app/components/getLinkComponent.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
LinkRadialLine,
1414
} from '@visx/shape';
1515

16+
// conditional's to adjust the controls for the componentMap drop downs
1617
export default function getLinkComponent({
1718
layout,
1819
linkType,
@@ -27,8 +28,6 @@ export default function getLinkComponent({
2728
if (layout === 'polar') {
2829
if (linkType === 'step') {
2930
LinkComponent = LinkRadialStep;
30-
} else if (linkType === 'curve') {
31-
LinkComponent = LinkRadialCurve;
3231
} else if (linkType === 'line') {
3332
LinkComponent = LinkRadialLine;
3433
} else {
@@ -37,17 +36,13 @@ export default function getLinkComponent({
3736
} else if (orientation === 'vertical') {
3837
if (linkType === 'step') {
3938
LinkComponent = LinkVerticalStep;
40-
} else if (linkType === 'curve') {
41-
LinkComponent = LinkVerticalCurve;
4239
} else if (linkType === 'line') {
4340
LinkComponent = LinkVerticalLine;
4441
} else {
4542
LinkComponent = LinkVertical;
4643
}
4744
} else if (linkType === 'step') {
4845
LinkComponent = LinkHorizontalStep;
49-
} else if (linkType === 'curve') {
50-
LinkComponent = LinkHorizontalCurve;
5146
} else if (linkType === 'line') {
5247
LinkComponent = LinkHorizontalLine;
5348
} else {

0 commit comments

Comments
 (0)