24 |
27 | );
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/style/helpers.less:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | @red: #F00;
18 | @blue: #00F;
19 | @white: #FFF;
20 | @gray: #999;
21 | @black: #000;
22 |
23 | .fill() {
24 | position: absolute;
25 | left: 0;
26 | top: 0;
27 | width: 100%;
28 | height: 100%;
29 | }
30 |
31 | .scroll() {
32 | overflow: auto;
33 | overflow-scrolling: touch;
34 |
35 | & > .inner {
36 | position: relative;
37 | transform: translateZ(0);
38 | overflow: hidden;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/utils/stepUtils.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | const getCurrentStep = (stepStr, stepArray) => {
18 | const reduceSteps = (foundStep, curStep) => {
19 | if (curStep.type == "single") {
20 | return curStep.id == stepStr ? curStep : foundStep;
21 | } else if (curStep.type == "group") {
22 | return curStep.steps.reduce(reduceSteps, foundStep);
23 | }
24 | }
25 | return stepArray.reduce(reduceSteps, null);
26 | }
27 |
28 | module.exports = {
29 | getCurrentStep
30 | }
--------------------------------------------------------------------------------
/src/components/info.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 |
19 | export default class Info extends Component {
20 |
21 | render() {
22 |
23 | let el;
24 |
25 | if (!this.props.flowTitle) {
26 | el = Home
25 |This is the Home component.
26 |
27 |
29 | } else {
30 | el = Invalid Title!
28 |
31 |
33 | }
34 |
35 | return el;
36 | }
37 | }
--------------------------------------------------------------------------------
/src/components/key.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 |
19 | export default class Key extends Component {
20 |
21 | constructor(props) {
22 | super(props);
23 | }
24 |
25 | render() {
26 |
27 | let keyStyle = {
28 | width: 'calc(50% - 5px)',
29 | backgroundColor: this.props.color,
30 | padding: '5px',
31 | border: '1px solid ' + this.props.color,
32 | borderRadius: '3px',
33 | margin: '5px'
34 | }
35 |
36 | return (
37 | {this.props.flowTitle}
32 |
38 | {this.props.name}
39 |
40 | )
41 | }
42 | }
--------------------------------------------------------------------------------
/sample_json_data/readme_example.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "some_title",
3 | "graphData": {
4 | "nodes": [
5 | {
6 | "data": {
7 | "id": "s_id",
8 | "fname": "some_id",
9 | "zone": "#ffb2b2",
10 | "info": "info about some_id"
11 | }
12 | },
13 | {
14 | "data": {
15 | "id": "s_id_2",
16 | "fname": "some_id_2",
17 | "zone": "#b2b2ff",
18 | "info": "info about some_id_2"
19 | }
20 | }
21 | ],
22 | "edges": [
23 | {
24 | "data": {
25 | "id": "some_edge_id",
26 | "source": "s_id",
27 | "target": "s_id_2"
28 | }
29 | }
30 | ]
31 | },
32 | "stepData": [
33 | {
34 | "id": "0",
35 | "type": "single",
36 | "nodes": [
37 | "s_id",
38 | "s_id_2"
39 | ],
40 | "steps": [],
41 | "description": "an example step",
42 | "note": ""
43 | }
44 | ],
45 | "zoneData": [
46 | {
47 | "name": "zone1",
48 | "color": "#ffb2b2"
49 | },
50 | {
51 | "name": "zone2",
52 | "color": "#b2b2ff"
53 | }
54 | ]
55 | }
--------------------------------------------------------------------------------
/src/components/zoneLegend.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 |
19 | import Key from './key';
20 |
21 | export default class ZoneLegend extends Component {
22 |
23 | constructor(props) {
24 | super(props);
25 | }
26 |
27 | render() {
28 |
29 | let zoneLegendStyle = {
30 | display: 'flex',
31 | flexDirection: 'column',
32 | // justifyContent: 'space-around',
33 | flexWrap: 'wrap',
34 | position: 'absolute',
35 | bottom: '15px',
36 | left: '20px',
37 | width: '200px',
38 | height: '160px'
39 | }
40 |
41 | if (this.props.keys.length <= 0) {
42 | zoneLegendStyle.display = 'none';
43 | }
44 |
45 | let keys = this.props.keys.map(key => {
46 | return
51 | { keys }
52 |
53 | )
54 | }
55 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "architecture-viewer",
4 | "version": "1.0.0",
5 | "license": "Apache-2.0",
6 | "scripts": {
7 | "build": "preact build --no-prerender",
8 | "serve": "sirv build --port 8080 --cors --single",
9 | "dev": "preact watch",
10 | "lint": "eslint src",
11 | "license": "license-checker --csv --production > licenses.csv",
12 | "deploy": "gh-pages -d build",
13 | "test": "jest"
14 | },
15 | "eslintConfig": {
16 | "extends": "preact",
17 | "ignorePatterns": [
18 | "build/"
19 | ]
20 | },
21 | "devDependencies": {
22 | "enzyme": "^3.10.0",
23 | "enzyme-adapter-preact-pure": "^2.0.0",
24 | "eslint": "^6.0.1",
25 | "eslint-config-preact": "^1.1.0",
26 | "gh-pages": "^3.1.0",
27 | "identity-obj-proxy": "^3.0.0",
28 | "jest": "^24.9.0",
29 | "jest-preset-preact": "^1.0.0",
30 | "jest-raw-loader": "^1.0.1",
31 | "license-checker": "^20.2.0",
32 | "preact-cli": "^3.0.0",
33 | "preact-render-spy": "^1.2.1",
34 | "sirv-cli": "1.0.3"
35 | },
36 | "dependencies": {
37 | "ajv": "^6.12.3",
38 | "cytoscape": "^3.15.2",
39 | "cytoscape-dagre": "^2.2.2",
40 | "cytoscape-popper": "^1.0.7",
41 | "dagre": "^0.8.5",
42 | "preact": "^10.3.2",
43 | "preact-render-to-string": "^5.1.4",
44 | "preact-router": "^3.2.1",
45 | "tippy.js": "^2.5.4"
46 | },
47 | "jest": {
48 | "modulePathIgnorePatterns": [
49 | "
50 |
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/sample_plantuml_data/example.adoc:
--------------------------------------------------------------------------------
1 | @startuml
2 |
3 | title "Push Notification Enrollment"
4 |
5 | hide footbox
6 | autonumber "[0] "
7 |
8 | participant "Client App" as Client << (U, #ccebc5) user >>
9 |
10 | participant "Orchestration Layer" as Orch << (C, #b3cde3) capital one >>
11 | participant "Messaging Server" as MS << (C, #b3cde3) capital one >>
12 | note over MS
13 | This is where you can put useful information like links to documentation or support processes.
14 | end note
15 |
16 | participant "Notification Subscription Server" as NSS << (C, #b3cde3) capital one >>
17 |
18 | participant "APNS" as APNS << (E, #fbb4ae) external >>
19 | participant "GCM" as GCM << (E, #fbb4ae) external >>
20 |
21 | ==Customer Action==
22 |
23 | Client -> Client: First time login, or app upgrade, or user toggles notifications on/off in the app.
24 |
25 | ==Device Registration==
26 |
27 | Client -> APNS: If iOS, register device token in APNS
28 | Client -> GCM: If Android, register device token in GCM
29 |
30 | ==Update Messaging Server==
31 |
32 | Client -> Orch: Update device token
33 |
34 | Orch -> MS: Get existing subscriptions
35 | MS -> Orch: If success, return all
36 | Orch -> Orch: Check if device token is present
37 |
38 | Orch -> MS: If device token is present, stop (skip to next group)
39 |
40 | Orch -> MS: If device token not present, add subscription
41 | note left
42 | { "device_token" : "APA91bE_YiasYasbda..." }
43 | end note
44 | MS -> Orch: Return success/failure
45 |
46 | ==Update Master Subscription==
47 |
48 | Orch -> NSS: Register device token
49 | NSS -> Orch: Return success/failure
50 |
51 | Orch -> Orch: Swallow failure
52 | Orch -> Client: Return success/failure
53 |
54 | ==Replicate Subscriptions==
55 |
56 | Client -> Orch: Update subscriptions
57 | Orch -> MS: Update subscriptions
58 |
59 | MS -> MS: Update subscription in Messaging Server
60 |
61 | MS -> Orch: Return success/failure
62 | Orch -> Orch: Swallow failure
63 | Orch -> Client: Return success/failure
64 |
65 | @enduml
66 |
--------------------------------------------------------------------------------
/tests/validator.test.js:
--------------------------------------------------------------------------------
1 | import validator from '../src/utils/dataValidator';
2 |
3 |
4 | //The given example files for users to test out themselves
5 | const base_dir = '../sample_json_data/'
6 |
7 | const simple_structure = require(base_dir + 'simple_structure.json');
8 | const section_example = require(base_dir + 'section_example.json');
9 | const readme_example = require(base_dir + 'readme_example.json');
10 | const zones_example = require(base_dir + 'zones_example.json');
11 | const large_web = require(base_dir + 'large_web.json');
12 |
13 | const printErrors = (res) => {
14 | if (res.errors) {
15 | console.error(errors);
16 | }
17 | }
18 |
19 | expect.extend({
20 | toNotError(received, argument) {
21 | const res = validator(received);
22 | const pass = res.errors.length === 0;
23 | if (pass) {
24 | return {
25 | message: () => (`${received} is a valid json structure`),
26 | pass: true
27 | }
28 | } else {
29 | return {
30 | message: () => (`an error occurred in validation, here it is: \n${JSON.stringify(res.errors, null, 4)}`),
31 | pass: false
32 | }
33 | }
34 | }
35 | })
36 |
37 | describe('validator', () => {
38 | /*
39 | THE GIVEN JSON FILES IN THE sample_json_data DIRECTORY
40 | */
41 | it('should validate a simple diagram', () => {
42 | expect(simple_structure).toNotError();
43 | });
44 |
45 | it('should validate a diagram with groups', () => {
46 | expect(section_example).toNotError();
47 | })
48 |
49 | it('should validate the readme example', () => {
50 | expect(readme_example).toNotError();
51 | })
52 |
53 | it('should validate the zones example', () => {
54 | expect(zones_example).toNotError();
55 | })
56 |
57 | it('should validate the large web example', () => {
58 | expect(large_web).toNotError();
59 | })
60 |
61 |
62 |
63 | });
--------------------------------------------------------------------------------
/src/components/diagramArea.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 |
19 | import Diagram from './diagram';
20 | import ZoneLegend from './zoneLegend';
21 |
22 | export default class DiagramArea extends Component {
23 | constructor(props) {
24 | super(props);
25 | // console.log(props);
26 | }
27 |
28 | render() {
29 |
30 | let dims = {};
31 |
32 | //this is a hack but it's ok
33 | if (this.props.stepData.length == 0 && window.self == window.top) {
34 | dims.width = 'calc(80vw - 30px)';
35 | } else if (this.props.stepData.length == 0 && window.self != window.top) {
36 | dims.width = 'calc(70vw - 30px)'
37 | } else {
38 | dims.width = 'calc(60vw - 30px)'
39 | }
40 |
41 | let diagramAreaStyle = {
42 | width: dims.width,
43 | height: 'calc(100% - 20px)',
44 | zIndex: '999'
45 | };
46 |
47 | let btnStyle = {
48 | position: 'absolute',
49 | left: '10px',
50 | top: '10px',
51 | zIndex: 1000
52 | };
53 |
54 | return Profile: {user}
51 |This is the user profile for a user named { user }.
52 | 53 |Current time: {new Date(time).toLocaleString()}
54 |
55 | 56 | 57 | {' '} 58 | Clicked {count} times. 59 |
60 |
55 | {this.diag = d; }}
63 | />
64 |
65 |
66 | }
67 | }
68 |
69 |
--------------------------------------------------------------------------------
/preact.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | const fs = require('fs');
18 |
19 | // Use this method to modify the base path URLs used in the web application.
20 | export default function (config, env, helpers) {
21 | if (env.production) {
22 |
23 | // Keep infinity when minifying to avoid low severity static analysis warnings
24 | //let { plugin } = helpers.getPluginsByName(config, "UglifyJsPlugin")[0];
25 | //plugin.options.compress.keep_infinity = true;
26 |
27 | // Use a relative path for the base URL so the web application works when
28 | // hosting through enterprise or public GitHub Pages.
29 | config.output.publicPath = '';
30 |
31 | // For another example, the code below reads the GitHub remote URL and
32 | // prefixes "/pages/github-org/github-repo/" onto the path URLs in the
33 | // web application. This is not required when hosting through
34 | // enterprise or public GitHub Pages.
35 | //
36 | // const config_file = '.git/config';
37 | // let path = null;
38 | //
39 | // if (fs.existsSync(config_file)) {
40 | // // grab the contents of the config file
41 | // let contents = fs.readFileSync(config_file, 'utf8').split('\n');
42 | //
43 | // // grab the origin remote url
44 | // let url = '';
45 | // for (let i = 0; i < contents.length; i++) {
46 | // if (contents[i].startsWith('[remote "origin"]')) {
47 | // url = contents[i + 1].split(' ')[2];
48 | // }
49 | // }
50 | //
51 | // // grab the 'path'
52 | // let path_parts = url.replace('.git', '')
53 | // .split(/[:\/]/)
54 | // .slice(-2);
55 | //
56 | // path_parts.unshift('pages');
57 | //
58 | // let path = '/' + path_parts.join('/') + '/';
59 | // config.output.publicPath = path
60 | // }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/licenses.csv:
--------------------------------------------------------------------------------
1 | "module name","license","repository"
2 | "ajv@6.5.3","MIT","https://github.com/epoberezkin/ajv"
3 | "cytoscape-dagre@2.2.1","MIT","https://github.com/cytoscape/cytoscape.js-dagre"
4 | "cytoscape-popper@1.0.2","MIT","https://github.com/cytoscape/cytoscape.js-popper"
5 | "cytoscape@3.2.16","MIT","https://github.com/cytoscape/cytoscape.js"
6 | "dagre@0.7.4","MIT","https://github.com/cpettitt/dagre"
7 | "dagre@0.8.2","MIT","https://github.com/dagrejs/dagre"
8 | "fast-deep-equal@2.0.1","MIT","https://github.com/epoberezkin/fast-deep-equal"
9 | "fast-json-stable-stringify@2.0.0","MIT","https://github.com/epoberezkin/fast-json-stable-stringify"
10 | "fillthisfornow@0.0.0","UNLICENSED",""
11 | "fs-access@1.0.1","MIT","https://github.com/sindresorhus/fs-access"
12 | "graphlib@1.0.7","MIT","https://github.com/cpettitt/graphlib"
13 | "graphlib@2.1.5","MIT","https://github.com/dagrejs/graphlib"
14 | "heap@0.2.6","PSF","https://github.com/qiao/heap.js"
15 | "immutability-helper@2.7.1","MIT","https://github.com/kolodny/immutability-helper"
16 | "invariant@2.2.4","MIT","https://github.com/zertosh/invariant"
17 | "isexe@2.0.0","ISC","https://github.com/isaacs/isexe"
18 | "js-tokens@4.0.0","MIT","https://github.com/lydell/js-tokens"
19 | "json-schema-traverse@0.4.1","MIT","https://github.com/epoberezkin/json-schema-traverse"
20 | "karma-chrome-launcher@2.2.0","MIT","https://github.com/karma-runner/karma-chrome-launcher"
21 | "lodash.debounce@4.0.8","MIT","https://github.com/lodash/lodash"
22 | "lodash@3.10.1","MIT","https://github.com/lodash/lodash"
23 | "lodash@4.17.10","MIT","https://github.com/lodash/lodash"
24 | "loose-envify@1.4.0","MIT","https://github.com/zertosh/loose-envify"
25 | "null-check@1.0.0","MIT","https://github.com/sindresorhus/null-check"
26 | "object-assign@4.1.1","MIT","https://github.com/sindresorhus/object-assign"
27 | "popper.js@1.14.4","MIT","https://github.com/FezVrasta/popper.js"
28 | "preact-compat@3.18.3","MIT","https://github.com/developit/preact-compat"
29 | "preact-render-to-string@3.8.2","MIT","https://github.com/developit/preact-render-to-string"
30 | "preact-router@2.6.1","MIT","https://github.com/developit/preact-router"
31 | "preact-transition-group@1.1.1","MIT","https://github.com/developit/preact-transition-group"
32 | "preact@8.3.1","MIT","https://github.com/developit/preact"
33 | "pretty-format@3.8.0","MIT","https://github.com/thejameskyle/pretty-format"
34 | "prop-types@15.6.2","MIT","https://github.com/facebook/prop-types"
35 | "punycode@2.1.1","MIT","https://github.com/bestiejs/punycode.js"
36 | "standalone-react-addons-pure-render-mixin@0.1.1","MIT",""
37 | "tippy.js@2.5.4","MIT","https://github.com/atomiks/tippyjs"
38 | "uri-js@4.2.2","BSD-2-Clause","https://github.com/garycourt/uri-js"
39 | "which@1.3.1","ISC","https://github.com/isaacs/node-which"
40 |
41 |
--------------------------------------------------------------------------------
/src/components/infoArea.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 |
19 | import Controls from './controls';
20 | import TableOfContents from './tableOfContents';
21 | import Info from './info';
22 |
23 |
24 | export default class InfoArea extends Component {
25 |
26 | render() {
27 |
28 | let width;
29 |
30 | if (this.props.stepData.length == 0 && window.self == window.top) {
31 | width = 'calc(20% - 30px)'
32 | } else if (this.props.stepData.length == 0 && window.self != window.top) {
33 | width = 'calc(30% - 30px)';
34 | } else {
35 | width = 'calc(40% - 30px)'
36 | }
37 |
38 | let infoAreaStyle = {
39 | width: width,
40 | height: 'calc(100% - 20px)',
41 | zIndex: '999',
42 | display: 'flex',
43 | flexDirection: 'column',
44 | alignItems: 'center',
45 | justifyContent: 'space-around'
46 | }
47 |
48 | const countSteps = (sum, step) => {
49 | if (step.type == "single") {
50 | return sum + 1;
51 | } else if (step.type == "group") {
52 | return step.steps.reduce(countSteps, sum);
53 | }
54 | }
55 |
56 | let stepNum = this.props.stepData.reduce(countSteps, 0);
57 |
58 | return (
59 |
60 |
71 | )
72 | }
73 | }
74 |
75 | /*info
*/
--------------------------------------------------------------------------------
/src/components/tocStep.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 | import info from '../assets/icons/info.png';
19 |
20 | export default class TocStep extends Component {
21 |
22 | constructor(props) {
23 | super(props);
24 | this.setStep = this.setStep.bind(this);
25 | this.toggleToolTip = this.toggleToolTip.bind(this);
26 | this.state = {
27 | showToolTip: false
28 | };
29 | }
30 |
31 | componentDidUpdate() {
32 | // console.log(!elementInViewport(this.elem));
33 |
34 | function isElementInContainer(el, container) {
35 |
36 | var el_rect = el.getBoundingClientRect();
37 | // console.log(el_rect);
38 |
39 | var cont_rect = container.getBoundingClientRect();
40 | // console.log(cont_rect);
41 |
42 | return (
43 | el_rect.top >= cont_rect.top &&
44 | el_rect.bottom <= cont_rect.bottom
45 | );
46 | }
47 |
48 | if (this.props.matches && !isElementInContainer(this.elem, document.getElementById("table-of-contents"))) {
49 | this.elem.scrollIntoView(false);
50 | }
51 | }
52 |
53 | setStep() {
54 | this.props.updateStep(this.props.step.id);
55 | }
56 |
57 | toggleToolTip() {
58 | this.setState({
59 | showToolTip: !this.state.showToolTip
60 | });
61 | }
62 |
63 | render() {
64 |
65 | let classNames = [];
66 | if (this.props.matches) {
67 | classNames.push("current-step-toc");
68 | }
69 | if (!this.props.related && this.props.filterRelated) {
70 | classNames.push("unrelated-step-toc");
71 | }
72 |
73 | if (window.self != window.top) {
74 | classNames.push("iframe-list-style");
75 | }
76 |
77 | const hasToolTip = this.props.step.note != undefined && this.props.step.note != "";
78 | let toolTip = null;
79 | let toolTipText = null;
80 | // console.log(this.props.step);
81 | if (hasToolTip) {
82 | classNames.push("hasnote");
83 | toolTip = (
84 | 97 | {this.state.showToolTip ? toolTipText : null} 98 |
-
79 | {step.steps.map(renderStep)}
80 |
add steps to the JSON file if you want to step through a flow
96 | } else { 97 | emptyMsg = null; 98 | } 99 | 100 | return ( 101 | { this.scrolldiv = div }}>
105 | {emptyMsg}
106 |
110 | )
111 | }
112 | }
--------------------------------------------------------------------------------
/src/style/index.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | html, body {
18 | height: 100%;
19 | width: 100%;
20 | padding: 0;
21 | margin: 0;
22 | background: #FAFAFA;
23 | font-family: 'Helvetica Neue', arial, sans-serif;
24 | font-weight: 400;
25 | color: #444;
26 | -webkit-font-smoothing: antialiased;
27 | -moz-osx-font-smoothing: grayscale;
28 | }
29 |
30 | * {
31 | box-sizing: border-box;
32 | }
33 |
34 | h1, h2, h3, h4, h5 {
35 | margin: 0;
36 | -webkit-margin-before: 0;
37 | -webkit-margin-after: 0;
38 | }
39 |
40 | #container {
41 | height: 97%;
42 | }
43 |
44 | #app {
45 | height: 100%;
46 | display: flex;
47 | flex-direction: row;
48 | justify-content: space-around;
49 | align-items: center;
50 | }
51 |
52 | #footer {
53 | width: 100%;
54 | text-align: center;
55 | }
56 |
57 | /*
58 | /*#infoArea {
59 | /* height: 100%;
60 | /* width: 50%;
61 | /* display: flex;
62 | /* flex-direction: column;
63 | /* /*justify-content: center;
64 | /* align-items: center;
65 | /*}
66 | */
67 |
68 | #info {
69 | height: calc(22.5% - 5px);
70 | width: calc(100% - 5px);
71 | /* padding: 10px; */
72 | text-align: center;
73 | /* margin: 10px; */
74 | display: flex;
75 | flex-direction: column;
76 | justify-content: center;
77 | overflow-y: 'auto';
78 | min-height: min-content;
79 | }
80 |
81 | #controls {
82 | height: calc(22.5% - 5px);
83 | width: calc(100% - 5px);
84 | padding: 10px;
85 | text-align: center;
86 | min-height: min-content;
87 | /* margin: 10px; */
88 | }
89 |
90 | button {
91 | padding: 10px 15px;
92 | margin: 5px;
93 | border-radius: 3px;
94 | cursor: pointer;
95 | background-color: white;
96 | border-color: #ddd;
97 | }
98 |
99 | #table-of-contents {
100 | height: calc(55% + 5px);
101 | width: calc(100% - 5px);
102 | padding: 10px;
103 | }
104 |
105 | #zone-legend {
106 | /* height: 20%; */
107 | /* width: calc(100% - 5px); */
108 | padding: 10px;
109 | }
110 |
111 | #table-of-contents > ol {
112 | cursor: pointer;
113 | }
114 |
115 | .sub-container-border {
116 | border: 1px solid #ddd;
117 | border-radius: 4px;
118 | }
119 |
120 | .container-border {
121 | border: 2px solid #bbb;
122 | border-radius: 2px;
123 | }
124 |
125 | .cur-step {
126 | margin-left: 10px;
127 | margin-right: 10px;
128 | }
129 |
130 | .current-step-toc {
131 | font-weight: bold;
132 | }
133 |
134 | .unrelated-step-toc {
135 | color: #ccc;
136 | }
137 |
138 | .iframe-list-style {
139 | font-size: 10px;
140 | }
141 |
142 | .iframe-button-style {
143 | padding: 5px 10px;
144 | }
145 |
146 | .tooltip {
147 | position: relative;
148 | display: inline-block;
149 | border-bottom: 1px dotted black;
150 | }
151 |
152 | .tooltip .tooltiptext {
153 | visibility: hidden;
154 | width: 300px;
155 | background-color: black;
156 | color: #fff;
157 | text-align: center;
158 | border-radius: 6px;
159 | padding: 5px 0;
160 | position: absolute;
161 | z-index: 1;
162 | top: -5px;
163 | left: 110%;
164 | }
165 |
166 | .tooltip .tooltiptext::after {
167 | content: "";
168 | position: absolute;
169 | top: 50%;
170 | right: 100%;
171 | margin-top: -5px;
172 | border-width: 5px;
173 | border-style: solid;
174 | border-color: transparent black transparent transparent;
175 | }
176 |
177 | .tooltip:hover .tooltiptext {
178 | visibility: visible;
179 | }
180 |
181 | .custom-list {
182 | list-style-type: none;
183 | counter-reset: step-counter;
184 | }
185 |
186 | .custom-list li {
187 | counter-increment: step-counter;
188 | position: relative;
189 |
190 | }
191 |
192 | .custom-list li::before {
193 | content: counter(step-counter);
194 | margin-right: 5px;
195 | /* font-size: 80%; */
196 | /* background-color: rgb(200,200,200); */
197 | color: #444;
198 | font-weight: bold;
199 | /* padding: 3px 8px; */
200 | /* border-radius: 3px; */
201 | }
202 |
203 | .custom-list .hasnote::before {
204 | content: counter(step-counter);
205 | margin-right: 5px;
206 | /* font-size: 80%; */
207 | /* background-color: rgb(0,200,200); */
208 | color: #444;
209 | font-weight: bold;
210 | /* padding: 3px 8px; */
211 | /* border-radius: 3px; */
212 | }
213 |
214 | .to-left {
215 | position: absolute;
216 | left: -25px;
217 | }
218 |
219 | .note {
220 | border: 1px #A80036 solid;
221 | margin: 10px;
222 | padding: 5px;
223 | background-color: #FBFB77;
224 | }
--------------------------------------------------------------------------------
/sample_json_data/no_steps.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "this diagram has no steps",
3 | "graphData": {
4 | "nodes": [
5 | {
6 | "data": {
7 | "id": "Americas",
8 | "zone": "#B2D6EB"
9 | }
10 | },
11 | {
12 | "data": {
13 | "id": "Asia",
14 | "zone": "#FDEDEB"
15 | }
16 | },
17 | {
18 | "data": {
19 | "id": "Australia",
20 | "zone": "#C7E7C1"
21 | }
22 | },
23 | {
24 | "data": {
25 | "id": "CAN",
26 | "fname": "Canada",
27 | "zone": "#66AED8",
28 | "parent": "Americas"
29 | }
30 | },
31 | {
32 | "data": {
33 | "id": "USA",
34 | "fname": "United States of America",
35 | "zone": "#66AED8",
36 | "parent": "Americas"
37 | }
38 | },
39 | {
40 | "data": {
41 | "id": "MEX",
42 | "fname": "Mexico",
43 | "zone": "#66AED8",
44 | "parent": "Americas"
45 | }
46 | },
47 | {
48 | "data": {
49 | "id": "GTM",
50 | "fname": "Guatemala",
51 | "zone": "#66AED8",
52 | "parent": "Americas"
53 | }
54 | },
55 | {
56 | "data": {
57 | "id": "HND",
58 | "fname": "Honduras",
59 | "zone": "#66AED8",
60 | "parent": "Americas"
61 | }
62 | },
63 | {
64 | "data": {
65 | "id": "RUS",
66 | "fname": "Russia",
67 | "zone": "#FBDCD7",
68 | "parent": "Asia"
69 | }
70 | },
71 | {
72 | "data": {
73 | "id": "MNG",
74 | "fname": "Mongolia",
75 | "zone": "#FBDCD7",
76 | "parent": "Asia"
77 | }
78 | },
79 | {
80 | "data": {
81 | "id": "CHN",
82 | "fname": "China",
83 | "zone": "#FBDCD7",
84 | "parent": "Asia"
85 | }
86 | },
87 | {
88 | "data": {
89 | "id": "IND",
90 | "fname": "India",
91 | "zone": "#FBDCD7",
92 | "parent": "Asia"
93 | }
94 | },
95 | {
96 | "data": {
97 | "id": "AUS",
98 | "fname": "Australia",
99 | "zone": "#90D083",
100 | "parent": "Australia"
101 | }
102 | }
103 | ],
104 | "edges": [
105 | {
106 | "data": {
107 | "id": "0",
108 | "source": "CAN",
109 | "target": "USA"
110 | }
111 | },
112 | {
113 | "data": {
114 | "id": "1",
115 | "source": "USA",
116 | "target": "MEX"
117 | }
118 | },
119 | {
120 | "data": {
121 | "id": "2",
122 | "source": "MEX",
123 | "target": "GTM"
124 | }
125 | },
126 | {
127 | "data": {
128 | "id": "3",
129 | "source": "MEX",
130 | "target": "HND"
131 | }
132 | },
133 | {
134 | "data": {
135 | "id": "4",
136 | "source": "RUS",
137 | "target": "MNG"
138 | }
139 | },
140 | {
141 | "data": {
142 | "id": "5",
143 | "source": "MNG",
144 | "target": "CHN"
145 | }
146 | },
147 | {
148 | "data": {
149 | "id": "6",
150 | "source": "CHN",
151 | "target": "IND"
152 | }
153 | },
154 | {
155 | "data": {
156 | "id": "7",
157 | "source": "USA",
158 | "target": "CHN"
159 | }
160 | },
161 | {
162 | "data": {
163 | "id": "8",
164 | "source": "USA",
165 | "target": "IND"
166 | }
167 | },
168 | {
169 | "data": {
170 | "id": "9",
171 | "source": "CHN",
172 | "target": "AUS"
173 | }
174 | },
175 | {
176 | "data": {
177 | "id": "10",
178 | "source": "USA",
179 | "target": "RUS"
180 | }
181 | }
182 | ]
183 | },
184 | "stepData": []
185 | }
--------------------------------------------------------------------------------
/src/components/app.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2017 Capital One Services, LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { h, Component } from 'preact';
18 | import { Router } from 'preact-router';
19 |
20 | // import Header from './header';
21 | // import Home from '../routes/home';
22 | // import Profile from '../routes/profile';
23 |
24 | import DiagramArea from './diagramArea';
25 | import InfoArea from './infoArea'
26 |
27 | import { parseContents } from './../utils/parser';
28 |
29 | // import Home from 'async!./home';
30 | // import Profile from 'async!./profile';
31 |
32 |
33 |
34 | export default class App extends Component {
35 | // /** Gets fired when the route changes.
36 | // * @param {Object} event "change" event from [preact-router](http://git.io/preact-router)
37 | // * @param {string} event.url The newly routed URL
38 | // */
39 | // handleRoute = e => {
40 | // this.currentUrl = e.url;
41 | // };
42 |
43 | constructor(props) {
44 | super(props);
45 | this.fillProps = this.fillProps.bind(this);
46 | this.updateStep = this.updateStep.bind(this);
47 | this.updateData = this.updateData.bind(this);
48 | this.updateSelectedNode = this.updateSelectedNode.bind(this);
49 | this.state = {
50 | graphData: null,
51 | stepData: null,
52 | zoneData: null,
53 | curStep: 0,
54 | validJson: true,
55 | selectedNode: null
56 | };
57 | }
58 |
59 | componentDidMount() {
60 | this.fillProps();
61 | }
62 |
63 | /*
64 | sets selectedNode to null to clear out the greying out of
65 | unrelated steps
66 | */
67 | updateStep(step_num) {
68 | this.setState(Object.assign(this.state, {
69 | curStep: step_num,
70 | selectedNode: null
71 | }))
72 | }
73 |
74 | updateSelectedNode(id) {
75 | this.setState(Object.assign(this.state, {
76 | selectedNode: id
77 | }))
78 | }
79 |
80 | updateData(data) {
81 | this.setState(Object.assign(this.state, {
82 | flowTitle: data.title,
83 | graphData: data.graphData,
84 | stepData: data.stepData,
85 | zoneData: data.zoneData,
86 | curStep: 0,
87 | selectedNode: null
88 | }));
89 | }
90 |
91 | getData() {
92 | const queryParams = new URLSearchParams(window.location.search);
93 | if (queryParams == undefined || queryParams == null || queryParams == "") {
94 | return fetch('assets/data.json')
95 | .then(res => res.json())
96 | .then(json => ({
97 | filename: "Wallet-Push Notifications-Subscription/Enrollment",
98 | data: json
99 | }))
100 | .catch(err => {
101 | alert(err);
102 | });
103 | } else {
104 | const url = queryParams.get('url');
105 | if (url == null) {
106 | return fetch('assets/data.json')
107 | .then(res => res.json())
108 | .then(json => ({
109 | filename: "Wallet-Push Notifications-Subscription/Enrollment",
110 | data: json
111 | }))
112 | .catch(err => {
113 | alert(err);
114 | });
115 | } else {
116 | let filename = url.substring(url.lastIndexOf('/') + 1);
117 | let ext = filename.substr(filename.lastIndexOf('.') + 1);
118 | if (ext == "adoc") {
119 | return fetch(url)
120 | .then((res) => {
121 | if (res.ok) {
122 | return res.text()
123 | } else {
124 | throw {
125 | errtype: "custom",
126 | errmsg: "There seems to be an error with the page. Click 'OK' to open the page in a new tab and confirm it is a valid URL"
127 | }
128 | }
129 | })
130 | .then(text => ({
131 | filename: filename,
132 | data: parseContents(text.split("\n"))
133 | }))
134 | .catch(err => {
135 | console.log(((typeof err) === "object"));
136 | console.log(err.errtype === "custom");
137 | if (((typeof err) === "object") && err.errtype === "custom") {
138 | if (confirm(err.errmsg)) {
139 | window.open(url);
140 | }
141 | } else {
142 | alert(err);
143 | }
144 | });
145 | } else if (ext == "json") {
146 | return fetch(url)
147 | .then(res => res.json())
148 | .then(json => ({
149 | filename: filename,
150 | data: json
151 | }))
152 | .catch(err => {
153 | alert(err);
154 | });
155 | } else {
156 | return fetch('assets/data.json')
157 | .then(res => res.json())
158 | .then(json => ({
159 | filename: "zones example",
160 | data: json
161 | }))
162 | .catch(err => {
163 | alert(err);
164 | });
165 | }
166 |
167 | }
168 | }
169 | }
170 |
171 | fillProps() {
172 |
173 | let that = this;
174 |
175 | this.getData()
176 | .then((result) => {
177 |
178 | // console.log(result);
179 | const data = result.data;
180 | // console.log(data);
181 | data.title = data.title == undefined || data.title == "" ? result.filename : data.title;
182 |
183 | that.setState(
184 | Object.assign(this.state, {
185 | graphData: data.graphData,
186 | stepData: data.stepData,
187 | // zoneData: data.zoneData,
188 | flowTitle: data.title
189 | })
190 | );
191 | })
192 |
193 | }
194 |
195 | render() {
196 |
197 | let repoUrl = window.location.href.replace("pages/", "");
198 |
199 | if (this.state.graphData && this.state.stepData) {
200 | return (
201 | -
107 | {stepLi}
108 |
202 |
219 | );
220 | } else {
221 | return
203 |
216 |
217 |
218 | 216 |
Loading...
222 | }
223 | }
224 | }
225 |
226 | /*
177 |
178 |
179 | Step: {parseInt(this.props.curStep) + 1}
180 |
181 |
182 |
;
183 | }
184 |
185 | return (
186 |
187 | { stepElems }
188 |
193 | )
194 | }
195 | }
196 |
--------------------------------------------------------------------------------
/sample_json_data/large_web.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "large web",
3 | "graphData": {
4 | "nodes": [
5 | {
6 | "data": {
7 | "id": "A",
8 | "fname": "A",
9 | "zone": "#FBDCD6"
10 | }
11 | },
12 | {
13 | "data": {
14 | "id": "B",
15 | "fname": "B",
16 | "zone": "#FBDCD6"
17 | }
18 | },
19 | {
20 | "data": {
21 | "id": "C",
22 | "fname": "C",
23 | "zone": "#FBDCD6"
24 | }
25 | },
26 | {
27 | "data": {
28 | "id": "D",
29 | "fname": "D",
30 | "zone": "#FBDCD6"
31 | }
32 | },
33 | {
34 | "data": {
35 | "id": "E",
36 | "zone": "#FBDCD6",
37 | "fname": "E"
38 | }
39 | },
40 | {
41 | "data": {
42 | "id": "F",
43 | "zone": "#FBDCD6",
44 | "fname": "F"
45 | }
46 | },
47 | {
48 | "data": {
49 | "id": "G",
50 | "zone": "#FBDCD6",
51 | "fname": "G"
52 | }
53 | },
54 | {
55 | "data": {
56 | "id": "H",
57 | "zone": "#FBDCD6",
58 | "fname": "H"
59 | }
60 | },
61 | {
62 | "data": {
63 | "id": "I",
64 | "zone": "#FBDCD6",
65 | "fname": "I"
66 | }
67 | },
68 | {
69 | "data": {
70 | "id": "J",
71 | "zone": "#FBDCD6",
72 | "fname": "J"
73 | }
74 | },
75 | {
76 | "data": {
77 | "id": "K",
78 | "zone": "#FBDCD6",
79 | "fname": "K"
80 | }
81 | },
82 | {
83 | "data": {
84 | "id": "L",
85 | "zone": "#FBDCD6",
86 | "fname": "L"
87 | }
88 | },
89 | {
90 | "data": {
91 | "id": "M",
92 | "zone": "#FBDCD6",
93 | "fname": "M"
94 | }
95 | },
96 | {
97 | "data": {
98 | "id": "N",
99 | "zone": "#FBDCD6",
100 | "fname": "N"
101 | }
102 | },
103 | {
104 | "data": {
105 | "id": "O",
106 | "zone": "#FBDCD6",
107 | "fname": "O"
108 | }
109 | },
110 | {
111 | "data": {
112 | "id": "P",
113 | "zone": "#FBDCD6",
114 | "fname": "P"
115 | }
116 | },
117 | {
118 | "data": {
119 | "id": "Q",
120 | "zone": "#FBDCD6",
121 | "fname": "Q"
122 | }
123 | },
124 | {
125 | "data": {
126 | "id": "R",
127 | "zone": "#FBDCD6",
128 | "fname": "R"
129 | }
130 | },
131 | {
132 | "data": {
133 | "id": "S",
134 | "zone": "#FBDCD6",
135 | "fname": "S"
136 | }
137 | }
138 | ],
139 | "edges": [
140 | {
141 | "data": {
142 | "id": "1",
143 | "source": "A",
144 | "target": "B"
145 | }
146 | },
147 | {
148 | "data": {
149 | "id": "2",
150 | "source": "B",
151 | "target": "C"
152 | }
153 | },
154 | {
155 | "data": {
156 | "id": "3",
157 | "source": "C",
158 | "target": "D"
159 | }
160 | },
161 | {
162 | "data": {
163 | "id": "4",
164 | "source": "D",
165 | "target": "E"
166 | }
167 | },
168 | {
169 | "data": {
170 | "id": "5",
171 | "source": "E",
172 | "target": "F"
173 | }
174 | },
175 | {
176 | "data": {
177 | "id": "6",
178 | "source": "F",
179 | "target": "G"
180 | }
181 | },
182 | {
183 | "data": {
184 | "id": "7",
185 | "source": "F",
186 | "target": "H"
187 | }
188 | },
189 | {
190 | "data": {
191 | "id": "8",
192 | "source": "F",
193 | "target": "I"
194 | }
195 | },
196 | {
197 | "data": {
198 | "id": "9",
199 | "source": "F",
200 | "target": "J"
201 | }
202 | },
203 | {
204 | "data": {
205 | "id": "10",
206 | "source": "F",
207 | "target": "K"
208 | }
209 | },
210 | {
211 | "data": {
212 | "id": "11",
213 | "source": "G",
214 | "target": "C"
215 | }
216 | },
217 | {
218 | "data": {
219 | "id": "12",
220 | "source": "G",
221 | "target": "L"
222 | }
223 | },
224 | {
225 | "data": {
226 | "id": "13",
227 | "source": "G",
228 | "target": "M"
229 | }
230 | },
231 | {
232 | "data": {
233 | "id": "14",
234 | "source": "G",
235 | "target": "N"
236 | }
237 | },
238 | {
239 | "data": {
240 | "id": "15",
241 | "source": "G",
242 | "target": "O"
243 | }
244 | },
245 | {
246 | "data": {
247 | "id": "16",
248 | "source": "G",
249 | "target": "P"
250 | }
251 | },
252 | {
253 | "data": {
254 | "id": "17",
255 | "source": "H",
256 | "target": "Q"
257 | }
258 | },
259 | {
260 | "data": {
261 | "id": "18",
262 | "source": "I",
263 | "target": "Q"
264 | }
265 | },
266 | {
267 | "data": {
268 | "id": "19",
269 | "source": "J",
270 | "target": "R"
271 | }
272 | },
273 | {
274 | "data": {
275 | "id": "20",
276 | "source": "K",
277 | "target": "S"
278 | }
279 | }
280 | ]
281 | },
282 | "stepData": [],
283 | "zoneData": [
284 | {
285 | "name": "main",
286 | "color": "#FBDCD6"
287 | }
288 | ]
289 | }
--------------------------------------------------------------------------------
/sample_json_data/section_example.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "sectioning example",
3 | "graphData": {
4 | "nodes": [
5 | {
6 | "data": {
7 | "id": "A",
8 | "fname": "A",
9 | "zone": "#FBDCD6",
10 | "info": "qwer"
11 | }
12 | },
13 | {
14 | "data": {
15 | "id": "B",
16 | "fname": "B",
17 | "zone": "#FBDCD6",
18 | "info": "qwer"
19 | }
20 | },
21 | {
22 | "data": {
23 | "id": "C",
24 | "fname": "C",
25 | "zone": "#FBDCD6",
26 | "info": "qwer"
27 | }
28 | },
29 | {
30 | "data": {
31 | "id": "D",
32 | "fname": "D",
33 | "zone": "#FBDCD6",
34 | "info": "qwer"
35 | }
36 | },
37 | {
38 | "data": {
39 | "id": "E",
40 | "fname": "E",
41 | "zone": "#FBDCD6",
42 | "info": "qwer"
43 | }
44 | },
45 | {
46 | "data": {
47 | "id": "F",
48 | "fname": "F",
49 | "zone": "#FBDCD6",
50 | "info": "qwer"
51 | }
52 | },
53 | {
54 | "data": {
55 | "id": "G",
56 | "fname": "G",
57 | "zone": "#FBDCD6",
58 | "info": "qwer"
59 | }
60 | },
61 | {
62 | "data": {
63 | "id": "H",
64 | "fname": "H",
65 | "zone": "#FBDCD6",
66 | "info": "qwer"
67 | }
68 | }
69 | ],
70 | "edges": [
71 | {
72 | "data": {
73 | "id": "1",
74 | "source": "A",
75 | "target": "B"
76 | }
77 | },
78 | {
79 | "data": {
80 | "id": "2",
81 | "source": "B",
82 | "target": "H"
83 | }
84 | },
85 | {
86 | "data": {
87 | "id": "3",
88 | "source": "B",
89 | "target": "C"
90 | }
91 | },
92 | {
93 | "data": {
94 | "id": "4",
95 | "source": "C",
96 | "target": "E"
97 | }
98 | },
99 | {
100 | "data": {
101 | "id": "5",
102 | "source": "B",
103 | "target": "F"
104 | }
105 | }
106 | ]
107 | },
108 | "stepData": [
109 | {
110 | "id": "0",
111 | "type": "single",
112 | "groupName": "",
113 | "nodes": [
114 | "A",
115 | "B"
116 | ],
117 | "steps": [],
118 | "description": "AB",
119 | "note": "AB note"
120 | },
121 | {
122 | "id": "1",
123 | "type": "single",
124 | "groupName": "",
125 | "nodes": [
126 | "B",
127 | "H"
128 | ],
129 | "steps": [],
130 | "description": "BH",
131 | "note": "BH note"
132 | },
133 | {
134 | "id": "2",
135 | "type": "single",
136 | "groupName": "",
137 | "nodes": [
138 | "H"
139 | ],
140 | "steps": [],
141 | "description": "H",
142 | "note": ""
143 | },
144 | {
145 | "id": "3",
146 | "type": "single",
147 | "groupName": "",
148 | "nodes": [
149 | "H",
150 | "B"
151 | ],
152 | "steps": [],
153 | "description": "HB",
154 | "note": ""
155 | },
156 | {
157 | "id": "g0",
158 | "type": "group",
159 | "groupName": "loop",
160 | "nodes": [],
161 | "steps": [
162 | {
163 | "id": "4",
164 | "type": "single",
165 | "groupName": "",
166 | "nodes": [
167 | "B",
168 | "C"
169 | ],
170 | "steps": [],
171 | "description": "BC",
172 | "note": "BC note"
173 | },
174 | {
175 | "id": "5",
176 | "type": "single",
177 | "groupName": "",
178 | "nodes": [
179 | "C",
180 | "E"
181 | ],
182 | "steps": [],
183 | "description": "CE",
184 | "note": ""
185 | },
186 | {
187 | "id": "6",
188 | "type": "single",
189 | "groupName": "",
190 | "nodes": [
191 | "E"
192 | ],
193 | "steps": [],
194 | "description": "E",
195 | "note": ""
196 | },
197 | {
198 | "id": "7",
199 | "type": "single",
200 | "groupName": "",
201 | "nodes": [
202 | "E",
203 | "C"
204 | ],
205 | "steps": [],
206 | "description": "EC",
207 | "note": ""
208 | },
209 | {
210 | "id": "8",
211 | "type": "single",
212 | "groupName": "",
213 | "nodes": [
214 | "C",
215 | "B"
216 | ],
217 | "steps": [],
218 | "description": "CB",
219 | "note": ""
220 | }
221 | ],
222 | "description": "",
223 | "note": ""
224 | },
225 | {
226 | "id": "g1",
227 | "type": "group",
228 | "groupName": "loop",
229 | "nodes": [],
230 | "steps": [
231 | {
232 | "id": "9",
233 | "type": "single",
234 | "groupName": "",
235 | "nodes": [
236 | "B",
237 | "F"
238 | ],
239 | "steps": [],
240 | "description": "BF",
241 | "note": "BF note"
242 | },
243 | {
244 | "id": "10",
245 | "type": "single",
246 | "groupName": "",
247 | "nodes": [
248 | "F"
249 | ],
250 | "steps": [],
251 | "description": "F",
252 | "note": ""
253 | },
254 | {
255 | "id": "11",
256 | "type": "single",
257 | "groupName": "",
258 | "nodes": [
259 | "F"
260 | ],
261 | "steps": [],
262 | "description": "F",
263 | "note": ""
264 | },
265 | {
266 | "id": "12",
267 | "type": "single",
268 | "groupName": "",
269 | "nodes": [
270 | "F",
271 | "B"
272 | ],
273 | "steps": [],
274 | "description": "FB",
275 | "note": ""
276 | },
277 | {
278 | "id": "13",
279 | "type": "single",
280 | "groupName": "",
281 | "nodes": [
282 | "B",
283 | "F"
284 | ],
285 | "steps": [],
286 | "description": "BF",
287 | "note": ""
288 | },
289 | {
290 | "id": "14",
291 | "type": "single",
292 | "groupName": "",
293 | "nodes": [
294 | "F"
295 | ],
296 | "steps": [],
297 | "description": "F",
298 | "note": ""
299 | },
300 | {
301 | "id": "15",
302 | "type": "single",
303 | "groupName": "",
304 | "nodes": [
305 | "F",
306 | "B"
307 | ],
308 | "steps": [],
309 | "description": "FB",
310 | "note": ""
311 | }
312 | ],
313 | "description": "",
314 | "note": ""
315 | }
316 | ],
317 | "zoneData": [
318 | {
319 | "name": "main",
320 | "color": "#FBDCD6"
321 | }
322 | ]
323 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Due to changes in the priorities, this project is currently not being supported. The project is archived as of 9/17/21 and will be available in a read-only state. Please note, since archival, the project is not maintained or reviewed. #
2 |
3 |
4 |
5 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
6 |
7 | - [Architecture Diagram Web App](#architecture-diagram-web-app)
8 | - [Demo](#demo)
9 | - [Usage](#usage)
10 | - [Features](#features)
11 | - [Supported File Formats](#supported-file-formats)
12 | - [PlantUML](#plantuml)
13 | - [JSON](#json)
14 | - [Embedding in Wikis and Webpages](#embedding-in-wikis-and-webpages)
15 | - [Deployment (for developers)](#deployment-for-developers)
16 | - [Build Requirements](#build-requirements)
17 | - [Build steps](#build-steps)
18 | - [Contributing](#contributing)
19 |
20 |
21 |
22 | # Architecture Diagram Web App
23 |
24 | Start building and analyzing technical flows in seconds!
25 |
26 | [PlantUML sequence diagrams](http://plantuml.com/sequence-diagram) are very useful for documenting API flows. However, they can often overwhelm you with detail, which obscures the high level architecture.
27 |
28 | The architecture-viewer converts PlantUML sequence diagrams into interactive HTML architecture diagrams, which make it easier to step through the sequence, without losing the high level context.
29 |
30 | ## Demo
31 |
32 | 
33 |
34 | The PlantUML source for this demo is [here](sample_plantuml_data/example.adoc).
35 |
36 | ## Usage
37 |
38 | 1) Open a JSON or PlantUML file directly [in the webpage](https://capitalone.github.io/architecture-viewer/).
39 |
40 | 2) Launch [the webpage](https://capitalone.github.io/architecture-viewer/?url=https://raw.githubusercontent.com/capitalone/architecture-viewer/master/sample_json_data/large_web.json) directly with a `?url=` query parameter linking to the JSON or PlantUML file to display, e.g.
41 | ```
42 | https://capitalone.github.io/architecture-viewer/?url=https://raw.githubusercontent.com/capitalone/architecture-viewer/master/sample_json_data/large_web.json
43 | ```
44 |
45 | The same can be done with a plantUML file, as seen [here](https://capitalone.github.io/architecture-viewer/?url=https://raw.githubusercontent.com/capitalone/architecture-viewer/master/sample_plantuml_data/example.adoc)
46 |
47 | ```
48 | https://capitalone.github.io/architecture-viewer/?url=https://raw.githubusercontent.com/capitalone/architecture-viewer/master/sample_plantuml_data/example.adoc
49 | ```
50 |
51 | ## Features
52 |
53 | - Each node is clickable. Once clicked, a popup with details about them will appear.
54 | - Each step from the sequence diagram is listed in the sidebar.
55 | - Step through each part of the flow and see it visualized in an easy to digest graph.
56 | - Notes can be added to steps for clarity.
57 |
58 | ### Supported File Formats
59 |
60 | #### PlantUML
61 |
62 | The architecture-viewer supports a subset of the [PlantUML sequence diagrams syntax](http://plantuml.com/sequence-diagram). This repository also includes [this example](sample_plantuml_data/example.adoc) which was used to generate the demo above.
63 |
64 | The following PlantUML sequence diagram features are supported:
65 |
66 | - `@startuml` and `@enduml` to indicate diagrams
67 | - `title << title text here >>` to declare a title
68 | - `autonumber` is ignored and starts the indices at 0 (but the table of contents starts at 1)
69 | - participants are able to be created using the `participant` and `actor` keyword, and the following syntax is valid
70 | - `participant A`
71 | - `participant "AAA" as A`
72 | - `participant "A"`
73 | - stereotypes (`<< (X, zone_color) zone_name >>`) can be used with participants to provide colors, and to group participants into zones
74 | - `participant A << (X, #000000) zoneA >>`
75 | - `participant "AAA" as A << (X, #000000) zoneA >>`
76 | - `participant "A" << (X, #000000) zoneA >>`
77 | - steps
78 | - the following syntax for steps (and their backwards form) are supported
79 | - `->`
80 | - `-\`
81 | - `-/`
82 | - `->>`
83 | - `-\\`
84 | - `-//`
85 | - `-->`
86 | - `--\\`
87 | - `--//`
88 | - `-->>`
89 | - the following syntax for arrows is NOT supported
90 | - `-[#red]>`
91 | - grouping
92 | - The following grouping keywords are supported
93 | - loops
94 | ```
95 | loop [x times]
96 | <
189 | open a PlantUML file:
190 | 191 |
192 | 190 | 191 |