architecture-viewer 0.0.1-security → 4.4.4

package/New Folder/architecture-viewer/src/components/diagram.js

@@ -0,0 +1,362 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+
+// import cytoscape from './lib/cytoscape.min';
+import cytoscape from 'cytoscape';
+
+import cydagre from 'cytoscape-dagre';
+import popper  from 'cytoscape-popper';
+
+import tippy from 'tippy.js';
+
+// import undoRedo from 'cytoscape-undo-redo';
+
+// import jquery from 'jquery';
+// import expandCollapse from 'cytoscape-expand-collapse';
+
+import { getCurrentStep } from '../utils/stepUtils'
+
+cytoscape.use(cydagre);
+cytoscape.use(popper);
+
+// cydagre(cytoscape);
+
+// undoRedo(cytoscape);
+// expandCollapse(cytoscape, jquery);
+
+export default class Diagram extends Component {
+
+    constructor(props) {
+        super(props);
+        this.renderDiagram = this.renderDiagram.bind(this);
+        this.processStep = this.processStep.bind(this);
+        this.transferStep = this.transferStep.bind(this);
+        this.curStep = 0;
+        this.highlighted_nodes = [];
+    }
+
+    componentDidMount() {
+        this.renderDiagram();
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        try {
+
+            const curGraphData = Object.assign({}, this.props.graphData);
+            const prevGraphData = Object.assign({},prevProps.graphData);
+
+            // console.log(curGraphData);
+
+            const extractNodeData = node => {
+                const selectAttrs = ({ id, fname, zone, parent, info }) => ({ id, fname, zone, parent, info });
+                node.data = selectAttrs(node.data);
+                return node;
+            };
+
+            const extractEdgeData = edge => {
+                const selectAttrs = ({ id, source, target }) => ({ id, source, target});
+                edge.data = selectAttrs(edge.data)
+                return edge;
+            }
+
+            curGraphData.nodes = curGraphData.nodes.map(extractNodeData);
+            curGraphData.edges = curGraphData.edges.map(extractEdgeData);
+
+            prevGraphData.nodes = prevGraphData.nodes.map(extractNodeData);
+            prevGraphData.edges = prevGraphData.edges.map(extractEdgeData);
+
+            const curGraphDataStr = JSON.stringify(curGraphData);
+            const prevGraphDataStr = JSON.stringify(prevGraphData);
+
+            // console.log(curGraphDataStr, "\n", prevGraphDataStr);
+            // console.log(previousGraphData);
+            if (curGraphDataStr !== prevGraphDataStr) {
+                this.renderDiagram();
+            } else {
+                this.transferStep(this.props.curStep);
+            }
+        } catch (e) {
+            // this.renderDiagram();
+            if (e instanceof TypeError) {
+
+            }
+            console.error(e);
+        }
+    }
+
+    renderDiagram() {
+        let that = this;
+
+        this.cy = null;
+        this.cy = cytoscape({
+            container: that.base,
+
+            boxSelectionEnabled: false,
+            autounselectify: true,
+            panningEnabled: true,
+            userPanningEnabled: true,
+            userZoomingEnabled: true,
+
+
+            layout: {
+                name: 'dagre',
+                directed: false,
+                rankDir: 'LR',
+                // ranker: 'tight-tree'
+                animate: true,
+                animationDuration: 0
+            },
+
+            style: [
+                {
+                    selector: '[fname]',
+                    style: {
+                        'height': 125,
+                        'width': 175,
+                        'background-color': 'data(zone)',
+                        'content': e => e.data('fname') ? e.data('fname') : '',
+                        'text-valign': 'center',
+                        'text-halign': 'center',
+                        'font-size': 25,
+                        'shape': 'roundrectangle',
+                        'border-width': '5px',
+                        'border-color': e => e.data('zone'),
+                        'text-wrap': 'wrap',
+                        'text-max-width': 175,
+                        'z-index': 20
+                    }
+                },
+                {
+                    selector: '$node > [fname]',
+                    style: {
+                        'height': 125,
+                        'width': 175,
+                        'background-color': 'data(zone)',
+                        'content': e => e.data('fname') ? e.data('fname') : '',
+                        'text-valign': 'top',
+                        'text-halign': 'center',
+                        'font-size': 25,
+                        'shape': 'roundrectangle',
+                        'border-width': '5px',
+                        'border-color': e => e.data('zone'),
+                        'z-index': 20
+                    }
+                },
+                {
+                    selector: 'edge',
+                    style: {
+                        'curve-style': 'bezier',
+                        // 'haystack-radius': 0,
+                        'width': 10,
+                        'opacity': 0.5,
+                        'line-color': '#888',
+                        'target-arrow-shape': 'none',
+                        'target-arrow-color': '#888',
+                        'target-endpoint': 'inside-to-node',
+                        'source-arrow-shape': 'none',
+                        'source-arrow-color': '#888',
+                        'source-endpoint': 'inside-to-node',
+                        'z-index': 30
+                        // 'mid-source-arrow-color': 'red',
+                        // 'mid-source-arrow-fill': 'filled'
+                    }
+                },
+                {
+                    selector: '.highlighted',
+                    style: {
+                        'border-color': '#248bca',
+                        // 'line-color': '#61bffc',
+                        'transition-property': 'border-color',
+                        'transition-duration': '0.25s',
+                    }
+                },
+                {
+                    selector: '.highlighted-to-target',
+                    style: {
+                        'border-color': '#248bca',
+                        'line-color': '#248bca',
+                        'transition-property': 'border-color, line-color, target-arrow-color',
+                        'transition-duration': '0.25s',
+                        'target-arrow-color': '#248bca',
+                        // 'source-arrow-color': '#61bffc',
+                        'target-arrow-shape': 'triangle',
+                        // 'source-arrow-shape': 'none',
+                        'target-endpoint': 'outside-to-node',
+                        'arrow-scale': 1.5,
+                        'opacity': 1
+                    }
+                },
+                {
+                    selector: '.highlighted-to-source',
+                    style: {
+                        'border-color': '#248bca',
+                        'line-color': '#248bca',
+                        'transition-property': 'border-color, line-color, source-arrow-color',
+                        'transition-duration': '0.25s',
+                        'source-arrow-color': '#248bca',
+                        // 'source-arrow-color': '#61bffc',
+                        'source-arrow-shape': 'triangle',
+                        // 'source-arrow-shape': 'none',
+                        'source-endpoint': 'outside-to-node',
+                        'arrow-scale': 1.5,
+                        'opacity': 1
+                    }
+                },
+            ],
+
+            elements: this.props.graphData
+        });
+
+        this.cy.fit(this.cy.elements(), 20);
+        this.cy.center();
+
+
+        let nodes = this.cy.filter((ele, i, eles) => {
+            return (ele.data('parent') != undefined);
+        })
+
+        let popperNodes = this.cy.filter((ele, i, eles) => {
+            return (ele.data('parent') != undefined) && (ele.data('info') != undefined && ele.data('info') != "");
+        });
+
+        let parents = this.cy.filter((ele, i, eles) => {
+            return (ele.data('parent') == undefined);
+        })
+
+        //if none of them have parents, that means no zones
+        if (nodes.length == 0) {
+            nodes = this.cy.filter((ele, i, eles) => {
+                return (ele.data('parent') == undefined);
+            })
+
+            popperNodes = this.cy.filter((ele, i, eles) => {
+                return (ele.data('parent') == undefined) && (ele.data('info') != undefined && ele.data('info') != "");
+            })
+        }
+
+        let tippyMap = {};
+
+        for (let i = 0; i < popperNodes.length; i++) {
+            let popperNode = popperNodes[i];
+
+            tippyMap[popperNode.data('id')] = tippy(popperNode.popperRef(), {
+                html: (() => {
+                    let content = document.createElement('div');
+                    content.innerHTML = popperNode.data('info');
+
+                    return content;
+                })(),
+                trigger: 'manual'
+            }).tooltips[0];
+
+            // tippyMap[popperNode.data('id')].show();
+        }
+
+        nodes.on('click', function(evt) {
+            that.props.updateSelectedNode(evt.target.id());
+            // the only way I could get this tooltip to appear 
+            // was with a timeout
+            // TODO: find a better way to do this
+            setTimeout(() => {
+                // console.log(tippyMap[evt.target.id()]);
+                tippyMap[evt.target.id()].show();
+            }, 250);
+        })
+
+        // console.log(this.props.curStep);
+        this.transferStep(this.props.curStep);
+    }
+
+    processStep(step) {
+        //a bit of debugging
+
+        let nodes = step.nodes.map(node => {
+            return this.cy.filter((ele, i, eles) => ele.data('id') === node)[0]
+        });
+
+        this.highlighted_nodes = this.highlighted_nodes.concat(nodes);
+
+        // console.log(nodes);
+
+        nodes[0].addClass('highlighted');
+
+        if (nodes.length == 1) {
+            return;
+        }
+
+        let edges = this.cy.filter((ele, i, eles) => {
+            if (ele.data('source') == step.nodes[0] &&
+                ele.data('target') == step.nodes[1] ||
+                ele.data('target') == step.nodes[0] &&
+                ele.data('source') == step.nodes[1]) {
+                return true;
+            }
+        });
+
+        this.highlighted_nodes = this.highlighted_nodes.concat(edges);
+
+        if (edges[0].data('source') == step.nodes[0]) {
+            edges[0].addClass('highlighted-to-target');
+        } else {
+            edges[0].addClass('highlighted-to-source');
+        }
+
+        nodes[1].addClass('highlighted');
+    }
+
+    transferStep(stepNum) {
+
+        //find the step
+        const stepStr = ""+(this.props.curStep);
+        const relevantStep = getCurrentStep(stepStr, this.props.stepData);
+
+        this.highlighted_nodes.map(node => {
+            node.removeClass('highlighted');
+            node.removeClass('highlighted-to-target');
+            node.removeClass('highlighted-to-source');
+        })
+
+        this.highlighted_nodes = [];
+
+        if (stepNum >= 0 && relevantStep != null) {
+
+            this.curStep = stepNum;
+            this.processStep(relevantStep);
+        }
+    }
+
+    render() {
+
+        let style = {
+            width: '100%',
+            height: '100%'
+        };
+
+        if (this.props.dims && this.props.dims.width) {
+            style.width = this.props.dims.width;
+        }
+
+        if (this.props.dims && this.props.dims.height) {
+            style.height = this.props.dims.height;
+        }
+
+        return (
+            <div id="cy" style={style} className="container-border"></div>
+        )
+    }
+}

