on the top-left corner of this document to get to a specific section of this guide more efficiently.
5 |
6 | ## Getting Started - Familiarizing Yourself With bev's Directories
7 | Before outlining current issues and conceptualized new features for this product, I would like to provide a brief run-down of the features contained within this application.
8 |
9 | ### app/main/
10 | Contains a few small files which leverage electron and others to interact directly with the user's native OS.
11 |
12 | * `io.js` contains the logic which allows a user to select or remove folders, as well as the logic to analyze the dependencies of provided folder paths.
13 | * `notification.js` houses minor logic to natively render notifications to the user's machine.
14 |
15 | ### render/assets/
16 | Contains all assets displayed in the application.
17 |
18 | ### render/html/
19 | This is the folder the application is where webpack will build to.
20 | As such, the entirety of its contents are in the gitignore.
21 |
22 | ### render/js/
23 | Content intended to communicate with the backend (app/main/) and render content from it to the frontend.
24 | Though this intent could seem in contradiction with the next section's description, bearing in mind that this is to specifically be an intermediary between front and back end features will help understand its place in this application's architecture.
25 |
26 | ### render/src/
27 | All front end rendering via React is housed here.
28 | Internal components rendered through `App.jsx` can be found in the components directory.
29 |
30 | ## Conceptualized New Features & Existing Bugs
31 | ### The Bounty Board (Bugs)
32 | * Nodes reposition when selected (position should only change on drag)
33 | * Cannot unselect a node until it has moved (selecting again, regardless of position, should unselect)
34 |
35 | ### Features
36 | * Improved Testing
37 | * CI/CD which automatically builds and deploys latest to `bev.dev` when all tests pass successfully on any merge to `main`
38 | * Improved performance by creating a bash file which pairs down what is currently done by the webpack-cli in `io.js`
39 | * Ability to delete Nodes from the dependency graph
40 | * Drag/Create edges in the dependency graph
41 | * Only for first party files (no node modules)
42 | * This should also programmatically update imports in the respective first party files the action is performed on
43 | * Create a right-hand panel which displays information on the selected Node in the Dependency Chart
44 | * 
45 | * If the right-hand display panel is implemented, functionality to edit first party files directly is desirable
46 | * Implement GitHub Releases
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 course-one
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Introducing bev
2 |
3 | bev (Bird’s Eye View) is a microservice migration helper and a dependency manager. Developed under tech accelerator, OS Labs, bev is a multi-platform desktop application that allows you to analyze and visualize dependencies. bev alleviates the pain of migrating to microservices.
4 |
5 | ### Getting Started With bev
6 |
7 | We designed bev with simplicity in mind, so all you need to do is select the root directory of your microservice app and press “Analyze Dependencies.” We’ll take it from here!
8 |
9 | Click on the "Open Folders" button and select the folder(s) containing your project.
10 |
11 | 
12 |
13 | ## Features
14 | #### Dependency Visualizer
15 |
16 | bev parses through your project’s file structure to generate an interactive dependency graph. The dependency graph is a nice quick way to see how your dependencies *interflamingle*. The blue nodes represent local dependencies whereas the red nodes represent third-party dependencies. The tan nodes always represent the root directory.
17 |
18 | Click on any node to see which children components rely on it.
19 |
20 | 
21 |
22 | #### Bundle Sizer
23 |
24 | bev also finds and analyzes your bundle files. bev gives you a detailed breakdown of what’s being bundled.
25 |
26 | 
27 |
28 | Select the version history of which bundle file to view to see how the bundle has changed since updating dependencies.
29 |
30 | 
31 |
32 | ## How to Contribute
33 |
34 | If you would like to contribute, clone the repo.
35 |
36 | ```
37 | git clone https://github.com/oslabs-beta/bev.git
38 | ```
39 |
40 | ### Build Steps
41 |
42 | 1. Install dependencies by using the following command:
43 | ```
44 | npm i
45 | ```
46 | 2. To bundle all the files together, use:
47 | ```
48 | npm run build
49 | ```
50 | 3. To run the development build, use:
51 | ```
52 | npm start
53 | ```
54 | 4. To build the Electron app, use:
55 | ```
56 | npm run pack
57 | ```
58 |
59 | Electron-builder is configured to build for Mac, Windows and Linux. To configure which platform to build for, go into `package.json` and edit the scripts.
60 | ```
61 | "scripts": {
62 | "start": "electron .",
63 | "build": "cross-env NODE_ENV=development webpack",
64 | "postinstall": "electron-builder install-app-deps",
65 | "pack": "electron-builder -mwl"
66 | },
67 | ```
68 | In the `pack` script, append `m`, `w`, or `l` after the `-` to specify which platforms to build for.
69 | e.g.: To build for mac only, edit the pack script to:
70 | ```
71 | "pack": "electron-builder -m"
72 | ```
73 |
74 | #### Features we’d like to implement
75 |
76 | Please see our `CONTRIBUTING.md` for a detailed list of current bugs and conceptualized new features to implement.
77 |
78 | Of course, if you have a new feature which is not on this list, you are also welcome to submit and present it.
79 |
80 | ## Built With
81 | - Electron
82 | - React
83 | - React Router
84 | - React Testing Library
85 | - Dagre
86 | - Dependency Cruiser
87 | - Webpack CLI
88 | - React Flow
89 | - Jest
90 |
91 | ## Contributors
92 |
93 | Tu Pham | [Linkedin](https://www.linkedin.com/in/toopham/) | [Github](https://github.com/toopham)
94 |
95 | Ryan Lee | [Linkedin](https://www.linkedin.com/in/ryan-lee-dev/) | [Github](https://github.com/savoy1211)
96 |
97 | Michael Pay | [Linkedin](https://www.linkedin.com/in/michael-edward-pay/) | [Github](https://github.com/airpick)
98 |
99 | Ian Tran | [Linkedin](https://www.linkedin.com/in/ictran/) | [Github](https://github.com/eienTran)
100 |
--------------------------------------------------------------------------------
/__tests__/render/src/components/Main.unit.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | HashRouter,
4 | Routes,
5 | Route,
6 | Link
7 | } from 'react-router-dom';
8 | import { render, screen } from '@testing-library/react';
9 | import Main from '../../../../app/render/src/components/Main';
10 |
11 |
12 | describe('Existential Tests', () => {
13 | test('Renders a main \'container\' div', () => {
14 | render(
15 | 
46 | 
47 | 
48 | `;
49 |
50 | folderListElem.appendChild(itemDomElem);
51 | });
52 |
53 | const projectButton = document.getElementById('create-project');
54 |
55 | // Logic to tone up or down the 'Analyze Dependencies' button
56 | // based on if folders have been selected.
57 | !folders[0]
58 | ? (projectButton.disabled = true)
59 | : (projectButton.disabled = false);
60 | };
61 |
62 | // Functionality for dependency analysis
63 | window.analyzeDep = function () {
64 | const folderNodes = document.getElementsByClassName('app__folders__item');
65 | const folderObjs = Array.from(folderNodes);
66 | const folders = folderObjs.map((node) =>
67 | node.getAttribute('data-folderpath')
68 | );
69 |
70 | const loadProject = document.getElementById('loading');
71 | loadProject.innerText = 'Loading...';
72 | loadProject.click();
73 |
74 | ipcRenderer.invoke( 'app:on-analyze', folders).then( results => {
75 | console.log('results', results)
76 | if (results.error) {
77 | const loadingContent = document.querySelector('#loading-content');
78 | loadingContent.parentElement.removeChild(loadingContent);
79 | const startButton = document.querySelector('#create-project');
80 | startButton.innerText = `${results.msg} \n Reload app and choose another project`;
81 | startButton.appendChild(errorText);
82 | return;
83 | }
84 | //change the value of a dom element.
85 | const startProject = document.getElementById('start-project');
86 | startProject.value = JSON.stringify(results);
87 | startProject.click();
88 | });
89 |
90 | // Navigates the user to a dependency graphy once analysis is complete
91 | ipcRenderer.invoke('app:on-analyze', folders).then((results) => {
92 | const startProject = document.getElementById('start-project');
93 | startProject.value = JSON.stringify(results);
94 | startProject.click();
95 | });
96 | };
97 |
--------------------------------------------------------------------------------
/app/render/js/renderer.js:
--------------------------------------------------------------------------------
1 | //const dragDrop = require( 'drag-drop' );
2 |
3 | document.addEventListener('DOMContentLoaded', () => {
4 | const { ipcRenderer } = require( 'electron' );
5 | const dom = require( '../js/dom.js' );
6 |
7 |
8 | // Get list of folders from the `main` process when app start
9 | ipcRenderer.invoke( 'app:get-folders' ).then( ( folders = [] ) => {
10 | dom.displayFolders( folders );
11 | } );
12 |
13 |
14 | // Handle file delete event
15 | // ipcRenderer.on( 'app:delete-file', ( event, filename ) => {
16 | // document.getElementById( filename ).remove();
17 | // } );
18 |
19 |
20 | // Add files drop listener
21 | // dragDrop( '#uploader', ( files ) => {
22 | // const _files = files.map( file => {
23 | // return {
24 | // name: file.name,
25 | // path: file.path,
26 | // };
27 | // } );
28 |
29 | // // Send file(s) add event to the `main` process
30 | // ipcRenderer.invoke( 'app:on-file-add', _files ).then( () => {
31 | // ipcRenderer.invoke( 'app:get-files' ).then( ( files = [] ) => {
32 | // dom.displayFiles( files );
33 | // } );
34 | // } );
35 | // } );
36 |
37 | // Open filesystem dialog
38 | window.openDialog = () => {
39 | ipcRenderer.invoke( 'app:on-fs-dialog-open' ).then( (folders) => {
40 | dom.displayFolders(folders);
41 | } );
42 | }
43 |
44 |
45 | //function to generate buttons
46 | const setMainButtons = () => {
47 | const uploaderButton = document.getElementById('uploader-button');
48 | if(uploaderButton){
49 | uploaderButton.addEventListener('click', (e)=> {
50 | openDialog();
51 | });
52 | }
53 |
54 | // Create an analyze button which has access to the analyzeDep function
55 | // Append it below the folder display area (see app/src/components/Main.jsx)
56 | // const analyzeButton = document.createElement('button');
57 | const analyzeButton = document.querySelector('#create-project');
58 | // analyzeButton.setAttribute('id', 'create-project');
59 | analyzeButton.setAttribute('onclick', 'analyzeDep()');
60 |
61 | // Disabled by default, but will be removed if displayFolders is invoked and populates its array
62 | analyzeButton.disabled = true;
63 | // const analyzeDiv = document.getElementById('analyze-button');
64 | // if(analyzeDiv) analyzeDiv.appendChild(analyzeButton);
65 | }
66 |
67 | setMainButtons();
68 |
69 | // identify an element to observe
70 | const elementToObserve = window.document.getElementById('app').children[0];
71 |
72 | // create a new instance of 'MutationObserver' named 'observer',
73 | // Listen for changes(mutations) in the app div which would trigger the callback to rerender
74 | observer = new MutationObserver(function(mutationsList, observer) {
75 |
76 | setMainButtons();
77 |
78 | //display folders
79 | // Get list of folders from the `main` process when app start
80 | const folderDiv = document.getElementById('folderlist');
81 | if(folderDiv){
82 | ipcRenderer.invoke( 'app:get-folders' ).then( ( folders = [] ) => {
83 | dom.displayFolders( folders );
84 | } );
85 | }
86 |
87 | });
88 |
89 | // call 'observe' on that MutationObserver instance,
90 | // passing it the element to observe, and the options object
91 | observer.observe(elementToObserve, {characterData: false, childList: true, attributes: false});
92 |
93 |
94 |
95 | });
96 |
97 |
98 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/app/render/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState } from "react";
2 | import {
3 | HashRouter,
4 | Routes,
5 | Route
6 | } from 'react-router-dom';
7 | import './stylesheets/style.css';
8 | import Main from './components/Main';
9 | import Diagram from './components/Diagram';
10 | import NavBar from './components/NavBar';
11 | import ControlPanel from './components/ControlPanel';
12 | import Loading from './components/Loading';
13 | import ReactBootstrap from 'react-bootstrap';
14 | import Vue from 'vue';
15 |
16 | /*
17 | Implemented react-router based on react-router v6 which introduced braking changes
18 | */
19 | const App = () => {
20 | const [state, setState] = useState({default: true});
21 | const [bundleHistory, setBH] = useState([])
22 | const [bundleInfo, setBundleInfo] = useState([]);
23 | const [initialDiagramLoad, setInitialDiagramLoad] = useState(false);
24 | return (
25 |
20 | {displayMFESelector}
21 |
26 | );
27 | };
28 |
29 |
30 | export default PercentBar;
--------------------------------------------------------------------------------
/app/render/src/components/Diagram.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import ReactFlow, {
3 | removeElements,
4 | addEdge,
5 | MiniMap,
6 | Controls,
7 | Background,
8 | } from 'react-flow-renderer';
9 | import { LocalNodeComponent, DefaultNodeComponent } from '../node-handling/styling';
10 | import { mapToElements } from '../node-handling/reposition'
11 | // import Legend from './Legend';
12 | import dagre from 'dagre';
13 |
14 | // React flow props, independent of Diagram hooks
15 | const onLoad = (reactFlowInstance) => {
16 | console.log('flow loaded:', reactFlowInstance);
17 | reactFlowInstance.fitView();
18 | };
19 |
20 | const nodeTypes = {
21 | local: LocalNodeComponent,
22 | default: DefaultNodeComponent
23 | }
24 |
25 | // let nodesAndEdges = allNodesAndEdges;
26 | let nodesAndEdges;
27 |
28 | const Diagram = ({ resultElements, bundleInfo, initialDiagramLoad, setInitialDiagramLoad }) => {
29 | // On first load, reinitialize dagre graph
30 | if (!initialDiagramLoad) {
31 | const dagreGraph = new dagre.graphlib.Graph();
32 | dagreGraph.setDefaultEdgeLabel(() => ({}));
33 | nodesAndEdges = mapToElements(resultElements);
34 | }
35 |
36 | // Diagram hooks
37 | const [elements, setElements]= useState(!initialDiagramLoad ? [...nodesAndEdges.localNodes, ...nodesAndEdges.thirdPartyNodes, ...nodesAndEdges.edges] : []);
38 | const [clickedElement, setClickedElement] = useState({});
39 |
40 |
41 | // React Flow props, contingent on hooks
42 | const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
43 | const onConnect = (params) => setElements((els) => addEdge(params, els));
44 |
45 | // Toggle edge animation on node click
46 | useEffect(() => {
47 | if (clickedElement.hasOwnProperty('id')) {
48 | setInitialDiagramLoad(true);
49 | console.log('if block triggered')
50 | const id = clickedElement.id;
51 | const newEdges = [];
52 | nodesAndEdges.edges.forEach(edge => {
53 | if (edge.source === id) edge.animated = !edge.animated;
54 | if (edge.target === id) edge.animated = !edge.animated;
55 | newEdges.push(edge);
56 | })
57 | console.log('click', clickedElement);
58 | setElements([...nodesAndEdges.localNodes, ...nodesAndEdges.thirdPartyNodes, ...newEdges]);
59 |
60 | } else {
61 | console.log('else block triggered');
62 | setElements([...nodesAndEdges.localNodes, ...nodesAndEdges.thirdPartyNodes, ...nodesAndEdges.edges]);
63 | }
64 | }, [clickedElement, resultElements])
65 |
66 | return (
67 | <>
68 | Total size: {totalWeight} bytes
22 |
23 | {bars}
24 |
25 |
69 |
70 |
24 | {displayTab}
25 |
26 | );
27 | };
28 |
29 |
30 | export default Display;
--------------------------------------------------------------------------------
/app/render/src/components/Loading.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link } from 'react-router-dom';
3 | import ControlPanel from "./ControlPanel";
4 | import loading from '../../assets/hummingbird-loading.gif';
5 |
6 | /*
7 | Implemented react-router based on react-router v6 which introduced braking changes
8 | */
9 | const Loading = (props) => {
10 | console.log('bundleInfo from Loading.jsx', props.bundleInfo)
11 |
12 | return (
13 | <>
14 |
15 | 
16 |
18 |
19 | );
20 | }
21 |
22 |
23 | export default Loading;
--------------------------------------------------------------------------------
/app/render/src/components/Main.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import Loading from './Loading';
4 |
5 | const Main = (props) =>{
6 |
7 | const [renderLoader, setRenderLoader] = useState(false);
8 | const updateState = (e) => {
9 | // Access json generated
10 | console.log('bundleResults : ', JSON.parse(e.target.value).bundleResults)
11 | props.setState(JSON.parse(e.target.value).dependencyResults);
12 | const bundleHistory = JSON.parse(e.target.value).bundleResults;
13 | props.setBH(bundleHistory);
14 | const bundleLatest = bundleHistory.map(bundle => bundle[0]);
15 | props.setBundleInfo(bundleLatest);
16 |
17 | };
18 |
19 | return (
20 | <>
21 | Loading... This may take a while.
17 |
22 |
39 |
40 | );
41 | };
42 |
43 | export default Main;
--------------------------------------------------------------------------------
/app/render/src/components/Menu.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | const Menu = (props) =>{
5 |
6 | return (
7 |
23 | );
24 | };
25 |
26 |
27 | export default Menu;
--------------------------------------------------------------------------------
/app/render/src/components/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Routes, Route, useNavigate } from 'react-router-dom';
3 | const NavBar = (props) =>{
4 |
5 | const navigate = useNavigate();
6 | const setDiagramLoad = () => {
7 | props.setInitialDiagramLoad(false);
8 | }
9 | return (
10 |
23 | );
24 | }
25 |
26 | export default NavBar;
--------------------------------------------------------------------------------
/app/render/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
23 |
28 |
29 |
30 |
31 |
37 | {(renderLoader) ? (
24 |
25 |
27 | (Make sure the uploaded projects contain a webpack config file in their root directories!)
26 |
16 |
20 | )
21 | }
22 |
23 | export const DefaultNodeComponent = ({data}) => {
24 | return (
25 | {data.text}
18 |
32 | {(data.dependencyType === 'root') ?
36 | )
37 | }
--------------------------------------------------------------------------------
/app/render/src/stylesheets/style.css:
--------------------------------------------------------------------------------
1 | /* @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Josefin+Sans:wght@700&family=Oswald:wght@500&family=Roboto:wght@300&display=swap'); */
2 | @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
3 | /* @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap'); */
4 |
5 | * {
6 | font-family: Roboto, sans-serif;
7 | font-size: 14px;
8 | box-sizing: border-box;
9 | }
10 |
11 | /* Major global changes */
12 | body {
13 | background-color: #F7EBE8;
14 | width: 100%;
15 | height: 100%;
16 | padding: 0;
17 | margin: 0;
18 | overflow: hidden;
19 | }
20 |
21 | #app {
22 | position: absolute;
23 | width: 100%;
24 | height: 100%;
25 | }
26 | ul {
27 | list-style: none;
28 | padding-left: 0px;
29 | }
30 |
31 | button {
32 | border: none;
33 | outline: none;
34 | padding: 6px 12px;
35 | font-size: 12px;
36 | text-transform: uppercase;
37 | background-color: #FFA987;
38 | color: #1E1E24;
39 | border-radius: 0.5em;
40 | overflow: hidden;
41 | cursor: pointer;
42 | margin: 2em 0.5em;
43 | opacity: 80%;
44 | }
45 |
46 | button:hover{
47 | background-color: #E54B4B;
48 | color: #F7EBE8;
49 | opacity: 100%;
50 | }
51 |
52 | /* NavBar features */
53 | nav {
54 | display: grid;
55 | grid-row: 1;
56 | grid-gap: 1em;
57 | z-index: 7;
58 | width: 100%;
59 | height: 5em;
60 | background: #1D3557;
61 | color: white;
62 | font-family: 'Roboto', sans-serif;
63 | font-weight: bold;
64 | top: 0;
65 | left: 0;
66 | margin: 0;
67 | position: absolute;
68 | }
69 |
70 | h1 {
71 | display: grid;
72 | grid-row: inherit;
73 | font-size: 3em;
74 | justify-content: center;
75 | align-items: center;
76 | /* font-family: 'Josefin Sans', sans-serif; */
77 | font-family: 'Varela Round', sans-serif;
78 | /* font-family: 'Jua', sans-serif; */
79 | color: #fff;
80 | margin: 0.2em;
81 | }
82 |
83 | /* NavBar settings */
84 | nav ul {
85 | top: 0em;
86 | position: absolute;
87 | list-style-type: none;
88 | display: flex;
89 | flex-direction: row;
90 | justify-content: flex-end;
91 | align-items: flex-end;
92 | }
93 |
94 | nav ul li {
95 | margin: 0.7em;
96 | width: 5em;
97 | height: 2em;
98 | background: #FFA987;
99 | color: #1E1E24;
100 | display: flex;
101 | justify-content: center;
102 | align-items: center;
103 | text-decoration: none;
104 | box-sizing: border-box;
105 | border-radius: 0.5em;
106 | font-family: Roboto, sans-serif;
107 | font-size: 12px;
108 | text-transform: uppercase;
109 | }
110 |
111 | nav ul li:hover{
112 | font-weight: bold;
113 | background-color: #E54B4B;
114 | color: #F7EBE8;
115 | box-sizing: border-box;
116 | cursor: pointer;
117 | }
118 |
119 | nav ul li a:active{
120 | color: rgb(254, 251, 204);
121 | text-decoration: none;
122 | }
123 |
124 | /* Class-specific styles */
125 |
126 |
127 | /* main div which all other items render within */
128 | .container {
129 | top: 5em;
130 | position: absolute;
131 | width: 100%;
132 | min-height: 100%;
133 | display: flex;
134 | flex-direction: column;
135 | align-items: center;
136 | }
137 |
138 | /* click to add folders uploader button */
139 | .uploader__icon-area {
140 | flex: 1 1 auto;
141 | display: flex;
142 | flex-direction: column;
143 | justify-content: center;
144 | align-items: center;
145 | }
146 |
147 | .uploader__icon {
148 | flex: 0 0 auto;
149 | width: 90px;
150 | }
151 |
152 | .uploader__area__text {
153 | font-size: 14px;
154 | text-transform: uppercase;
155 | letter-spacing: 0.5px;
156 | font-weight: bold;
157 | }
158 |
159 | .uploader__button-area {
160 | flex: 0 0 auto;
161 | text-align: center;
162 | }
163 |
164 | .uploader__button {
165 | border: none;
166 | outline: none;
167 | padding: 6px 12px;
168 | font-size: 12px;
169 | text-transform: uppercase;
170 | overflow: hidden;
171 | cursor: pointer;
172 | }
173 |
174 | /* folders display */
175 | .folders {
176 | flex: 0 0 auto;
177 | width: 50vw;
178 | background-color: #cde5e6;
179 | color: #1D3557;
180 | padding: 20px;
181 | overflow-x: hidden;
182 | overflow-y: auto;
183 | }
184 |
185 | .app__folders__item {
186 | display: flex;
187 | align-items: center;
188 | overflow: hidden;
189 | margin: .5em 0;
190 | padding: .2em .5em;
191 | }
192 |
193 | .app__files__item__info {
194 | flex: 1 1 auto;
195 | margin: 0 20px;
196 | overflow: hidden;
197 | }
198 |
199 | .app__files__item__info__name {
200 | overflow: hidden;
201 | white-space: nowrap;
202 | text-overflow: ellipsis;
203 | margin: 0; }
204 | .app__files__item__info__size {
205 | font-size: 12px;
206 | color: #1D3557;
207 | margin: .2em 0;
208 | }
209 |
210 | img {
211 | flex: 0 0 auto;
212 | width: 16px;
213 | margin: 0 .2em;
214 | cursor: pointer;
215 | }
216 |
217 | .app__files__item:not(:last-child) {
218 | margin-bottom: 20px;
219 | }
220 |
221 | /* diagram features */
222 | .react-flow {
223 | overflow-wrap: anywhere;
224 | }
225 |
226 | .react-flow-fix {
227 | position: unset !important;
228 | }
229 |
230 | .react-flow__renderer {
231 | top: 5em !important;
232 | }
233 |
234 | .react-flow__controls {
235 | opacity: 80%;
236 | box-shadow: 0 0 0.2em darkgrey;
237 | }
238 | .react-flow__controls:hover {
239 | opacity: 100%;
240 | }
241 |
242 | .react-flow__minimap {
243 | opacity: 80%;
244 | box-shadow: 0 0 0.2em darkgrey;
245 | border-radius: 0.5em;
246 | }
247 | .react-flow__minimap:hover {
248 | opacity: 100%;
249 | }
250 |
251 | .controls {
252 | justify-content: center;
253 | margin-top: 5em;
254 | z-index: 6;
255 | position: absolute;
256 | width: 100%;
257 | align-items: center;
258 | display: inline-flex;
259 | }
260 |
261 | .main-container {
262 | width: 100%;
263 | height: 100%;
264 | display: flex;
265 | flex-direction: column;
266 | align-items: flex-start;
267 | }
268 |
269 | .top-container {
270 | width: 100%;
271 | height: 5em;
272 | }
273 |
274 | .body-container {
275 | height: 100%;
276 | width: 100%;
277 | display: flex;
278 | flex-direction: row;
279 | align-items: flex-start;
280 | }
281 |
282 | #menu {
283 | display: flex;
284 | flex-direction: column;
285 | height: 100%;
286 | width: 200px;
287 | color:rgb(214, 214, 214);
288 | background-color: #1D3557;
289 | z-index: 5;
290 | }
291 |
292 | .control-menu {
293 | display: flex;
294 | flex-direction: column;
295 | margin-top: 35px;
296 | }
297 |
298 | ul.control-menu li {
299 | width: 100%;
300 | padding: 12px 15px;
301 | color:rgb(214, 214, 214);
302 | }
303 |
304 | ul.control-menu li:hover {
305 | background:rgba(0, 0, 0, 0.4);
306 | color: white;
307 | }
308 |
309 | .active-li {
310 | background: rgba(0, 0, 0, 0.4) !important;
311 | font-weight: bold;
312 | }
313 |
314 | .notactive-li{
315 | font-weight: none;
316 | }
317 |
318 | #display {
319 | width: 100%;
320 | height: 100%;
321 | background-color: #F7EBE8;
322 | flex-direction: column;
323 | align-items: center;
324 | }
325 |
326 |
327 | .dashboard {
328 | padding: 20px;
329 | width: 100%;
330 | height: 100%;
331 | display: grid;
332 | grid-template-columns: repeat( 5, 1fr);
333 | grid-template-rows: repeat( 5, 1fr);
334 | }
335 |
336 | .card {
337 | border: 1px solid rgb(189, 189, 189);
338 | border-radius: 3px;
339 | display: flex;
340 | flex-direction: column;
341 |
342 | }
343 |
344 | .card-header {
345 | border-radius: 3px 3px 0px 0px;
346 | height: 2em;
347 | background-color:rgb(214, 214, 214);
348 | color: black;
349 | font-size: 1.2em;
350 | padding: 5px;
351 | flex-grow: 0;
352 | }
353 |
354 | .card-body {
355 | width: 100%;
356 | height: 100%;
357 | color:rgba(0, 0, 0, 0.4);
358 | font-size: 1.2em;
359 | padding: 5px;
360 | flex-grow: 1;
361 | }
362 |
363 | .card-footer {
364 | border-radius: 0px 0px 3px 3px;
365 | height: 2em;
366 | background-color:rgb(214, 214, 214);
367 | color: gray;
368 | font-size: 1em;
369 | padding: 5px;
370 | flex-grow: 0;
371 | }
372 |
373 | .totalsize-card{
374 | grid-column: 1 / span 5;
375 | grid-row: 1 / span 1;
376 | }
377 |
378 | .percent-bar{
379 | width: 100%;
380 | height: 30px;
381 | border: 1px solid gray;
382 | display: flex;
383 | flex-direction: row;
384 | justify-content: space-between;
385 | }
386 |
387 | .bar {
388 | display: flex;
389 | height: 30px;
390 | font-size: 1.2em;
391 | font-family: 'Roboto', sans-serif;
392 | flex-direction: row;
393 | justify-content: center;
394 | overflow: hidden;
395 | }
396 |
397 | .bundle-version-div {
398 | width: 100%;
399 | padding: 10px;
400 | display: flex;
401 | flex-direction: column;
402 | align-items: center;
403 | }
404 | select {
405 | font-size: 1.5em;
406 | width: 200px;
407 | height: 40px;
408 | background-color: #e63946;
409 | color: white;
410 | }
411 |
412 | select option {
413 | font-size: 1em;
414 | background-color: #e63946;
415 | color: white;
416 | }
417 |
418 |
419 | .col-s1 {
420 | grid-column-start: 1;
421 | }
422 | .col-s2 {
423 | grid-column-start: 2;
424 | }
425 | .col-s3 {
426 | grid-column-start: 3;
427 | }
428 | .col-s4 {
429 | grid-column-start: 4;
430 | }
431 |
432 | .col-e2 {
433 | grid-column-end: 2;
434 | }
435 | .col-e3 {
436 | grid-column-end: 3;
437 | }
438 | .col-e4 {
439 | grid-column-end: 4;
440 | }
441 | .col-e5 {
442 | grid-column-end: 5;
443 | }
444 | .col-e6 {
445 | grid-column-end: 6;
446 | }
447 | .col-ee {
448 | grid-column-end: -1;
449 | }
450 |
451 | .row-s1 {
452 | grid-row-start: 1;
453 | }
454 | .row-s2 {
455 | grid-row-start: 2;
456 | }
457 | .row-s3 {
458 | grid-row-start: 3;
459 | }
460 | .row-s4 {
461 | grid-row-start: 4;
462 | }
463 |
464 | .row-e2 {
465 | grid-row-end: 2;
466 | }
467 | .row-e3 {
468 | grid-row-end: 3;
469 | }
470 | .row-e4 {
471 | grid-row-end: 4;
472 | }
473 | .row-e5 {
474 | grid-row-end: 5;
475 | }
476 |
477 | .row-ee {
478 | grid-row-end: -1;
479 | }
--------------------------------------------------------------------------------
/app/resources/paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/bev/4fed75141012eb7bbe4c6bbe200133a594b6f97c/app/resources/paper.png
--------------------------------------------------------------------------------
/assets/images/DisplayPanel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/bev/4fed75141012eb7bbe4c6bbe200133a594b6f97c/assets/images/DisplayPanel.png
--------------------------------------------------------------------------------
/assets/images/table-of-contents.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/bev/4fed75141012eb7bbe4c6bbe200133a594b6f97c/assets/images/table-of-contents.png
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['@babel/preset-env', '@babel/preset-react'],
3 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bev",
3 | "version": "1.0.0",
4 | "description": "Bird's Eye View - a microfrontend dependency management system.",
5 | "main": "app/index.js",
6 | "scripts": {
7 | "start": "electron .",
8 | "build": "cross-env NODE_ENV=development webpack",
9 | "postinstall": "electron-builder install-app-deps",
10 | "pack": "electron-builder -m",
11 | "test": "jest"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/oslabs-beta/bev.git"
16 | },
17 | "keywords": [],
18 | "author": "Tu Pham, Ryan Lee, Ian Tran, Michael Pay",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/oslabs-beta/bev"
22 | },
23 | "jest": {
24 | "testEnvironment": "jest-environment-jsdom"
25 | },
26 | "homepage": "https://github.com/oslabs-beta/bev",
27 | "devDependencies": {
28 | "@babel/core": "^7.16.0",
29 | "@babel/preset-env": "^7.16.0",
30 | "@babel/preset-react": "^7.16.0",
31 | "@testing-library/jest-dom": "^5.15.0",
32 | "@testing-library/react": "^12.1.2",
33 | "@testing-library/user-event": "^13.5.0",
34 | "babel-jest": "^27.3.1",
35 | "babel-loader": "^8.2.3",
36 | "cross-env": "^7.0.3",
37 | "css-loader": "^6.5.1",
38 | "electron": "^15.3.1",
39 | "electron-builder": "^22.13.1",
40 | "file-loader": "^6.2.0",
41 | "fs": "0.0.1-security",
42 | "html-webpack-plugin": "^5.5.0",
43 | "jest": "^27.3.1",
44 | "jest-environment-jsdom": "^27.3.1",
45 | "json-loader": "^0.5.7",
46 | "path": "^0.12.7",
47 | "react-test-renderer": "^17.0.2",
48 | "sass": "^1.43.4",
49 | "sass-loader": "^12.3.0",
50 | "style-loader": "^3.3.1"
51 | },
52 | "dependencies": {
53 | "bootstrap": "^5.1.3",
54 | "dagre": "^0.8.5",
55 | "dependency-cruiser": "^10.6.0",
56 | "drag-drop": "^6.1.0",
57 | "elkjs": "^0.7.1",
58 | "fs-extra": "^9.0.1",
59 | "open": "^7.3.0",
60 | "react": "^17.0.2",
61 | "react-bootstrap": "^2.0.2",
62 | "react-dom": "^17.0.2",
63 | "react-dropdown": "^1.9.2",
64 | "react-flow-renderer": "^9.6.11",
65 | "react-router": "^6.0.0",
66 | "react-router-dom": "^6.0.0",
67 | "react-use": "^17.3.1",
68 | "recharts": "^2.1.6",
69 | "treeify": "^1.1.0",
70 | "url-loader": "^4.1.1",
71 | "vue": "^2.6.14",
72 | "webpack": "^5.64.3",
73 | "webpack-cli": "^4.9.1"
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 |
5 | module.exports = {
6 | mode: process.env.NODE_ENV,
7 | entry: './app/render/src/index.js',
8 | output: {
9 | path: path.resolve(__dirname, 'app/render/html'),
10 | filename: 'bundle.js',
11 | },
12 |
13 | plugins: [
14 | new HtmlWebpackPlugin({
15 | template: './app/render/src/index.html',
16 | }),
17 | ],
18 | module: {
19 | rules: [
20 | {
21 | test: /\.jsx?/,
22 | exclude: /node_modules/,
23 | use: {
24 | loader: 'babel-loader',
25 | options: {
26 | presets: ['@babel/preset-env', '@babel/preset-react']
27 | }
28 | },
29 | },
30 | {
31 | test: /\.(css)$/,
32 | exclude: /node_modules/,
33 | use: ['style-loader', 'css-loader'],
34 | },
35 | {
36 | test: /\.(jpe?g|png|gif|svg)$/i,
37 | loader: 'file-loader',
38 | // options: {
39 | // name: '/app/render/assets/[name].[ext]'
40 | // }
41 | },
42 | { test: /\.json$/, loader: 'json-loader' },
43 | ]
44 |
45 | },
46 | devServer: {
47 | publicPath: '/public',
48 | port: 8080,
49 | proxy: {
50 | '/api/**' : 'https://localhost:3000',
51 | },
52 | },
53 | resolve: {
54 | //Enable importing js or jsx without specifying type
55 | extensions: ['.js', '.jsx'],
56 | },
57 | };
--------------------------------------------------------------------------------
{data.text}
34 | {(data.dependencyType !== 'root') ?