Add manual

.github/workflows/deploy.yml

@@ -30,6 +30,14 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      # first compile the manual and sneak it into /public
+      - name: Setup mdBook
+        uses: peaceiris/actions-mdbook@v2
+      - run: mdbook build manual/
+      - run: mv manual/book public/manual
+
+      # then do our usual vite build
       - name: Set up Node
         uses: actions/setup-node@v4
         with:

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 *.sln
 *.sw?
 .ignore
+
+# Custom
+public/manual

.prettierignore

@@ -4,4 +4,6 @@ public/**/*
 src/assets/**/*.json
 src/features/editor/language-handler/**/*
 src/vendor/
-**/*.md
+DEVINSTRUCTIONS/**/*.md
+manual/theme/**/*
+manual/book/**/*

DEVINSTRUCTIONS/MANUAL.md

@@ -0,0 +1 @@
+You can edit the manual in `/manual`. Read `/manual/README.md` for more specifics.

DEVINSTRUCTIONS/OVERVIEW.md

@@ -55,3 +55,4 @@ Please write tests for any changes you make, as much as is reasonable.
 - [simulation + copasi/antimony](./SIMULATION.md)
 - [url](./URL.md)
 - [icons](./ICONS.md)
+- [manual](./MANUAL.md)

DEVINSTRUCTIONS/URL.md

@@ -1 +1,2 @@
 You can change the base url in `vite.config.ts`. Make sure to also change it in the `public/manifest.webmanifest` as well.
+Change it in `manual/book.toml` as well.

README.md

@@ -23,10 +23,13 @@ Try it out now! https://sys-bio.github.io/WebIridium/
 # Preview
 
 #### Viewing 3D plot, sliders on the bottom
+
 <img width="735" height="478" alt="hello webiridum" src="https://github.com/user-attachments/assets/59c2dc68-8e2d-4525-b9e7-f2d428b6f4c8" />
 
 #### Customizing graph
+
 <img width="735" height="478" alt="graph settings" src="https://github.com/user-attachments/assets/ace49abe-5cfe-4f10-8374-ac55917a9628" />
 
 #### Start screen
+
 <img width="735" height="478" alt="start screen" src="https://github.com/user-attachments/assets/f5c81dc3-2c86-4446-87c5-7af5e9fc266c" />

manual/.gitignore

@@ -0,0 +1 @@
+book

manual/README.md

@@ -0,0 +1,14 @@
+We use `mdbook` to generate the manual.
+
+Use `mdbook serve --open manual/` to open up the book in your browser. As you edit the files, it should reload automatically.
+
+To integrate the manual into the page run these commands:
+
+- `mdbook build`
+- `mv manual/book public/manual`
+  You will not be able to see the manual via the Vite dev server otherwise.
+
+## notes
+
+- We have custom `Iridium Light` and `Iridium Dark` themes. You can edit the specific colors in `./theme/css/variables.css`
+- We duplicate the favicon in the `./theme/` directory, so you will have to edit both the one ine `/public/` and `/manual/theme` if you make a change.

manual/book.toml

@@ -0,0 +1,12 @@
+[book]
+title = "WebIridium User Manual"
+authors = ["Dan Nguyen", "Long Nguyenle"]
+language = "en"
+
+[output.html]
+default-theme = "iridium-light"
+preferred-dark-theme = "iridium-dark"
+git-repository-url = "https://github.com/sys-bio/WebIridium"
+edit-url-template = "https://github.com/sys-bio/WebIridium/edit/main/manual/{path}"
+site-url = "WebIridium/manual/"
+additional-css = ["theme/img-white-background.css"]

manual/src/SUMMARY.md

@@ -0,0 +1,6 @@
+# Summary
+
+# User Guide
+
+- [Introduction](./introduction.md)
+- [Getting Started](./get-started.md)

manual/src/get-started.md