package/New Folder/architecture-viewer/src/components/diagramArea.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+
+import Diagram from './diagram';
+import ZoneLegend from './zoneLegend';
+
+export default class DiagramArea extends Component {
+    constructor(props) {
+        super(props);
+        // console.log(props);
+    }
+
+    render() {
+
+        let dims = {};
+
+        //this is a hack but it's ok
+        if (this.props.stepData.length == 0 && window.self == window.top) {
+            dims.width = 'calc(80vw - 30px)';
+        } else if (this.props.stepData.length == 0 && window.self != window.top) {
+            dims.width = 'calc(70vw - 30px)'
+        } else {
+            dims.width = 'calc(60vw - 30px)'
+        }
+
+        let diagramAreaStyle = {
+            width: dims.width,
+            height: 'calc(100% - 20px)',
+            zIndex: '999'
+        };
+
+        let btnStyle = {
+            position: 'absolute',
+            left: '10px',
+            top: '10px',
+            zIndex: 1000
+        };
+
+        return <div style={diagramAreaStyle}>
+            <Diagram
+                graphData={this.props.graphData}
+                stepData={this.props.stepData}
+                curStep={this.props.curStep}
+                updateSelectedNode={this.props.updateSelectedNode}
+                zoneData={this.props.zoneData}
+                dims={dims}
+                ref={(d) => {this.diag = d; }}
+            />
+            <button style={btnStyle} onClick={() => {this.diag.renderDiagram();}}> redraw </button>
+        </div>
+    }
+}
+

