Skip to content

Commit 19bebaa

Browse files
nusanamdavidchai717
nusanam
and
davidchai717
committed
changes
Co-authored-by: Ruth <[email protected]> Co-authored-by: David Chai <[email protected]>
1 parent d5b1412 commit 19bebaa

File tree

5 files changed

+108
-115
lines changed

5 files changed

+108
-115
lines changed

‎src/app/components/Chart.jsx

Lines changed: 91 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ import * as d3 from 'd3';
88

99
let root = {};
1010
let duration = 750;
11-
1211
class Chart extends Component {
13-
constructor() {
14-
super();
12+
constructor(props) {
13+
super(props);
1514
this.chartRef = React.createRef();
1615
this.maked3Tree = this.maked3Tree.bind(this);
1716
}
1817
componentDidMount() {
19-
const { snapshot } = this.props;
20-
root = JSON.parse(JSON.stringify(snapshot));
18+
const { hierarchy } = this.props;
19+
root = JSON.parse(JSON.stringify(hierarchy));
20+
console.log('props', this.props)
2121
this.maked3Tree();
2222
}
2323

2424
componentDidUpdate() {
25-
const { snapshot } = this.props;
26-
root = JSON.parse(JSON.stringify(snapshot));
25+
const { hierarchy } = this.props;
26+
root = JSON.parse(JSON.stringify(hierarchy));
2727
this.maked3Tree();
2828
}
2929

@@ -36,78 +36,78 @@ class Chart extends Component {
3636

3737
maked3Tree() {
3838
// this.removed3Tree();
39-
const snapshotHierarchy = {
40-
name: "rootNode",
41-
diffState: {},
42-
children: [
43-
{
44-
name: 'state1',
45-
children: [
46-
{
47-
name: 'state2',
48-
children: [
49-
{
50-
name: 'state3',
51-
children: [
52-
{
53-
name: 'state5'
54-
},
55-
]
56-
},
57-
{
58-
name: 'state4'
59-
},
60-
{
61-
name: 'state5'
62-
},
63-
{
64-
name: 'state6'
65-
},
66-
{
67-
name: 'state7'
68-
},
69-
{
70-
name: 'state8'
71-
},
72-
{
73-
name: 'state9'
74-
},
75-
{
76-
name: 'state10'
77-
},
78-
{
79-
name: 'state11'
80-
},
81-
{
82-
name: 'state12'
83-
},
84-
{
85-
name: 'state13'
86-
},
87-
{
88-
name: 'state14'
89-
},
90-
{
91-
name: 'state15'
92-
},
93-
{
94-
name: 'state16'
95-
},
96-
{
97-
name: 'state17'
98-
},
99-
{
100-
name: 'state18'
101-
},
102-
{
103-
name: 'state19'
104-
},
105-
]
106-
},
107-
]
108-
},
109-
]
110-
};
39+
// const snapshotHierarchy = {
40+
// name: "rootNode",
41+
// diffState: {},
42+
// children: [
43+
// {
44+
// name: 'state1',
45+
// children: [
46+
// {
47+
// name: 'state2',
48+
// children: [
49+
// {
50+
// name: 'state3',
51+
// children: [
52+
// {
53+
// name: 'state5'
54+
// },
55+
// ]
56+
// },
57+
// {
58+
// name: 'state4'
59+
// },
60+
// {
61+
// name: 'state5'
62+
// },
63+
// {
64+
// name: 'state6'
65+
// },
66+
// {
67+
// name: 'state7'
68+
// },
69+
// {
70+
// name: 'state8'
71+
// },
72+
// {
73+
// name: 'state9'
74+
// },
75+
// {
76+
// name: 'state10'
77+
// },
78+
// {
79+
// name: 'state11'
80+
// },
81+
// {
82+
// name: 'state12'
83+
// },
84+
// {
85+
// name: 'state13'
86+
// },
87+
// {
88+
// name: 'state14'
89+
// },
90+
// {
91+
// name: 'state15'
92+
// },
93+
// {
94+
// name: 'state16'
95+
// },
96+
// {
97+
// name: 'state17'
98+
// },
99+
// {
100+
// name: 'state18'
101+
// },
102+
// {
103+
// name: 'state19'
104+
// },
105+
// ]
106+
// },
107+
// ]
108+
// },
109+
// ]
110+
// };
111111

112112
let width = 900;
113113
let height = 1000;
@@ -116,45 +116,38 @@ class Chart extends Component {
116116
.attr('width', width)
117117
.attr('height', height);
118118

119-
const mock = [1, 3, 6, 'haha'];
120-
chartContainer.selectAll('g')
121-
.data(mock)
122-
.enter()
123-
.append('g')
124-
.text(d => 'haha');
125-
126119
let g = chartContainer
127120
.append("g")
128-
// this is changing where the graph is located physically
121+
// this is changing where the graph is located physically
129122
.attr("transform", `translate(${width / 2.5}, ${height / 2 + 90})`);
130-
131-
// if we consider the container for our radial node graph as a box encapsulating, half of this container width is essentially the radius of our radial node graph
123+
124+
// if we consider the container for our radial node graph as a box encapsulating, half of this container width is essentially the radius of our radial node graph
132125
let radius = width / 2;
133126

134127
// d3.hierarchy constructs a root node from the specified hierarchical data (our object titled dataset), which must be an object representing the root node
135-
let hierarchy = d3.hierarchy(snapshotHierarchy);
128+
let hierarchy = d3.hierarchy(root);
136129

137130
let tree = d3.tree()
138131
// this assigns width of tree to be 2pi
139132
.size([2 * Math.PI, radius])
140133

141-
let root = tree(hierarchy);
134+
let d3root = tree(hierarchy);
142135

143-
console.log('children', root.descendants());
136+
console.log('children', d3root.descendants());
144137

145138
g.selectAll('.link')
146139
// root.links() gets an array of all the links, where each element is an object containing a source property, which represents the link's source node, and a target property, which represents the link's target node.
147-
.data(root.links())
140+
.data(d3root.links())
148141
.enter()
149142
.append('path')
150143
.attr('class', 'link')
151144
.attr("d", d3.linkRadial()
152145
.angle(d => d.x)
153146
.radius(d => d.y));
154-
147+
155148
let node = g.selectAll(".node")
156149
// root.descendants gets an array of of all nodes
157-
.data(root.descendants())
150+
.data(d3root.descendants())
158151
.enter()
159152
.append("g")
160153
.attr("class", function (d) {
@@ -167,7 +160,8 @@ class Chart extends Component {
167160
node.append("circle")
168161
.attr("r", 5.5)
169162

170-
node.append("text")
163+
node
164+
.append("text")
171165
.attr("dy", "0.1em")
172166
.attr("x", function (d) {
173167
// this positions how far the text is from leaf nodes (ones without children)
@@ -177,7 +171,7 @@ class Chart extends Component {
177171
// this arranges the angle of the text
178172
.attr("transform", function (d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
179173
.text(function (d) {
180-
return d.data.name
174+
return d.data.index
181175
});
182176

183177
function reinfeldTidierAlgo(x, y) {

‎src/app/components/StateRoute.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import Chart from './Chart';
88
import Tree from './Tree';
99

10-
const StateRoute = ({ snapshot }) => (
10+
const StateRoute = ({ snapshot, hierarchy }) => (
1111
<Router>
1212
<div className="navbar">
1313
<NavLink className="router-link" activeClassName="is-active" exact to="/">
@@ -18,7 +18,7 @@ const StateRoute = ({ snapshot }) => (
1818
</NavLink>
1919
</div>
2020
<Switch>
21-
<Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
21+
<Route path="/chart" render={() => <Chart snapshot={snapshot} hierarchy={hierarchy} />} />
2222
<Route path="/" render={() => <Tree snapshot={snapshot} />} />
2323
</Switch>
2424
</Router>

‎src/app/containers/MainContainer.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function MainContainer() {
6565
</div>
6666
);
6767
}
68-
const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
68+
const { viewIndex, sliderIndex, snapshots, hierarchy } = tabs[currentTab];
6969

7070
// if viewIndex is -1, then use the sliderIndex instead
7171
const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
@@ -74,7 +74,7 @@ function MainContainer() {
7474
<HeadContainer />
7575
<div className="body-container">
7676
<ActionContainer />
77-
{snapshots.length ? <StateContainer snapshot={snapshotView} /> : null}
77+
{snapshots.length ? <StateContainer snapshot={snapshotView} hierarchy={hierarchy} /> : null}
7878
<TravelContainer snapshotsLength={snapshots.length} />
7979
<ButtonsContainer />
8080
</div>

‎src/app/containers/StateContainer.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import {
66
import StateRoute from '../components/StateRoute';
77
import DiffRoute from '../components/DiffRoute';
88

9-
10-
const StateContainer = ({ snapshot }) => {
9+
const StateContainer = ({ snapshot, hierarchy }) => {
1110
const [Text, setText] = useState('State');
1211
return (
1312
<Router>
@@ -27,7 +26,7 @@ const StateContainer = ({ snapshot }) => {
2726
</div>
2827
<Switch>
2928
<Route path="/diff" render={() => { setText('Diff'); return <DiffRoute snapshot={snapshot} />; }} />
30-
<Route path="/" render={() => { setText('State'); return <StateRoute snapshot={snapshot} />; }} />
29+
<Route path="/" render={() => { setText('State'); return <StateRoute snapshot={snapshot} hierarchy={hierarchy} />; }} />
3130
</Switch>
3231
</div>
3332
</Router>

‎src/extension/background.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function createTabObj(title) {
1212
// snapshots is an array of ALL state snapshots for the reactime tab working on a specific user application
1313
snapshots: [],
1414
//* this is our pointer so we know what the current state the user is checking (this accounts for time travel aka when user clicks jump on the UI)
15-
currentStatePointer: null,
15+
currLocation: null,
1616
//* inserting a new property to build out our hierarchy dataset for d3
1717
hierarchy: null,
1818
mode: {
@@ -64,18 +64,18 @@ function changeCurrLocation(tabObj, currNode, index) {
6464
}
6565

6666
//! once state is modified (when user does something with app), a step appears in actionContainer.jsx column. That current state snapshot is added to our hierarchy object. That is what the buildHierarchy function is for. It takes in the entire tabObj, which has a hierarcy object as a property within it. Then we build this hierarchy object so that d3 can render graphs in our extension
67-
// whenever we receive a snapshot from contentScript.js via message, we execute this function
68-
//* if empty on extension UI is clicked hierarchy needs to be reset to an object
69-
70-
// each time a statesnapshot is added, this gets incremented otherwise it will be decremented
71-
// we need to find a way to traverse through the object to know which node the user is on so we can add a new state snapshot in the right location
67+
// whenever we receive a snapshot from contentScript.js via message, we execute this function
68+
//* if empty on extension UI is clicked hierarchy needs to be reset to an object
69+
70+
// each time a statesnapshot is added, this gets incremented otherwise it will be decremented
71+
// we need to find a way to traverse through the object to know which node the user is on so we can add a new state snapshot in the right location
7272
// could we potentially have a variable in timejump function (timeJump.js in the package) that our function can work with --> contentScript.js has access to it --> we can access that variable message;
7373

74-
// create a helper function that groups all the snapshots underneath each other
75-
// current state snapshot
76-
// needs to be supplied by the UI
77-
// also need to figure out how we would traverse through the big ass object to find the current state
78-
// Create a new object with name,
74+
// create a helper function that groups all the snapshots underneath each other
75+
// current state snapshot
76+
// needs to be supplied by the UI
77+
// also need to figure out how we would traverse through the big ass object to find the current state
78+
// Create a new object with name,
7979

8080
// establishing connection with devtools
8181
chrome.runtime.onConnect.addListener(port => {

0 commit comments

Comments
 (0)