Skip to content

Commit 7defec8

Browse files
sartaj10sartaj10
committed
Create an optimized production build
1 parent 4042c28 commit 7defec8

31 files changed

+1457
-0
lines changed

‎docs/asset-manifest.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"main.css": "static/css/main.c3c1cd08.css",
3+
"main.css.map": "static/css/main.c3c1cd08.css.map",
4+
"main.js": "static/js/main.a1ae9b5b.js",
5+
"main.js.map": "static/js/main.a1ae9b5b.js.map",
6+
"static/media/basic_docs.md": "static/media/basic_docs.f59dc226.md",
7+
"static/media/concatenated_docs.md": "static/media/concatenated_docs.20870d7a.md",
8+
"static/media/connection_docs.md": "static/media/connection_docs.d41d8cd9.md",
9+
"static/media/editor_docs.md": "static/media/editor_docs.d41d8cd9.md",
10+
"static/media/endpoint_docs.md": "static/media/endpoint_docs.0529779b.md",
11+
"static/media/glyphicons-halflings-regular.eot": "static/media/glyphicons-halflings-regular.f4769f9b.eot",
12+
"static/media/glyphicons-halflings-regular.svg": "static/media/glyphicons-halflings-regular.89889688.svg",
13+
"static/media/glyphicons-halflings-regular.ttf": "static/media/glyphicons-halflings-regular.e18bbf61.ttf",
14+
"static/media/glyphicons-halflings-regular.woff": "static/media/glyphicons-halflings-regular.fa277232.woff",
15+
"static/media/glyphicons-halflings-regular.woff2": "static/media/glyphicons-halflings-regular.448c34a5.woff2",
16+
"static/media/intro.md": "static/media/intro.24b40bbe.md",
17+
"static/media/legend_docs.md": "static/media/legend_docs.140dc28a.md",
18+
"static/media/legend_thumbnail.png": "static/media/legend_thumbnail.fabdd646.png",
19+
"static/media/logo.png": "static/media/logo.9f83357c.png",
20+
"static/media/map_docs.md": "static/media/map_docs.bce639d4.md",
21+
"static/media/map_thumbnail.png": "static/media/map_thumbnail.e29bfe83.png",
22+
"static/media/parallel_docs.md": "static/media/parallel_docs.0220303d.md",
23+
"static/media/patchpanel_docs.md": "static/media/patchpanel_docs.db60419c.md",
24+
"static/media/patchpanel_thumbnail.png": "static/media/patchpanel_thumbnail.803ba135.png",
25+
"static/media/paths_docs.md": "static/media/paths_docs.d41d8cd9.md",
26+
"static/media/paths_thumbnail.png": "static/media/paths_thumbnail.da033885.png",
27+
"static/media/start.md": "static/media/start.6a60b7d6.md"
28+
}

‎docs/favicon.ico

24.3 KB
Binary file not shown.

‎docs/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="description" content="Network diagrams used by ESnet."><meta name="author" content="[email protected]"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.1/cerulean/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/github.min.css"/><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><style>html{overflow-y:scroll}body{padding-top:50px}</style><title>React Network Diagrams</title><link href="/static/css/main.c3c1cd08.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script><script type="text/javascript" src="/static/js/main.a1ae9b5b.js"></script></body></html>