package/New Folder/architecture-viewer/src/components/info.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+
+export default class Info extends Component {
+
+    render() {
+
+        let el;
+
+        if (!this.props.flowTitle) {
+            el = <div id="info" className="sub-container-border">
+                <h2> Invalid Title! </h2>
+            </div>
+        } else {
+            el = <div id="info" className="sub-container-border">
+                <h2> {this.props.flowTitle} </h2>
+            </div>
+        }
+
+        return el;
+    }
+}

package/New Folder/architecture-viewer/src/components/infoArea.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+
+import Controls from './controls';
+import TableOfContents from './tableOfContents';
+import Info     from './info';
+
+
+export default class InfoArea extends Component {
+
+    render() {
+
+        let width;
+
+        if (this.props.stepData.length == 0 && window.self == window.top) {
+            width = 'calc(20% - 30px)'
+        } else if (this.props.stepData.length == 0 && window.self != window.top) {
+            width = 'calc(30% - 30px)';
+        } else {
+            width = 'calc(40% - 30px)'
+        }
+
+        let infoAreaStyle = {
+            width: width,
+            height: 'calc(100% - 20px)',
+            zIndex: '999',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-around'
+        }
+
+        const countSteps = (sum, step) => {
+            if (step.type == "single") {
+                return sum + 1;
+            } else if (step.type == "group") {
+                return step.steps.reduce(countSteps, sum);
+            }
+        }
+
+        let stepNum = this.props.stepData.reduce(countSteps, 0);
+
+        return (
+            <div id="infoArea" style={infoAreaStyle} className="container-border">
+                <Info flowTitle={this.props.flowTitle}></Info>
+                <TableOfContents updateStep={this.props.updateStep}
+                                 stepData={this.props.stepData}
+                                 curStep={this.props.curStep}
+                                 selectedNode={this.props.selectedNode}></TableOfContents>
+                
+                <Controls curStep={this.props.curStep} 
+                          stepNum={stepNum}
+                          updateStep={this.props.updateStep}
+                          updateData={this.props.updateData}></Controls>
+            </div>
+        )
+    }
+}
+
+/*<div id="info" className="sub-container-border">info</div>*/

