dictybase/dictyaccess repository overview

⁠Master branch

⁠Develop branch

⁠DictyAccess

This is the DictyAccess data visualization dashboard application. It has six different dashboards -- Bird's Eye, Genome Stats, Annotations, Phylogeny, Analytics and Dicty Stock Center. It is built with React⁠ and it uses Material-UI⁠ as a CSS framework.

• Development⁠
  • Configuration⁠
    • Providers⁠
    • Auth server⁠
    • API server⁠
    • Navbar and footer⁠
  • Semantic Versioning⁠
  • Running the application(dev version)⁠
  • Application Structure⁠
• Deployment⁠

⁠Development

• First clone this repository.
• Next configure the application as described below.

⁠Configuration

⁠Providers

• This is the most important part and it is absolutely needed to run the application.
• Copy the provided sample clientConfig.sample.js⁠ file to clientConfig.js in the same folder.
• Then add the provider names and their corresponding client IDs.
• All the providers should have a matching counterpart in the oauthConfig.js⁠ file. Fill up all the configuration parameters for every new provider in that file.
• For each of the provider names, a corresponding login button will be shown in the login route. The list of supported buttons are given here⁠

⁠Auth server

• By default, the application expects it to run on https://betatoken.dictybase.local
• The url of the auth server can be configured by REACT_APP_AUTH_SERVER environmental variable.
• The binaries for the auth server can be downloaded from its release page⁠. Download the one that is suitable for your OS and make sure you always use the latest one.
• The REACT_APP_AUTH_SERVER env variable can also be customized by modifying the global variable in the env⁠ file.

⁠API server

• By default, the application expects it to run on https://betafunc.dictybase.local
• The url of the auth server can be configured by REACT_APP_API_SERVER environmental variable.
• Kubeless Node.js⁠ and Golang⁠ functions are currently used and mapped to this URL. All of the Node.js functions are necessary to run version 1.0.0 of this application.
• The REACT_APP_API_SERVER env variable can also be customize by modifying the global variable in the env⁠ file.

⁠Navbar and Footer

• The application has env variables for REACT_APP_NAVBAR_JSON and REACT_APP_FOOTER_JSON that are set to the corresponding URLs where the JSON data is stored on GitHub.

⁠Semantic Versioning

This app has been set up to use semantic-release⁠ and commitizen⁠. After adding a new commit (git add .), use npm run cz and follow the prompts to categorize and provide more details about your commit. Once complete, push your changes to whatever branch you are working on.

When you are ready to push to prod, you can use semantic-release to automate the release process:

• Merge your changes into master
• Run npx semantic-release

Important: you MUST have an env variable stored for GH_TOKEN or GITHUB_TOKEN that contains a GitHub personal access token⁠. You can either pass this in manually when you run the script (i.e. GH_TOKEN=XXX npx semantic-release) or you can store your env variable locally⁠.

This will look at your most recent commits since the last git tag and automatically determine the appropriate version number for your release. It also updates the CHANGELOG⁠ documentation.

⁠Running the application (dev version)

• npm install
• npm start

⁠Application Structure

This was reconfigured to use the create-react-app⁠ structure and philosophy. Please read their User Guide⁠ for more detailed information.

The app's src folder is separated into three main folders:

app

• contains app layout, routing and Redux reducers/store

common

• contains shared content for the entire application, including images, reusable components, constants and custom styling

features

• this is split into folders representing the different dashboards, and each has their specific components separated by type (i.e. charts, tables, etc.)

⁠Deployment

The application is deployed by building a Docker image⁠ and running it through Kubernetes⁠. More detailed information about the deployment process for DSC and all Dicty software can be found here⁠.