‎docs/manifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎docs/service-worker.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/css/main.c3c1cd08.css

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/css/main.c3c1cd08.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.a1ae9b5b.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.a1ae9b5b.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/media/basic_docs.f59dc226.md

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
The Basic Circuit is a combination of a connection with two endpoints. The basic circuit assumes a horizontal positioning of a circuit where the y1 and y2 values are equal. A basic circuit builds an \<svg\> element out of the `width` and `height` props, and then positions the beginning and end of the circuit based on the `margin` prop, and `height` prop. In the example, we have left these as the default values of `width: 851, height: 250, margin: 100`, but these props can be specified to change the viewing area and circuit positioning.
2+
3+
To render a basic circuit, we pass in the props defined in the style map, explained in **Style** below. Here's an example:
4+
5+
```js
6+
7+
import { BasicCircuit } from "react-network-diagrams";
8+
9+
...
10+
11+
render() {
12+
return (
13+
<BasicCircuit
14+
title={`ESnet optical circuit: ${circuit.name}`}
15+
circuitLabel={circuit.name}
16+
lineStyle={styles.optical.style}
17+
lineShape={styles.optical.lineShape}
18+
size={styles.optical.size}
19+
connectionLabelPosition={5}
20+
yOffset={7}
21+
endpointStyle={styles.endpoint}
22+
endpointLabelPosition={endpointLabelPositionChoice}
23+
endpointLabelA="ALBQ"
24+
endpointLabelZ="HOU"
25+
onSelectionChange={this.handleSelectionChange}
26+
navTo={circuit.child.id}
27+
parentId={circuit.parent.id} />
28+
);
29+
}
30+
31+
```
32+
33+
### Styles
34+
35+
The connection component and the two endpoint components have a style that needs to be provided just like in the connection and endpoint example. At a minimum, each circuit needs a `style` and a `lineShape`. If the shape is not linear, or specific properties about each circuit type such as label position or disabling navigation need to be called out, these can be specified as well.
36+
37+
Each circuit's unique style is created as its own object. Typically we assemble a collection of these in its own module that we reuse.
38+
39+
Each style object is used to render the connection and requires three properties to be defined: `node`, `line` and `label`. Each of these has a `normal` style, and a `highlighted` style for when the circuit is hovered over.
40+
41+
Example:
42+
43+
```js
44+
const style = {
45+
node: {
46+
normal: {
47+
stroke: "#737373",
48+
strokeWidth: 4,
49+
fill: "none"
50+
},
51+
highlighted: {
52+
stroke: "#b1b1b1",
53+
strokeWidth: 4,
54+
fill: "#b1b1b1"
55+
}
56+
},
57+
line: {
58+
normal: {
59+
stroke: "#ff7f0e",
60+
strokeWidth: 3,
61+
fill: "none"
62+
},
63+
highlighted: {
64+
stroke: "#4EC1E0",
65+
strokeWidth: 4,
66+
fill: "none"
67+
}
68+
},
69+
label: {
70+
normal: {
71+
fill: "#9D9D9D",
72+
fontFamily: "verdana, sans-serif",
73+
fontSize: 10
74+
}
75+
}
76+
};
77+
```
78+
79+
We also need to define an endpoint style for the endpoints, which has a `node`and `label` component to style the endpoint nodes, as well as their labels:
80+
81+
```js
82+
const endpointStyle = {
83+
node: {
84+
normal: {fill: "none", stroke: "#DBDBDB", strokeWidth: 4},
85+
},
86+
label: {
87+
normal: {fill: "#9D9D9D", fontSize: 10, fontFamily: "verdana, sans-serif"},
88+
}
89+
};
90+
```

