Skip to content

Commit 625a64a

Browse files
lind-tanialind-tania
authored
Merge pull request #3 from oslabs-beta/reactime7
Reactime7
2 parents 528f416 + 3282352 commit 625a64a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1752
-1426
lines changed

‎archive/pre-v4-demo.gif

-2.29 MB
Binary file not shown.

‎babel.config.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎build.zip

-228 KB
Binary file not shown.

‎docs/assets/css/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1662,7 +1662,7 @@ a:hover {
16621662
}
16631663

16641664
code, pre {
1665-
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
1665+
font-family: 'Roboto', sans-serif;
16661666
padding: 0.2em;
16671667
margin: 0;
16681668
font-size: 14px;

‎package.json

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@
6060
],
6161
"license": "ISC",
6262
"devDependencies": {
63-
"@babel/core": "^7.10.5",
63+
"@babel/core": "^7.12.7",
6464
"@babel/plugin-proposal-class-properties": "^7.10.4",
6565
"@babel/plugin-proposal-decorators": "^7.10.5",
66-
"@babel/preset-env": "^7.10.4",
67-
"@babel/preset-react": "^7.10.4",
66+
"@babel/preset-env": "^7.12.7",
67+
"@babel/preset-react": "^7.12.7",
6868
"@types/chrome": "^0.0.119",
6969
"@types/d3-scale-chromatic": "^2.0.0",
7070
"@types/jest": "^26.0.4",
71-
"@types/node": "^12.12.50",
71+
"@types/node": "^12.19.6",
7272
"@typescript-eslint/eslint-plugin": "^3.6.1",
7373
"@typescript-eslint/parser": "^3.6.1",
7474
"babel-loader": "^8.1.0",
@@ -107,6 +107,11 @@
107107
"webpack-cli": "^3.3.12"
108108
},
109109
"dependencies": {
110+
"@fortawesome/fontawesome-free": "^5.15.1",
111+
"@fortawesome/fontawesome-svg-core": "^1.2.32",
112+
"@fortawesome/free-regular-svg-icons": "^5.15.1",
113+
"@fortawesome/free-solid-svg-icons": "^5.15.1",
114+
"@fortawesome/react-fontawesome": "^0.1.12",
110115
"@visx/axis": "^1.0.0",
111116
"@visx/clip-path": "^1.0.0",
112117
"@visx/event": "^1.0.0",

‎src/app/components/Action.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable react/require-default-props */
22
/* eslint-disable @typescript-eslint/no-explicit-any */
33
/* eslint-disable react/no-unused-prop-types */
4+
45
import React from 'react';
56
import { changeView, changeSlider } from '../actions/actions';
67

‎src/app/components/App.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
import React, { useReducer } from 'react';
23
import MainContainer from '../containers/MainContainer';
34
import { StoreContext } from '../store';

‎src/app/components/AtomsRelationship.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
import React, { useMemo } from 'react';
24
import { Group } from '@visx/group';
35
import { Cluster, hierarchy } from '@visx/hierarchy';
@@ -207,12 +209,12 @@ function RootNode({ node }) {
207209
x={centerX}
208210
rx="10"
209211
ry="10"
210-
fill="url('#top')"
212+
// fill="url('#top')"
211213
/>
212214
<text
213215
dy=".33em"
214-
top={node.y}
215-
left={node.x}
216+
// top={node.y}
217+
// left={node.x}
216218
fontSize={9}
217219
fontFamily="Arial"
218220
textAnchor="middle"
@@ -305,7 +307,8 @@ export default function AtomsRelationship({
305307
<>
306308
<div>
307309
<Legend
308-
hierarchy = {hierarchy} />
310+
// hierarchy = {hierarchy}
311+
/>
309312
</div>
310313
<svg width={width} height={height}>
311314

‎src/app/components/AtomsRelationshipLegend.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {
44
LegendOrdinal,
55
LegendItem,
66
LegendLabel,
7+
78
} from '@visx/legend';
89

9-
1010
const ordinalColorScale = scaleOrdinal({
1111
domain: ['Root', 'Selectors', 'Atoms', 'Components'],
1212
range: [ '#3BB78F', '#f0ece2', '#FED8B1', '#acdbdf'],
@@ -48,7 +48,7 @@ export default function Legend({ events = false }: { events?: boolean }) {
4848
)}
4949
</LegendOrdinal>
5050
</LegendDemo>
51-
<style jsx>
51+
<style>
5252
{`
5353
.legends {
5454
width: 25%;
@@ -65,12 +65,12 @@ export default function Legend({ events = false }: { events?: boolean }) {
6565
);
6666
}
6767

68-
function LegendDemo({ title, children }: { title: string; children: React.ReactNode }) {
68+
function LegendDemo({ title, children }: { title: string; children: JSX.Element }) {
6969
return (
7070
<div className="legend">
7171
<div className="title">{title}</div>
7272
{children}
73-
<style jsx>{`
73+
<style>{`
7474
.legend {
7575
position: absolute;
7676
top: 50;

‎src/app/components/ComponentMap.tsx

Lines changed: 53 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
/* eslint-disable arrow-body-style */
2-
/* eslint-disable max-len */
3-
/* eslint-disable @typescript-eslint/no-explicit-any */
4-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
5-
/* eslint-disable @typescript-eslint/ban-types */
1+
// @ts-nocheck
62
import React, { useState } from 'react';
73
import { Group } from '@visx/group';
84
import { hierarchy, Tree } from '@visx/hierarchy';
@@ -11,10 +7,29 @@ import { pointRadial } from 'd3-shape';
117
import useForceUpdate from './useForceUpdate';
128
import LinkControls from './LinkControls';
139
import getLinkComponent from './getLinkComponent';
14-
import { onHover, onHoverExit } from '../actions/actions'
15-
import { useStoreContext } from '../store'
10+
import { onHover, onHoverExit } from '../actions/actions';
11+
import { useStoreContext } from '../store';
1612

17-
const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
13+
14+
const root = hierarchy({
15+
name: 'root',
16+
children: [
17+
{ name: 'child #1' },
18+
{
19+
name: 'child #2',
20+
children: [{ name: 'grandchild #1' }, { name: 'grandchild #2' }, { name: 'grandchild #3' }],
21+
},
22+
],
23+
});
24+
interface TreeNode {
25+
name: string;
26+
isExpanded?: boolean;
27+
children?: TreeNode[];
28+
}
29+
30+
type HierarchyNode = HierarchyPointNode<TreeNode>;
31+
32+
const defaultMargin = { top: 30, left: 30, right: 55, bottom: 70 };
1833

1934
export type LinkTypesProps = {
2035
width: number;
@@ -34,13 +49,12 @@ export default function ComponentMap({
3449
const [{ tabs, currentTab }, dispatch] = useStoreContext();
3550
// 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.
3651
const lastNode = snapshots.length - 1;
37-
const data = snapshots[lastNode];
52+
const data: {} = snapshots[lastNode];
3853
// importing custom hooks for the selection tabs.
39-
const [layout, setLayout] = useState<string>('cartesian');
40-
const [orientation, setOrientation] = useState<string>('horizontal');
41-
const [linkType, setLinkType] = useState<string>('diagonal');
42-
43-
const [stepPercent, setStepPercent] = useState<number>(10);
54+
const [layout, setLayout] = useState('cartesian');
55+
const [orientation, setOrientation] = useState('horizontal');
56+
const [linkType, setLinkType] = useState('diagonal');
57+
const [stepPercent, setStepPercent] = useState(10);
4458
// 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
4559
const forceUpdate = useForceUpdate();
4660
// setting the margins for the Map to render in the tab window.
@@ -87,9 +101,10 @@ export default function ComponentMap({
87101
setStepPercent={setStepPercent}
88102
/>
89103

104+
90105
<svg width={totalWidth} height={totalHeight}>
91106
<LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
92-
<rect width={totalWidth} height={totalHeight} rx={14} fill='#242529' />
107+
<rect width={totalWidth} height={totalHeight} rx={14} fill='#242529'/>
93108
<Group top={margin.top} left={margin.left}>
94109
<Tree
95110
root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
@@ -103,15 +118,22 @@ export default function ComponentMap({
103118
key={i}
104119
data={link}
105120
percent={stepPercent}
106-
stroke='rgb(254,110,158,0.6)'
121+
stroke='#ff6569'
107122
strokeWidth='1'
108123
fill='none'
109124
/>
110125
))}
111126

112127
{tree.descendants().map((node, key) => {
113-
const width = 40;
114-
const height = 15;
128+
// const width = (node.data.name.length) + 70;
129+
const widthFunc = (name) => {
130+
let nodeLength = name.length;
131+
if (nodeLength < 5) return nodeLength + 40;
132+
if (nodeLength < 10) return nodeLength + 60;
133+
return nodeLength + 70;
134+
}
135+
const width = widthFunc(node.data.name);
136+
const height = 25;
115137

116138
let top: number;
117139
let left: number;
@@ -133,9 +155,10 @@ export default function ComponentMap({
133155
<circle
134156
r={12}
135157
fill="url('#links-gradient')"
158+
stroke="#ff6569"
136159
onClick={() => {
137160
node.data.isExpanded = !node.data.isExpanded;
138-
console.log(node);
161+
// console.log(node);
139162
forceUpdate();
140163
}}
141164
/>
@@ -147,16 +170,17 @@ export default function ComponentMap({
147170
width={width}
148171
y={-height / 2}
149172
x={-width / 2}
150-
fill='#272b4d'
151-
stroke={node.data.children ? '#03c0dc' : '#26deb0'}
173+
fill= {node.children ? '#161521' : '#62d6fb'}
174+
stroke={node.children ? '#62d6fb' : '#161521'}
152175
strokeWidth={1}
153-
strokeDasharray={node.data.children ? '0' : '2,2'}
154-
strokeOpacity={node.data.children ? 1 : 0.6}
155-
rx={node.data.children ? 0 : 10}
176+
strokeDasharray={node.children ? '0' : '2,2'}
177+
strokeOpazcity='1'
178+
rx={node.children ? 4 : 10}
156179
onClick={() => {
157180
node.data.isExpanded = !node.data.isExpanded;
158181
forceUpdate();
159182
}}
183+
//check with recoil
160184
onMouseLeave={()=> {
161185
if(Object.keys(node.data.recoilDomNode).length > 0){
162186
dispatch(onHoverExit(node.data.recoilDomNode[node.data.name]))
@@ -170,22 +194,22 @@ export default function ComponentMap({
170194
} else {
171195
dispatch(onHover(node.data.rtid))
172196
}
173-
}
197+
}}
174198
/>
175199
)}
176200
{/* Display text inside of each component node */}
177201
<text
178202
dy='.33em'
179-
fontSize={9}
180-
fontFamily='Arial'
203+
fontSize={10}
204+
fontFamily='Roboto'
181205
textAnchor='middle'
182206
style={{ pointerEvents: 'none' }}
183207
fill={
184208
node.depth === 0
185-
? '#71248e'
209+
? '#161521'
186210
: node.children
187211
? 'white'
188-
: '#26deb0'
212+
: '#161521'
189213
}
190214
>
191215
{node.data.name}

0 commit comments

Comments
 (0)