package/New Folder/architecture-viewer/src/components/key.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+
+export default class Key extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+
+        let keyStyle = {
+            width: 'calc(50% - 5px)',
+            backgroundColor: this.props.color,
+            padding: '5px',
+            border: '1px solid ' + this.props.color,
+            borderRadius: '3px',
+            margin: '5px'
+        }
+
+        return (
+            <div style={keyStyle}>
+                <span id="key-name">{this.props.name}</span>
+            </div>
+        )
+    }
+}

package/New Folder/architecture-viewer/src/components/tableOfContents.js

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+
+import TocStep from './tocStep';
+
+import { getCurrentStep } from '../utils/stepUtils'
+
+export default class TableOfContents extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+
+
+        let tableOfContentsStyle = {
+            overflowY: 'auto',
+            overflowX: 'hidden'
+        }
+
+        const stepStr = ""+(this.props.curStep);
+        const currentStep = getCurrentStep(stepStr, this.props.stepData);
+        
+
+        const flattenSteps = (steps) => {
+            const flattened = [];
+
+            steps.forEach(s => {
+                if (s.type == "single") {
+                    flattened.push(s);
+                } else if (s.type == "group") {
+                    flattened.push(...flattenSteps(s.steps));
+                }
+            });
+
+            return flattened;
+        }
+        const flattenedSteps = flattenSteps(this.props.stepData);
+
+        const filterRelated = flattenedSteps.filter(step => this.props.selectedNode != null &&
+            step.nodes.includes(this.props.selectedNode)).length > 0;        
+
+
+        const renderStep = (step) => {
+            if (step.type == "single") {
+                let matches = false;
+                let related = false;
+                if (this.props.selectedNode != null) {
+                    related = step.nodes.includes(this.props.selectedNode);
+                }
+                matches = currentStep != null && step.id === currentStep.id;
+                return <TocStep matches={matches}
+                    filterRelated={filterRelated}
+                    related={related}
+                    step={step}
+                    updateStep={this.props.updateStep}>
+                </TocStep>
+            } else if (step.type == "group") {
+                return (
+                    <li>
+                        <span><i>({step.groupName})</i>   {step.description}</span>
+                        <ol class="custom-list">
+                            {step.steps.map(renderStep)}
+                        </ol>
+                    </li>
+                );
+            }
+
+        }
+
+        const stepLi = this.props.stepData.map(renderStep);
+
+        let emptyMsg;
+        let msgStyle = {
+            textAlign: 'center'
+        };
+
+        if (stepLi.length == 0) {
+            emptyMsg = <p style={msgStyle}> add steps to the JSON file if you want to step through a flow</p>
+        } else {
+            emptyMsg = null;
+        }
+
+        return (
+            <div id="table-of-contents"
+                style={tableOfContentsStyle}
+                className="sub-container-border"
+                ref={(div) => { this.scrolldiv = div }}>
+                {emptyMsg}
+                <ol class="custom-list">
+                    {stepLi}
+                </ol>
+            </div>
+        )
+    }
+}