‎docs/static/media/concatenated_docs.20870d7a.md

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
### Rendering a concatenated circuit
2+
3+
A concatenated circuit is an ordered array of circuits, with each circuit being rendered horizontally as a combination of a connection and two endpoints. The concatenation is directional, meaning that the second endpoint of the previous member should equal the first endpoint of the next member.
4+
5+
A concatenated circuit builds an \<svg\> element out of the `width` and `height` props, and then positions the beginning of the concatenation based on the `margin` prop, with each member rendered sequentially based on a calculation of the segment length.
6+
7+
##### Calculating member lengths
8+
9+
Since we may want to render different members different lengths, each member circuit inside the concatenation is positioned based on the presence of the `squareWidth` prop. We assume that the presence of `squareWidth` means a fixed width for that segment rather than a fraction of the total available width. We use the following formula:
10+
11+
---
12+
**Standard Segment Length = ( Total Length - ( Total Length of all `squareWidth` props ) ) / number of members without the `squareWidth` prop**
13+
14+
---
15+
16+
Once we have the standard segment length, we can position each endpoint sequentially based on the segment's length, which is either the standard length or the fixed `squareWidth` length. If no segments have a `squareWidth` property, they will all render with equal length.
17+
18+
To render a concatenated circuit, we pass in the list of member circuits as the prop `memberList`, with props defined in the style map, explained in **Style** below:
19+
20+
```js
21+
22+
import { ConcatenatedCircuit } from "react-network-diagrams";
23+
24+
...
25+
26+
render() {
27+
return (
28+
<ConcatenatedCircuit
29+
memberList={memberList}
30+
endpointLabelPosition="top"
31+
connectionLabelPosition="center"
32+
yOffset={7}
33+
disabled={isDisabled}
34+
title="Example Concatenated Circuit"
35+
onSelectionChange={this.handleSelectionChange}
36+
endpointLabelOffset={18}
37+
parentId={"Test Navigation"} />
38+
);
39+
}
40+
41+
```
42+
43+
___
44+
45+
### Style
46+
47+
The connection component and the two endpoint components of each member of the `memberList` have a style that needs to be provided just like in the connection and endpoint examples. At ESnet, to accommodate different standard types of circuits we assemble the styles into an object mapping different types to the properties of that type such as style, shape, and shape. At a minimum, each circuit needs a `style` and a `lineShape` so that the underlying connection primitive knows how to draw. If the shape is not `linear` (the default connection shape), or specific properties about each circuit type such as label position or disabling navigation need to be called out, these can be specified here.
48+
49+
At ESnet we define the following circuit types in this object:
50+
51+
```js
52+
const circuitTypeProperties = {
53+
optical: {
54+
style: stylesMap.optical,
55+
lineShape: "linear"
56+
},
57+
leased: {
58+
style: stylesMap.leased,
59+
lineShape: "linear"
60+
},
61+
darkFiber: {
62+
style: stylesMap.darkFiber,
63+
lineShape: "linear"
64+
},
65+
equipmentToEquipment: {
66+
style: stylesMap.equipmentToEquipment,
67+
lineShape: "linear"
68+
},
69+
crossConnect: {
70+
style: stylesMap.crossConnect,
71+
lineShape: "linear"
72+
},
73+
coupler: {
74+
style: stylesMap.coupler,
75+
lineShape: "square",
76+
size: 36,
77+
squareWidth: 25,
78+
noNavigate: true,
79+
},
80+
backplaneMate: {
81+
style: stylesMap.coupler,
82+
lineShape: "square",
83+
size: 36,
84+
squareWidth: 40,
85+
centerLine: true,
86+
},
87+
};
88+
```
89+
90+
The style for each circuit type is taken from the style map which maps the individual styles for each type, as well as any endpoint style we want to define:
91+
92+
```js
93+
const stylesMap = {
94+
equipmentToEquipment: equipmentToEquipmentStyle,
95+
optical: opticalStyle,
96+
leased: leasedStyle,
97+
darkFiber: darkFiberStyle,
98+
crossConnect: crossConnectStyle,
99+
coupler: couplerStyle,
100+
endpoint: endpointStyle,
101+
panelCoupler: panelCouplerStyle,
102+
panel: panelStyle
103+
};
104+
```
105+
106+
Each types unique style is created as its own object. This is used to render the connection and requires three objects to be defined `node`, `line` and `label`. Each of these uses a normal style, and a highlighted style for when the circuit is mouseed over.
107+
108+
```js
109+
const equipmentToEquipmentStyle = {
110+
node: {
111+
normal: {
112+
stroke: "#737373",
113+
strokeWidth: 4,
114+
fill: "none"
115+
},
116+
highlighted: {
117+
stroke: "#b1b1b1",
118+
strokeWidth: 4,
119+
fill: "#b1b1b1"
120+
}
121+
},
122+
line: {
123+
normal: {
124+
stroke: "#ff7f0e",
125+
strokeWidth: 3,
126+
fill: "none"
127+
},
128+
highlighted: {
129+
stroke: "#4EC1E0",
130+
strokeWidth: 4,
131+
fill: "none"
132+
}
133+
},
134+
label: {
135+
normal: {
136+
fill: "#9D9D9D",
137+
fontFamily: "verdana, sans-serif",
138+
fontSize: 10
139+
}
140+
}
141+
};
142+
```
143+
144+
We also need to define an endpoint style for the endpoints, which has a node and label component to style the endpoint node, as well as the label:
145+
146+
```js
147+
const endpointStyle = {
148+
node: {
149+
normal: {fill: "none", stroke: "#DBDBDB", strokeWidth: 4},
150+
},
151+
label: {
152+
normal: {fill: "#9D9D9D", fontSize: 10, fontFamily: "verdana, sans-serif"},
153+
}
154+
};
155+
```

‎docs/static/media/connection_docs.d41d8cd9.md

Whitespace-only changes.

‎docs/static/media/editor_docs.d41d8cd9.md

Whitespace-only changes.

‎docs/static/media/endpoint_docs.0529779b.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
An `<Endpoint>` is typically not used directly. Rather, it is used with a Circuit. Nonetheless here is a simple example of using an `<Endpoint>` directly:
3+
4+
```jsx
5+
6+
import { Endpoint } from "react-network-diagrams";
7+
8+
...
9+
10+
render() {
11+
return (
12+
<Endpoint
13+
label="ALBQ"
14+
x={x} y={y}
15+
shape="circle"
16+
style={styles.endpoint}
17+
labelPosition="top"
18+
radius={10} />
19+
);
20+
}
21+
22+
```
23+

‎docs/static/media/glyphicons-halflings-regular.448c34a5.woff2

17.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)