Skip to content

SynBioSuite Architecture

Jump to bottom
CoderLLamaPhone edited this page May 27, 2025 · 2 revisions

SynBioSuite Architecture

SynBioSuite is a web-based application for designing and analyzing genetic circuits. The application is modular, leveraging modern JavaScript technologies and frameworks to ensure scalability and maintainability.

Overview

SynBioSuite is composed of the following major architectural components:

  1. Frontend SPA (Single Page Application):

    • The front-end is a Single Page Application utilizing React for architecture and Mantine UI for styling purposes to create for a responsive web interface.

  2. Integration with External Tools:

    • Utilizes SBOLCanvas in the form of an iFrame for creating genetic circuit designs. This is applies for the Designs and Plasmids editors
    • Connects to the iBioSim API for running simulations and analyzing genetic circuits. This applies for the Analysis editor.
    • Login integration with registries like SynBioHub and Flapjack. This is architecturally significant and is integrated separate from all the editors, however support was originally added for the Experiments editor.
    • In development - SBS Server - this is the official backend of SynBioSuite is under constant developments. See SBS Server Wiki for documentation and explanation of the endpoints and features. This applies for Assembly Plans, Builds, and Experiments editors.

  3. State Management:

    • The website utilizes a centralized state management system using Redux Toolkit. Before development on SynBioSuite, it is highly recommended that users learn React Redux.
    • The React Redux hooks and slices can be found at src/components/redux

  4. File Serialization

    Certain editors such as Analysis and Experiments utilize the redux toolkit to store information in their respective files. When one of these files is opened as a panel, the values of any panel properties defined using the usePanelProperty() (you must pass in the panel's context created which is created at the parent file of the panel using const panelContext = createContext() and can be later imported in child components and used by useContext(panelContext)) hook will be serialized into the panel's file. This get's stored onto the user's working directory and can be deserialized to recieve information at a later date.

  5. File System Interaction:

    • Most file management functions can be found under src/components/redux/hooks/workingDirectoryHooks.jsx
    • SynBioSuite was built to originally work natively from an exported directory of iBioSim. This means that the following editors will work natively in the directory: Designs, Models, Archives, and Analyses and are not placed inside a subdirectory
    • All other editors (not including the urls stored in local storage for SynBioHub and Flapjack) are stored in subdirectories (names of each subdirectory can be found in the src/objectType.js file corresponding to their object type)

  6. Important Directories:

    • src/components/activities:
      • Houses most React component information regarding the left panel of editors and buttons
    • src/components/panels:
      • Houses the actual editor for each object type
      • It is common practice on SynBioSuite to create a subdirectory for your editor (if it is not an iFrame) and create a parent file which creates the panel context for the editor and has the panel provider. A good example can be found at src/components/panels/simulator/SimulatorPanel.jsx
      • This parent file should call the editor wizard as a child component. The wizard serves as the main manager for the editor and keeps track of steps and which children components should be showing at any point. A good example can be found at src/components/panels/simulator/AnalysisWizard.jsx (this is paired with the aforementioned SimulatorPanel.jsx)
    • src/components/Dropzone.jsx:
      • While this isn't a subdirectory, it is an important file to note. Many editors use the Dropzone to manage file input from the objects on the left "activities list." This is a custom defined component and should not be confused with the documentation on Mantine UI.
      • There is also a custom "MultiDropzone which has been used as part of the "Builds" editor
    • src/components/icons:
      • This is a list of usable icons for all of SynBioSuite. When possible, it is preferred that you use an exisitng icon in React Icons (an installed package with a number of icons that can be imported). A list of these icons can be found online with the respective group to import from
      • If for some reason you cannot use React Icons, download an SVG file and insert into the icons folder
    • src/components/modules:
      • This contains a number of helper functions that this documentation will not cover. The main point of interest here is the modals that are defined. The login modals exist in the modular_login folder and can be modified there. The directory handling modals exist in the directory_modal folder
    • src/components/redux:
      • This houses all the relevant information regarding the React Redux Toolkit hooks and slices. It is highly recommended that you take a course on React Redux before attempting to modify these files
    • Files in src/components:
      • activities.js
        • Defines all the activities for the far left panel including their icons.
      • API.js & ibiosim.js
      • objectTypes.js
        • Serves as the center to define all potential objects that show up on left panel. This includes editors and some input files with no editor associated
      • panels.js
        • Similar as objectTypes.js except for all panel types. Is used to link editor with the objectType. Also note that serializer and deserializers need to be created for each panel if neccessary.

2. Integration with External Tools

SynBioSuite connects with several external tools to extend its functionality:

  • SBOLCanvas:

    • Used for designing genetic circuits in the SBOL format.
    • Accessible via the VITE_SBOL_CANVAS_URL environment variable.

  • iBioSim API:

    • Facilitates simulations and analyses.
    • Configured through the VITE_IBIOSIM_API environment variable.
    • Includes functionalities like polling for simulation status and terminating analyses.

  • SynBioSuite Server

    • Backend of SynBioSuite SynBioSuite Server which contains python packages such as SBOL2Build, PUDU, and Tricahue
    • Configured through the VITE_SYNBIOSUITE_API

3. State Management

Centralized state management is implemented primarily using Redux Toolkit. See point 1.6 Important Directories.

4. File System Interaction

SynBioSuite allows users to directly interact with their local file system. Key features include:

  • File Handling:
    • Files are classified into types first by checking wether it is in a subdirectory or not
      • If it is in a subdirectory, the name is cross referenced to the objectType list (see 1.6 Important Directories) to see if the name matches the subdirectory attribute of one of the objects
        • If it is, it will also confirm the file extension matches (if applicable).
      • For files not in a subdirectory, it is assumed that the file is an iBioSim based file.
        • Omex and Analysis files are matched using their respective file extension
          • If no match is found, SBOL and SBML files are found by reading the file to see if there are XML tags that match the regex under the fileMatch attribute
  • Working Directory Management:
    • File importation and new files should be created in their respective folders and should ease use on the burden of the user to manage the directory version to match SynBioSuite
    • There is a known issue that if an SBOL file is created but nothing is drawn on the canvas, the file will be ignored upon refresh since there is no XML to match
  • Hooks:
    • There are a number of hooks available for file management and wokring directory management which can be found at src/redux/hooks
    • It is highly recommended you gain familiarity with the React Redux Toolkit before continuing.

Workflow Overview

SynBioSuite uses a slightly modified version of the DBTL dogma to ease user experience. It is as follows:

  1. Part Selection:

    • Users can download their respective designs and content from SynbioHub

  2. Design:

    • Users can create genetic circuit designs using SBOLCanvas.
    • The application enables editing and visualization of SBOL files.

  3. Model:

    • Users can import models and archives to create simulations using the analyses editor

  4. Build

    • Assembly planning tools help users construct plasmids and other genetic constructs.

  5. Test:

    • Users can import experimental metadata and plate reader outputs to then upload to SynbioHub and Flapjack

  6. Learn:

    • Users can open Flapjack to learn more about their specific design or component

Environment Variables

To set up the application, the following environment variables are required:

  • VITE_IBIOSIM_API:
    • The endpoint for the iBioSim API
  • VITE_SBOL_CANVAS_URL:
    • The URL for an instance of SBOLCanvas
  • VITE_SYNBIOSUITE_API:
    • The endpoint for the SynBioSuite Server

Clone this wiki locally