Configuration

Overview

SCHEMA lab offers comprehensive configuration options through both static settings and runtime parameters. This documentation covers how to customize the platform for local development, production deployment, and feature extension.

Code Organization

The SCHEMA lab codebase is organized in a modular structure that facilitates configuration and customization. Here's the key directory layout:

schema-lab/
├── public/               # Public assets and static resources
├── src/                  # Core application logic
│   ├── api/v1/           # API implementation and endpoints
│   ├── auth/             # Authentication and authorization logic
│   ├── client/           # Frontend React components
│   ├── config/           # Application-level configuration files
│   ├── dashboard/        # Dashboard views and controllers
│   │   ├── tasks/        # Task management components
│   │   │   ├── details/  # Task detail views
│   │   │   └── experiments/ # Experiment management
│   ├── img/about_us/     # About section assets
│   ├── layouts/          # Layout templates and components
│   ├── runtask/          # Single task execution logic
│   ├── runworkflowtask/  # Workflow task orchestration
│   └── utils/            # Helper functions and utilities

Application Configuration

Core Configuration File

The primary configuration file is located at src/config/config.json. This file controls application-wide settings including:

src/config/config.json

{
  "title": "SCHEMA lab",
  "favicon_logo": "media/schema/favicon.ico",
  "landing_page": {
    "title": "Welcome to SCHEMA lab",
    "subtitle": "Your platform for managing computational tasks",
    "logo": "media/schema/logo.png",
    "logo_alt": "Schema Logo",
    "image": "media/schema/welcome.png",
    "image_alt": "Schema Image"
  },
  "footer": {
    "footerMainText": "Powered by",
    "footerLink": "https://github.com/athenarc/schema-lab",
    "footerLinkText": "SCHEMA lab",
    "footerExtraText": "Copyright © 2024, SCHEMA lab, ATHENA RC."
  },
  "pagination": {
    "taskPerPage": 10
  }
}

Configuration Options

Setting	Description
title	Sets the browser title and application name
favicon_logo	Path to the favicon displayed in browser tabs
landing_page	Controls the welcome page appearance
footer	Configures footer content and links
pagination	Sets the number of items displayed per page

UI Customization

Theme Customization

SCHEMA lab uses SCSS for styling, making it easy to apply a custom theme:

1. Open src/index.scss
2. Modify the color variables to match your brand:

src/index.scss

// Primary colors
$primary: #3f51b5;
$primary-light: lighten($primary, 15%);
$primary-dark: darken($primary, 15%);

// Secondary colors
$secondary: #f50057;
$secondary-light: lighten($secondary, 15%);
$secondary-dark: darken($secondary, 15%);

Layout Components

To customize the application layout:

1. Navigate to src/layouts/
2. Modify existing components or create new ones
3. Update the layout references in the main application

Custom About Page

To replace the default About Us page:

1. Create your custom component in src/layouts/:

src/layouts/CustomAbout.jsx

import React from "react";

const CustomAbout = () => {
  return (
    <div className="about-container">
      <h1>About Our Organization</h1>
      {/* Add your custom content here */}
    </div>
  );
};

export default CustomAbout;

2. Update the route configuration in src/routes.jsx:

src/routes.jsx

// Replace the default import
// import AboutusTemplate from './layouts/Aboutus_template';

// With your custom component
import CustomAbout from "./layouts/CustomAbout";

// Then update the route definition
const routes = [
  // ...other routes
  {
    path: "/about",
    element: <CustomAbout />,
  },
  // ...other routes
];

Environment Configuration

SCHEMA lab uses environment variables for deployment-specific settings. Create a .env file in the project root:

.env

# SCHEMA lab settings

# Default page size (overwritten from config.json)
# Example:
REACT_APP_SCHEMA_LAB_PAGE_SIZE=7

# Supported login providers
# Example:
REACT_APP_SCHEMA_LAB_LOGIN_PROVIDERS=ApiKeyLogin

# -------------------------------------

# SCHEMA api settings

# - SCHEMA api URL
# Example:
REACT_APP_SCHEMA_API_URL=http://62.217.122.36:8000

# Setup Cookie expiration time
EXPIRE_COOKIE_IN_DAYS=1