Skip to content
This repository was archived by the owner on Nov 29, 2022. It is now read-only.

Commit b55002a

Browse files
dkhurshudiandkhurshudian
committed
perf: using react
get a rid of rxjs and d3.js using react for interacting with DOM
1 parent 5c6824b commit b55002a

32 files changed

+244
-2424
lines changed

‎examples/SemanticsReact.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Semantics</title>
6+
<script>process = {env:{}};</script>
7+
<script type="module">
8+
import { Layout, Graph, React, ReactDOM, Vertex } from '../dist/vis2.es5.js';
9+
10+
function App(){
11+
const [graph, setGraph ] = React.useState(new Graph());
12+
return React.createElement('div', null,
13+
React.createElement('div', null,
14+
React.createElement('button', { onClick:()=>{
15+
graph.vertices.push(new Vertex('12','12','12'));
16+
setGraph({...graph});
17+
} }, 'addMee'
18+
)
19+
),
20+
React.createElement('div', null,
21+
React.createElement(Layout, {graph})
22+
)
23+
)
24+
}
25+
26+
ReactDOM.render( React.createElement(App), document.querySelector('#app') )
27+
28+
29+
</script>
30+
</head>
31+
<body>
32+
<div id="app"></div>
33+
</body>
34+
</html>

‎package-lock.json‎

Lines changed: 97 additions & 1552 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@
108108
"@types/d3": "^5.5.0",
109109
"@types/jest": "^23.3.2",
110110
"@types/node": "^10.11.0",
111-
"colors": "^1.3.2",
111+
"@types/react": "^16.8.10",
112+
"@types/react-dom": "^16.8.3",
112113
"commitizen": "^3.0.7",
113114
"coveralls": "^3.0.2",
114115
"cross-env": "^5.2.0",
@@ -130,7 +131,6 @@
130131
"rollup-plugin-typescript2": "^0.20.1",
131132
"semantic-release": "beta",
132133
"shelljs": "^0.8.3",
133-
"travis-deploy-once": "^5.0.9",
134134
"ts-jest": "^23.10.2",
135135
"ts-node": "^8.0.2",
136136
"tslint": "^5.12.1",
@@ -139,12 +139,11 @@
139139
"typedoc": "^0.14.2",
140140
"typescript": "^3.3.1"
141141
},
142-
"peerDependencies": {
143-
"@alephdata/followthemoney": "^1.0.3",
144-
"rxjs": "^6.4.0"
145-
},
146142
"dependencies": {
143+
"@alephdata/followthemoney": "^2.0.0",
147144
"d3": "^5.8.1",
145+
"react": "^16.8.6",
146+
"react-dom": "^16.8.6",
148147
"rxjs": "^6.4.0"
149148
}
150149
}

‎rollup.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default {
1616
{ file: pkg.module, format: 'es', sourcemap: true },
1717
],
1818
// Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
19-
external: [],
19+
external: ['rxjs', '@alephdata/followthemoney'],
2020
watch: {
2121
include: 'src/**',
2222
},

‎src/Edge.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Vertex } from './Vertex'
2+
3+
export class Edge {
4+
source: Vertex
5+
target: Vertex
6+
id: string
7+
constructor(source: Vertex, target: Vertex, id: string) {
8+
this.id = id
9+
this.source = source
10+
this.target = target
11+
}
12+
}

‎src/EdgeRenderer.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { Edge } from './Edge'
3+
4+
interface IEdgeRendererProps {
5+
edge: Edge
6+
}
7+
export function EdgeRenderer(props:IEdgeRendererProps){
8+
return <g>edge</g>
9+
}
10+
11+

‎src/Graph.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Entity } from '@alephdata/followthemoney'
2+
import { Vertex } from './Vertex'
3+
import { Edge } from './Edge'
4+
5+
export class Graph {
6+
vertices: Array<Vertex> = []
7+
edges: Array<Edge> = []
8+
entities: Array<Entity> = []
9+
addEntity(entity: Entity): void {
10+
// TODO: IMPLEMENT!!!!
11+
console.log(entity, this)
12+
}
13+
}

‎src/Layout.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import { Graph } from './Graph'
3+
import { VertexRenderer } from './VertexRenderer'
4+
import { EdgeRenderer } from './EdgeRenderer'
5+
6+
interface ILayoutProps {
7+
graph: Graph
8+
}
9+
10+
export function Layout(props: ILayoutProps){
11+
return (<svg>
12+
<g>
13+
{props.graph.vertices.map((vertex, i) => <VertexRenderer
14+
key={vertex.id}
15+
vertex={vertex}
16+
x={10*i+12}
17+
y={10*i+12}
18+
/>)}
19+
</g>
20+
<g>
21+
{props.graph.edges
22+
.map(edge => <EdgeRenderer
23+
key={edge.id}
24+
edge={edge}
25+
/>)}
26+
</g>
27+
</svg>)
28+
}

‎src/Vertex.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export class Vertex {
2+
type: string
3+
label: string
4+
id: string
5+
6+
constructor(type: string, label: string, id: string) {
7+
this.type = type
8+
this.label = label
9+
this.id = id
10+
}
11+
}

‎src/VertexRenderer.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Vertex } from './Vertex'
3+
4+
interface IVertexRendererProps{
5+
vertex: Vertex
6+
x: number
7+
y: number
8+
}
9+
10+
export function VertexRenderer(props:IVertexRendererProps){
11+
return <g>
12+
<circle
13+
cx={props.x}
14+
cy={props.y}
15+
r={5}
16+
fill="red"
17+
/>
18+
</g>
19+
}

0 commit comments

Comments
 (0)