@@ -0,0 +1,63 @@
+# Getting Started
+
+You can access WebIridium immediately via the URL: [https://sys-bio.github.io/WebIridium/](https://sys-bio.github.io/WebIridium/).
+
+In this section, we'll be creating a model, simulating it, searching for interesting configurations, and then saving them.
+
+## Making Your First Project
+
+The first screen is the _Projects_ page. On the left, you'll see a list of projects you have created. On the right is a list of models pulled from [https://biomodels.org/](https://biomodels.org/). Pressing one of these will automatically generate a project from the corresponding biomodel.
+
+Press the button near the top center that says "New Project."
+
+This will create a new project and open it. Now you should see something like this:
+
+![On the left, a simulation panel, on the right, code for your model](images/initial-project-view.png)
+
+On the left is the simulation panel. We can use this to run a time course simulation. On the right is the Antimony code for our model. We will not cover how to use Antimony in this manual, but you can learn more about it here: [https://tellurium.readthedocs.io/en/latest/antimony.html](https://tellurium.readthedocs.io/en/latest/antimony.html).
+
+## Running a Simulation
+
+Press the large teal "Simulate" button to run your simulation. This will start a time course simulation.
+
+It may take a few seconds at first as WebIridium loads the simulator.
+
+Once the simulation is done, a graph should appear on the right:
+
+![On the left, simulation panel, in the middle, code, on the right, graph of results](images/simulation-view.png)
+
+Congratulations, you have run your first time course simulation on WebIridium!
+
+## Loading Examples
+
+On the bottom-left is a panel named _Examples_. You can explore different types of models via this panel. Try out different ones, and pick one you think is interesting.
+
+## Using Sliders
+
+One of the main features of WebIridium is are the _sliders_. Sliders allow us to change the parameters and initial conditions of our model without having to edit our code then press simulate, and do this over and over again every time we want to change a value.
+
+Open the Sliders menu by pressing the ![sliders](images/sliders-icon.svg) sliders icon at the top of the simulation panel. This should open a menu in the center-bottom with an array of sliders.
+
+![same view as before but with sliders at the center-bottom](./images/sliders-active.png)
+
+By default, all sliders are disabled so they don't affect your model unexpectedly. Press "Activate All" next to the "Parameters" subheading to activate some sliders.
+
+You can start dragging the sliders and the changes should reflect immediately in the graph to the right. Try doing this until you find something interesting.
+
+Once you have found an interesting combination of parameters, you can press the "Copy to Model" button in the top-right of the sliders panel to save the values as a comment into your code. You will then be able to load these parameters back into your sliders by pressing the "Load Parameter Set" option which should appear right above the comment.
+
+You can download your graph to share by pressing the ![download](images/download-icon.svg) download icon to the top-right of the graph. You can download your Antimony code by pressing `File > Download as Antimony` in the top-left.
+
+## Finishing Up
+
+Now that you are done, it's time to close your project.
+
+In the top-right you will see an exit icon. Press it twice to close your project. You will return to the projects page.
+
+Since projects in WebIridium auto-save, you don't have to worry about losing your progress. You can close or refresh your tab at any time, and everything will be right where you left it.
+
+## Next Steps
+
+These are the basics of WebIridium, but there are many more features to explore. Try poking around the UI for anything that might be useful to you.
+
+You can also use the AI assistant to get help.

manual/src/introduction.md

@@ -0,0 +1,17 @@
+![WebIridium Banner](<webiridium banner.png>)
+
+# Introduction
+
+Welcome to the WebIridium manual!
+
+WebIridium is a web application for simulating and analyzing biological models
+
+You can use it to:
+
+- Create and edit models using the Antimony modeling language ([https://tellurium.readthedocs.io/en/latest/antimony.html](https://tellurium.readthedocs.io/en/latest/antimony.html)).
+- Run time course, steady state, and parameter scan simulations.
+- Visualize data with 2D and 3D line charts, bar charts, and tables.
+- Search and pull models from the BioModels repository ([https://biomodels.org](https://biomodels.org)).
+- Interactively manipulate models with sliders.
+
+You can try it right now by accessing [https://sys-bio.github.io/WebIridium/](https://sys-bio.github.io/WebIridium/).