Skip to content

Commit 3533aba

Browse files
HaoyL666HaoyL666
committed
set up Insepect
1 parent 1c28925 commit 3533aba

File tree

10 files changed

+1315
-21
lines changed

10 files changed

+1315
-21
lines changed

‎app/components/Inspect.jsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { useEffect } from 'react';
2+
import * as d3 from 'd3'; // Import D3 libraries here
3+
import ForceGraph3D from '3d-force-graph'; // Import 3d-force-graph library here
4+
import dat from 'dat.gui'; // Import dat.gui library here
5+
6+
const GraphComponent = () => {
7+
useEffect(() => {
8+
// controls
9+
const controls = { 'DAG Orientation': 'td' };
10+
const gui = new dat.GUI();
11+
gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'zout', 'zin', 'radialout', 'radialin', null])
12+
.onChange(orientation => graph && graph.dagMode(orientation));
13+
14+
// graph config
15+
const NODE_REL_SIZE = 1;
16+
const graph = ForceGraph3D()
17+
.dagMode('td')
18+
.dagLevelDistance(200)
19+
.backgroundColor('#101020')
20+
.linkColor(() => 'rgba(255,255,255,0.2)')
21+
.nodeRelSize(NODE_REL_SIZE)
22+
.nodeId('path')
23+
.nodeVal('size')
24+
.nodeLabel('path')
25+
.nodeAutoColorBy('module')
26+
.nodeOpacity(0.9)
27+
.linkDirectionalParticles(2)
28+
.linkDirectionalParticleWidth(0.8)
29+
.linkDirectionalParticleSpeed(0.006)
30+
.d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
31+
.d3VelocityDecay(0.3);
32+
33+
// Decrease repel intensity
34+
graph.d3Force('charge').strength(-15);
35+
36+
fetch('../datasets/d3-dependencies.csv')
37+
.then(r => r.text())
38+
.then(d3.csvParse)
39+
.then(data => {
40+
const nodes = [], links = [];
41+
data.forEach(({ size, path }) => {
42+
const levels = path.split('/'),
43+
level = levels.length - 1,
44+
module = level > 0 ? levels[1] : null,
45+
leaf = levels.pop(),
46+
parent = levels.join('/');
47+
48+
const node = {
49+
path,
50+
leaf,
51+
module,
52+
size: +size || 20,
53+
level
54+
};
55+
56+
nodes.push(node);
57+
58+
if (parent) {
59+
links.push({ source: parent, target: path, targetNode: node });
60+
}
61+
});
62+
63+
graph(document.getElementById('graph'))
64+
.graphData({ nodes, links });
65+
});
66+
}, []);
67+
68+
return <div id="graph" />;
69+
};
70+
71+
export default GraphComponent;

‎app/containers/EventContainer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
160160

161161
<div>
162162
{/* <div id="grafana" onClick={() => { setIsGrafana(!isGrafana) }}>Grafana</div> */}
163+
<button>Inspect</button>
163164
{service.includes('kafkametrics') || service.includes('kubernetesmetrics') ? currChunk : []}
164165
{eventChartsArr.length > chunkSize && (
165166
<>

‎app/containers/GraphsContainer.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import * as DashboardContext from '../context/DashboardContext';
2222
import lightAndDark from '../components/Styling';
2323

2424
import '../stylesheets/GraphsContainer.scss';
25+
import { Link } from 'react-router-dom';
26+
import Inspect from './Inspect';
2527

2628
interface Params {
2729
app: any;
@@ -44,6 +46,7 @@ const GraphsContainer: React.FC = React.memo(props => {
4446
const [chart, setChart] = useState<string>('all');
4547
const [prevRoute, setPrevRoute] = useState<string>('');
4648
const { mode } = useContext(DashboardContext.DashboardContext);
49+
let [inspect, setInspect] = useState<boolean>(false);
4750

4851
useEffect(() => {
4952
const serviceArray = service.split(' ');
@@ -194,8 +197,21 @@ const GraphsContainer: React.FC = React.memo(props => {
194197
>
195198
Modify Metrics
196199
</button>
200+
{/* <Link className="sidebar-link" to="/Inspect" id="Inspect" >
201+
<SettingsIcon
202+
style={{
203+
WebkitBoxSizing: 'content-box',
204+
boxShadow: 'none',
205+
width: '35px',
206+
height: '35px',
207+
}}
208+
/>
209+
&emsp;Inspect
210+
</Link> */}
211+
<button onClick={() => { setInspect(!inspect) }}>Inspect</button>
197212
</nav>
198213
<Header app={app} service={service} live={live} setLive={setLive} />
214+
{inspect && <Inspect />}
199215
<div className="graphs-container">
200216
{chart === 'communications' ? (
201217
<div className="graphs">

‎app/containers/Inspect.jsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React, { useEffect } from 'react';
2+
import * as d3 from 'd3'; // Import D3 libraries here
3+
import ForceGraph3D from '3d-force-graph'; // Import 3d-force-graph library here
4+
import dat from 'dat.gui'; // Import dat.gui library here
5+
// import fs from 'fs';
6+
7+
const Inspect = () => {
8+
useEffect(() => {
9+
// controls
10+
const controls = { 'DAG Orientation': 'td' };
11+
const gui = new dat.GUI();
12+
gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'zout', 'zin', 'radialout', 'radialin', null])
13+
.onChange(orientation => graph && graph.dagMode(orientation));
14+
15+
// graph config
16+
const NODE_REL_SIZE = 1;
17+
const graph = ForceGraph3D()
18+
.dagMode('td')
19+
.dagLevelDistance(200)
20+
.backgroundColor('#101020')
21+
.linkColor(() => 'rgba(255,255,255,0.2)')
22+
.nodeRelSize(NODE_REL_SIZE)
23+
.nodeId('path')
24+
.nodeVal('size')
25+
.nodeLabel('path')
26+
.nodeAutoColorBy('module')
27+
.nodeOpacity(0.9)
28+
.linkDirectionalParticles(2)
29+
.linkDirectionalParticleWidth(0.8)
30+
.linkDirectionalParticleSpeed(0.006)
31+
.d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
32+
.d3VelocityDecay(0.3);
33+
34+
// Decrease repel intensity
35+
graph.d3Force('charge').strength(-15);
36+
37+
// fs.readFile('./d3-dependencies.csv', 'utf8', function (err, data) {
38+
// if (err) {
39+
// return console.log(err);
40+
// } else {
41+
// console.log(data);
42+
// const nodes = [], links = [];
43+
// data.forEach(({ size, path }) => {
44+
// const levels = path.split('/'),
45+
// level = levels.length - 1,
46+
// module = level > 0 ? levels[1] : null,
47+
// leaf = levels.pop(),
48+
// parent = levels.join('/');
49+
50+
// const node = {
51+
// path,
52+
// leaf,
53+
// module,
54+
// size: +size || 20,
55+
// level
56+
// };
57+
58+
// nodes.push(node);
59+
60+
// if (parent) {
61+
// links.push({ source: parent, target: path, targetNode: node });
62+
// }
63+
// });
64+
65+
66+
67+
// graph(document.getElementById('graph'))
68+
// .graphData({ nodes, links });
69+
// }
70+
// });
71+
72+
fetch('http://localhost:1111/api/data')
73+
.then(r => r.text())
74+
.then(d3.csvParse)
75+
.then(data => {
76+
console.log(data)
77+
const nodes = [], links = [];
78+
data.forEach(({ size, path }) => {
79+
const levels = path.split('/'),
80+
level = levels.length - 1,
81+
module = level > 0 ? levels[1] : null,
82+
leaf = levels.pop(),
83+
parent = levels.join('/');
84+
85+
const node = {
86+
path,
87+
leaf,
88+
module,
89+
size: +size || 20,
90+
level
91+
};
92+
93+
nodes.push(node);
94+
95+
if (parent) {
96+
links.push({ source: parent, target: path, targetNode: node });
97+
}
98+
});
99+
100+
graph(document.getElementById('graph'))
101+
.graphData({ nodes, links });
102+
});
103+
}, []);
104+
105+
106+
return <div id="graph" />;
107+
};
108+
109+
export default Inspect;

‎app/containers/Resource.html

Whitespace-only changes.

0 commit comments

Comments
 (0)