Trontheim

Idea

This is a basic implementation of the Oslo Frontend for the Arnheim Framework, that seeks to implement a working pipeline for the processing and analysis of microscopic data. Arnheim uses Docker-Containers to ensure most of its workflow is as modular and scalable as possible. This Repository contains

Oslo (the Frontend, react-based orchestrator of the modules)

Prerequisites

As Oslo is based on react and therefore Node it needs a working Node installation running on your Machine (detailed instructions found on Node.js)

Installing

Once this repository is cloned, cd into the parent directory and run

npm install

This should cause the initial installation of all required libraries through npm, (please be patient)

Running

From now on you can run the project through

npm start

The server should now bind on "localhost:3000"

Accessing your local Bergen instance

Oslo is just the frontend for your Bergen instance, so in order to connect to your local server adjust the endpoints.js in the "src/constants" to your needs, populate and Instance after you setup a new Oauth Application on your backend (http://localhost/o/applications) (refer to django-oauth-toolkit for more information)

Testing and Documentation

So far Oslo does not provide unit-tests and is in desperate need of documentation, please beware that you are using an Alpha-Version

And coding style tests

Explain what these tests test and why

Give an example

Build with

Stavanger - a yet to be released framework for redux, rxjs state management
React js
Redux js
react-router-dom
react-redux
react-router-dom
redux-observable
Rxjs - Rxjs v6
reactstrap - Easy to use React Bootstrap 4 components
react-loadable - 5.4.0

Features

Scss
Domain-style for code structure
Bundle Size analysis
Code splitting with react-loadable

Roadmap

This is considered pre-Alpha so pretty much everything is still on the roadmap

Adding new Node/Module/Feature

Create a Module/Feature folder at src/nodes
like - - src/nodes/MaxISP
Feature folder must contain booststrap file named index.js and css file 'style.css' at root

Like -

src/nodes/MaxISP/index.js
src/nodes/MaxISP/style.css

Next as per need, add sub folders like -

src/home/actions/
src/nodes/MaxISP/components/

See reference implementations in the src/nodes directory

Styling

we are using scss Preprocessor. Create a feature/domain specfic scss file, example - src/home/style.scss

After compilation the new corresponding CSS file next to it. example - src/home/style.css

Finally you can import that css file in LoginApp.js file example - src/home/LoginApp.js will import src/home/style.css

Analyzing the Bundle Size

We can Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps and source-map-explorer great tool for this.

The source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from.

To analyzing bundle, run command -

$ npm run analyze / $ yarn analyze