Visualization

The visualization opens a cc.json and displays a city-like landscape based on the folder structure.

State Management

We use Redux to manage our state. This way we have a single state that allows us to have a single one-directional data flow at a time. Get familiar with the core-concepts of redux and check out the chart below afterwards.

This chart shows the correct way to update the viewModel of a controller.

redux

This chart shows the data flow in our architecture when a new cc.json is opened.

new-file-imported

PlopJS

In order to reduce the amount of time spent on repetitive work such as creating 5 files for an ui-component, we implemented some plop-templates that will help you with that. Just type npm run plop and let the magic take over.

Currently, we support the creation of:

  • state service
  • ui-component
  • util static class
  • redux property
  • redux sub-reducer

Other Technologies

  • Typescript
  • npm
  • AngularJs 1.x, specifically what are Components, Services
  • Jest (Unit Tests)
  • Puppeteer (E2E Tests)
  • ESLint
  • ThreeJs for 3d visualization
  • d3 for tree map algorithm and tree hierarchy (parent-child relations)
  • Webpack
  • electron
  • Redux

Important Concepts

  • Dependency Injection
  • Observer Pattern (.subscribe(...))
  • 2D Squarified TreeMap

Building

There are 3 possible ways to build and run the application. You can run it as a developer with hot-code, which allows you to make changes in the code and see the results in your browser a few seconds later. But you can also build the application yourself and run it in a standalone or in the browser.

Note that the build command requires unix tools on path, so on Windows add them to it or use the bash shell

  • Development: npm run dev
  • Standalone: npm run build -> npm start
  • Web: npm run build -> Move the created content to a nginx server for example

Testing

  • Unit-Tests: npm test
  • E2E-Tests: npm run build && npm run e2e
  • For IntelliJ: Run -> Edit Configurations -> Templates -> Jest -> Add configuration file -> Select jest.config.json -> Add CLI argument --env=jsdom

For more test options check the package.json

Troubleshooting

ESLint & IntelliJ

If you run into a warning about the ESLint configuration you can try to change Run for files default glob pattern to this pattern "**/*.(js|ts|jsx|tsx|html|vue)"

Updated: