diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..bd3780b
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,43 @@
+name: Deploy to GitHub Pages
+
+on:
+ push:
+ branches:
+ - master
+ # Review gh actions docs if you want to further define triggers, paths, etc
+ # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+permissions:
+ contents: write
+
+jobs:
+ deploy:
+ name: Deploy to GitHub Pages
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: 18
+ cache: yarn
+
+ - name: Install dependencies
+ run: yarn install --frozen-lockfile
+ - name: Build website
+ run: yarn build
+
+ # Popular action to deploy to GitHub Pages:
+ # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
+ - name: Deploy to GitHub Pages
+ uses: peaceiris/actions-gh-pages@v3
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ # Build output to publish to the `gh-pages` branch:
+ publish_dir: ./build
+ # The following lines assign commit authorship to the official
+ # GH-Actions bot for deploys to `gh-pages` branch:
+ # https://github.com/actions/checkout/issues/13#issuecomment-724415212
+ # The GH actions bot is used by default if you didn't specify the two fields.
+ # You can swap them out with your own user credentials.
+ user_name: github-actions[bot]
+ user_email: 41898282+github-actions[bot]@users.noreply.github.com
\ No newline at end of file
diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
new file mode 100644
index 0000000..967d522
--- /dev/null
+++ b/.github/workflows/test-deploy.yml
@@ -0,0 +1,24 @@
+name: Test deployment
+
+on:
+ pull_request:
+ branches:
+ - master
+ # Review gh actions docs if you want to further define triggers, paths, etc
+ # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+jobs:
+ test-deploy:
+ name: Test deployment
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: 18
+ cache: yarn
+
+ - name: Install dependencies
+ run: yarn install --frozen-lockfile
+ - name: Test build website
+ run: yarn build
\ No newline at end of file
diff --git a/blog/2019-05-28-first-blog-post.md b/blog/2019-05-28-first-blog-post.md
deleted file mode 100644
index 02f3f81..0000000
--- a/blog/2019-05-28-first-blog-post.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-slug: first-blog-post
-title: First Blog Post
-authors:
- name: Gao Wei
- title: Docusaurus Core Team
- url: https://github.com/wgao19
- image_url: https://github.com/wgao19.png
-tags: [hola, docusaurus]
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/blog/2019-05-29-long-blog-post.md b/blog/2019-05-29-long-blog-post.md
deleted file mode 100644
index 26ffb1b..0000000
--- a/blog/2019-05-29-long-blog-post.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-slug: long-blog-post
-title: Long Blog Post
-authors: endi
-tags: [hello, docusaurus]
----
-
-This is the summary of a very long blog post,
-
-Use a `` comment to limit blog post size in the list view.
-
-
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx
deleted file mode 100644
index c04ebe3..0000000
--- a/blog/2021-08-01-mdx-blog-post.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-```js
-
-```
-
-
-
-:::
diff --git a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg
deleted file mode 100644
index 11bda09..0000000
Binary files a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg and /dev/null differ
diff --git a/blog/2021-08-26-welcome/index.md b/blog/2021-08-26-welcome/index.md
deleted file mode 100644
index 9455168..0000000
--- a/blog/2021-08-26-welcome/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
diff --git a/blog/authors.yml b/blog/authors.yml
deleted file mode 100644
index bcb2991..0000000
--- a/blog/authors.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-endi:
- name: Endilie Yacop Sucipto
- title: Maintainer of Docusaurus
- url: https://github.com/endiliey
- image_url: https://github.com/endiliey.png
-
-yangshun:
- name: Yangshun Tay
- title: Front End Engineer @ Facebook
- url: https://github.com/yangshun
- image_url: https://github.com/yangshun.png
-
-slorber:
- name: Sébastien Lorber
- title: Docusaurus maintainer
- url: https://sebastienlorber.com
- image_url: https://github.com/slorber.png
diff --git a/changelog/2024-01-09-v0.1.0-initial-release/index.md b/changelog/2024-01-09-v0.1.0-initial-release/index.md
new file mode 100644
index 0000000..a7ddf20
--- /dev/null
+++ b/changelog/2024-01-09-v0.1.0-initial-release/index.md
@@ -0,0 +1,13 @@
+---
+slug: initial-release
+title: v0.1.0 Initial Release
+authors: [levitt]
+tags: [oml, vscode]
+---
+
+## v0.1.0 Initial Release
+
+![OML Vision Logo](./vision480x96.png)
+
+### Added
+- Initial release
diff --git a/changelog/2024-01-09-v0.1.0-initial-release/vision480x96.png b/changelog/2024-01-09-v0.1.0-initial-release/vision480x96.png
new file mode 100644
index 0000000..6ff05cc
Binary files /dev/null and b/changelog/2024-01-09-v0.1.0-initial-release/vision480x96.png differ
diff --git a/changelog/authors.yml b/changelog/authors.yml
new file mode 100644
index 0000000..21643e1
--- /dev/null
+++ b/changelog/authors.yml
@@ -0,0 +1,5 @@
+levitt:
+ name: Aaron Levitt
+ title: Full Stack Engineer @ NASA JPL
+ url: https://www.opencaesar.io/contributors/Aaron%20Levitt.html
+ image_url: https://www.opencaesar.io/assets/img/aaron.jpeg
diff --git a/docs/api-documentation/_category_.json b/docs/api-documentation/_category_.json
new file mode 100644
index 0000000..aa448d4
--- /dev/null
+++ b/docs/api-documentation/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "API Documentation",
+ "position": 2,
+ "link": {
+ "type": "generated-index",
+ "description": "API documentation for OML Vision."
+ }
+}
diff --git a/docs/api-documentation/config.md b/docs/api-documentation/config.md
new file mode 100644
index 0000000..8cff32b
--- /dev/null
+++ b/docs/api-documentation/config.md
@@ -0,0 +1,68 @@
+---
+sidebar_position: 2
+---
+
+# Config
+
+The config or configuration directory contains the configuration the following API endpoints for the in-memory [Fuseki](https://jena.apache.org/documentation/fuseki2/) RDF triplestore:
+
+- query
+- update
+
+
+An example of a config directory correctly formatted for OML Vision can be seen [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/config/sparqlConfig.json)
+
+## sparqlConfig.json
+
+:::info sparqlConfig.json
+
+Create a `src/vision/config/sparqlConfig.json` file (case-sensitive)
+
+:::
+
+The `src/vision/config/sparqlConfig.json` file is responsible for specifying the query and update API endpoints.
+
+It is formatted as a JSON data structure.
+
+
+An example of what this looks like is seen below with the source code found [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/config/sparqlConfig.json)
+
+```json
+{
+ "queryEndpoint": "http://localhost:3030/tutorial2/sparql",
+ "updateEndpoint": "http://localhost:3030/tutorial2/update"
+}
+```
+
+### queryEndpoint
+
+:::danger REQUIRED
+
+```typescript
+queryEndpoint: string
+```
+
+:::
+
+This string defines the API query endpoint of the in-memory RDF triplestore.
+
+#### Fuseki
+
+
+This endpoint can usually be found within the `.fuseki.ttl` file under the `sparql` service. An example of how to specify this endpoint can be found [here](https://github.com/pogi7/kepler16b-example/blob/main/.fuseki.ttl#L15)
+
+### updateEndpoint
+:::danger REQUIRED
+
+```typescript
+updateEndpoint: string
+```
+
+:::
+
+This string defines the API update endpoint of the in-memory RDF triplestore.
+
+#### Fuseki
+
+
+This endpoint can usually be found within the `.fuseki.ttl` file under the `update` service. An example of how to specify this endpoint can be found [here](https://github.com/pogi7/kepler16b-example/blob/main/.fuseki.ttl#L14)
\ No newline at end of file
diff --git a/docs/api-documentation/gradle.md b/docs/api-documentation/gradle.md
new file mode 100644
index 0000000..c5adde6
--- /dev/null
+++ b/docs/api-documentation/gradle.md
@@ -0,0 +1,75 @@
+---
+sidebar_position: 5
+---
+
+# Gradle
+
+OML models tend to use Gradle to package dependencies and tasks to manipulate and analyze the model.
+
+:::danger Gradle for Java VSCode Extension
+
+OML Vision requires the [Gradle for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-gradle) VSCode extension.
+
+Read more installation instructions [here](docs/intro#what-youll-need)
+
+:::
+
+## Build
+
+:::info build.gradle
+
+Create a `build.gradle` file (case-sensitive)
+
+:::
+
+In OML Vision, the `build.gradle` file is responsible for:
+
+- Defining tasks to run in OML Vision
+- Listens on the `build.gradle` file for any changes.
+
+Examples of correctly formatted `build.gradle` files for OML Vision are found here:
+
+- [Kepler16b build.gradle](https://github.com/pogi7/kepler16b-example/blob/main/build.gradle)
+- [Open Source Rover build.gradle](https://github.com/UTNAK/open-source-rover/blob/main/build.gradle)
+
+You can read more about `build.gradle` files [here](https://docs.gradle.org/current/userguide/build_file_basics.html)
+
+## Tasks
+
+A task in Gradle refers to some command or program that Gradle executes.
+
+Generally OML Vision only requires 5 tasks:
+
+- clean (Removes build folder)
+- build (Constructs OWL and OML files)
+- startFuseki (starts RDF triplestore)
+- owlLoad (Loads OWL data into RDF triplestore)
+- stopFuseki (stops RDF triplestore)
+
+### Vision Group
+
+OML Vision is asynchronously listening in the `build.gradle` for any changes to the tasks. OML Vision will display any task in the `vision` group in the sidebar.
+
+:::note REGISTERING NEW GRADLE TASKS
+
+New tasks will register once you deactivate then reactive OML Vision. You can do this by clicking the [File Explorer](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer) then clicking the OML Vision extension icon.
+
+:::
+
+**By default, OML Vision displays the `clean` and `build` tasks. Those tasks do not need to be within the `vision` Gradle group.**
+
+:::tip USER INTERFACE
+
+The `vision` gradle corresponds to the `Setup Tasks` section in OML Vision shown in the red boxes.
+
+![Gradle Tasks](./img/gradleTasks.png)
+
+:::
+
+### Running Tasks
+
+You may run tasks in OML Vision either
+
+- By clicking the `Run Task` button in the OML Vision extension under the `Setup Tasks` section
+- Running the task using the Gradle wrapper in any terminal.
+ - An example of this would be running `./gradlew clean`
\ No newline at end of file
diff --git a/docs/api-documentation/img/correctJavaVersion.png b/docs/api-documentation/img/correctJavaVersion.png
new file mode 100644
index 0000000..71d8366
Binary files /dev/null and b/docs/api-documentation/img/correctJavaVersion.png differ
diff --git a/docs/api-documentation/img/gradleTasks.png b/docs/api-documentation/img/gradleTasks.png
new file mode 100644
index 0000000..ac7e37a
Binary files /dev/null and b/docs/api-documentation/img/gradleTasks.png differ
diff --git a/docs/api-documentation/img/noRequiredDirectories.png b/docs/api-documentation/img/noRequiredDirectories.png
new file mode 100644
index 0000000..9ad33b5
Binary files /dev/null and b/docs/api-documentation/img/noRequiredDirectories.png differ
diff --git a/docs/api-documentation/img/portAlreadyUsed.png b/docs/api-documentation/img/portAlreadyUsed.png
new file mode 100644
index 0000000..47eb9d7
Binary files /dev/null and b/docs/api-documentation/img/portAlreadyUsed.png differ
diff --git a/docs/api-documentation/layouts/_category_.json b/docs/api-documentation/layouts/_category_.json
new file mode 100644
index 0000000..f1f67d4
--- /dev/null
+++ b/docs/api-documentation/layouts/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Layouts",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "API documentation for layouts within OML Vision."
+ }
+}
diff --git a/docs/api-documentation/layouts/diagrams.md b/docs/api-documentation/layouts/diagrams.md
new file mode 100644
index 0000000..5c097f4
--- /dev/null
+++ b/docs/api-documentation/layouts/diagrams.md
@@ -0,0 +1,303 @@
+---
+sidebar_position: 4
+---
+
+# Diagrams
+
+Diagrams are created using [React Flow](https://reactflow.dev/).
+
+:::info diagrams.json
+
+Create a `src/vision/layouts/diagrams.json` file (case-sensitive)
+
+:::
+
+The `src/vision/layouts/diagrams.json` file is responsible for:
+
+- Defining what OML Vision Diagrams can render
+ - Name of the Diagrams
+ - Name of the nodes for the Diagram
+ - Name of the edges for the Diagram
+ - Queries for the Diagram node content
+ - Queries for the Diagram edge content
+ - How to map Diagrams node queries to edge queries
+
+It is formatted as a JSON data structure.
+
+
+An example of what this looks like is seen below with the source code found [here](https://github.com/UTNAK/open-source-rover/blob/main/src/vision/layouts/diagramLayouts.json)
+
+```json
+{
+ "decompositions": {
+ "name": "Decomposition",
+ "queries": {
+ "decompositions": "component.sparql",
+ "edge": "component.sparql"
+ },
+ "rowMapping": {
+ "id": "decompositions",
+ "name": "System",
+ "labelFormat": "{c1_localname}",
+ "colorKey": "c1_localname",
+ "edgeMatchKey": "c1_localname"
+ },
+ "edges": [
+ {
+ "id": "edge",
+ "name": "Edge",
+ "labelFormat": "hasSubsystem",
+ "colorKey": "c2_localname",
+ "sourceKey": "c1_localname",
+ "targetKey": "c2_localname"
+ }
+ ]
+ },
+ "movingscenario": {
+ "name": "Scenario",
+ "queries": {
+ "movingscenario": "scenario_move.sparql",
+ "edge": "scenario_move.sparql"
+ },
+ "rowMapping": {
+ "id": "movingscenario",
+ "name": "Task",
+ "labelFormat": "{f2_id} \n {f2_cname}",
+ "colorKey": "f2_id",
+ "edgeMatchKey": "f2_id"
+ },
+ "edges": [
+ {
+ "id": "edge",
+ "name": "Edge",
+ "labelFormat": "invokes",
+ "colorKey": "f2_id",
+ "sourceKey": "f2_id",
+ "targetKey": "f3_id"
+ }
+ ]
+ }
+}
+```
+
+## Defining Diagram
+
+A Diagram must be properly defined in order to be rendered by OML Vision
+
+### Terminology
+OML Vision defines a node and edge as follows:
+
+- Node: A graphical element that contains information
+- Edge: A graphical element that connects information
+
+![Diagram Terminology](./img/diagramTerminology.png)
+
+### path
+:::danger REQUIRED
+
+```typescript
+path: string
+```
+
+:::
+
+This string defines the path of the Diagram.
+
+:::tip USER INTERFACE
+
+The name of the `path` is the same path that was defined in the `pages.json`.
+
+![Diagram Path](./img/diagramPath.png)
+
+:::
+
+### name
+:::note OPTIONAL
+
+```typescript
+name: string
+```
+
+:::
+
+
+This string gives a name to the Diagram in the `diagramLayouts.json` file.
+
+### queries
+:::danger REQUIRED
+
+```typescript
+queries: {}
+```
+
+:::
+
+This object contains the queries that will query the RDF Triplestore for the content that will populate in the Diagram.
+
+**Look at the sparql docs for more info found [here](/docs/api-documentation/sparql)**
+
+:::tip FUSEKI
+
+You can test queries by going to localhost:3030 which is created once data is loaded into the Fuseki DB. You can watch more info about testing queries with Fuseki by going [here](https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s)
+
+The AI & DS Channel (2021, February 18). SPARQL Query [Video]. YouTube. https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s
+
+:::
+
+### rowMapping
+:::danger REQUIRED
+
+```typescript
+rowMapping: {}
+```
+
+:::
+
+This object defines how the `queries` map to the `columnNames`
+
+#### id
+:::danger REQUIRED
+
+```typescript
+id: string
+```
+
+:::
+
+This string the `id` for the `rowMapping`.
+
+:::tip USER INTERFACE
+
+The `id` correspond to one of the `columnNames`.
+
+![Diagram Row Mapping Id](./img/diagramRowMappingId.png)
+
+:::
+
+#### name
+:::note OPTIONAL
+
+```typescript
+name: string
+```
+
+:::
+
+This string gives a name to the `rowMapping`.
+
+#### labelFormat
+:::danger REQUIRED
+
+```typescript
+labelFormat: string
+```
+
+:::
+
+This string contains the label of the row for the `rowMapping`.
+
+:::tip USER INTERFACE
+
+The `labelFormat` is rendered in the rows of the Diagram shown in the red boxes.
+
+**STRING INTERPOLATION**
+
+OML Vision supports string interpolation with the queries that were formatted. The format is `"{string}"`
+
+An example is found [here](https://github.com/UTNAK/open-source-rover/blob/main/src/vision/layouts/diagramLayouts.json#L11)
+
+![Diagram Column Names](./img/diagramRowMappingLabelFormat.png)
+
+:::
+
+#### colorKey
+:::danger REQUIRED
+
+```typescript
+colorKey: string
+```
+
+:::
+
+This string is the seed for a random color generator for the nodes rendered in the Diagram. Needed to generate legend.
+
+**STRING INTERPOLATION**
+
+OML Vision supports string interpolation with the queries that were formatted. The format is `"{string}"`
+
+#### edgeMatchKey
+:::danger REQUIRED
+
+```typescript
+edgeMatchKey: string
+```
+
+:::
+
+This string defines the edge for each node in the Diagram.
+
+**STRING INTERPOLATION**
+
+OML Vision supports string interpolation with the queries that were formatted. The format is `"{string}"`
+
+#### subRowMappings
+:::note OPTIONAL
+
+```typescript
+subRowMappings: {
+ id: string
+ name: string
+ labelFormat: string
+ colorKey: string
+ edgeMatchKey: string
+ }[]
+```
+
+:::
+
+This `subRowMappings` array of objects defines the `id`, `name`, `labelFormat`, `colorKey`, and `edgeMatchKey` for the subrows of the Diagram.
+
+**The `id`, `name`, `labelFormat`, `colorKey`, and `edgeMatchKey` have the same data structure as `rowMapping`**
+
+### edges
+:::danger REQUIRED
+
+```typescript
+edges: {
+ id: string
+ name: string
+ labelFormat: string
+ colorKey: string
+ sourceKey: string
+ targetKey: string
+ }[]
+```
+
+:::
+
+This `edges` array of objects defines the `id`, `name`, `labelFormat`, and `colorKey` for the edges of the Diagram.
+
+**The `id`, `name`, `labelFormat`, and `colorKey` have the same data structure as `rowMapping`**
+
+#### sourceKey
+:::danger REQUIRED
+
+```typescript
+sourceKey: string
+```
+
+:::
+
+This string defines the source node for the edge in the Diagram.
+
+
+#### targetKey
+:::danger REQUIRED
+
+```typescript
+targetKey: string
+```
+
+:::
+
+This string defines the target node for the edge in the Diagram.
diff --git a/docs/api-documentation/layouts/img/childPage.png b/docs/api-documentation/layouts/img/childPage.png
new file mode 100644
index 0000000..0af9da4
Binary files /dev/null and b/docs/api-documentation/layouts/img/childPage.png differ
diff --git a/docs/api-documentation/layouts/img/childrenPages.png b/docs/api-documentation/layouts/img/childrenPages.png
new file mode 100644
index 0000000..aa16114
Binary files /dev/null and b/docs/api-documentation/layouts/img/childrenPages.png differ
diff --git a/docs/api-documentation/layouts/img/diagramPath.png b/docs/api-documentation/layouts/img/diagramPath.png
new file mode 100644
index 0000000..804cf2a
Binary files /dev/null and b/docs/api-documentation/layouts/img/diagramPath.png differ
diff --git a/docs/api-documentation/layouts/img/diagramRowMappingId.png b/docs/api-documentation/layouts/img/diagramRowMappingId.png
new file mode 100644
index 0000000..611b0b8
Binary files /dev/null and b/docs/api-documentation/layouts/img/diagramRowMappingId.png differ
diff --git a/docs/api-documentation/layouts/img/diagramRowMappingLabelFormat.png b/docs/api-documentation/layouts/img/diagramRowMappingLabelFormat.png
new file mode 100644
index 0000000..8a82ab8
Binary files /dev/null and b/docs/api-documentation/layouts/img/diagramRowMappingLabelFormat.png differ
diff --git a/docs/api-documentation/layouts/img/diagramTerminology.png b/docs/api-documentation/layouts/img/diagramTerminology.png
new file mode 100644
index 0000000..d17c0f4
Binary files /dev/null and b/docs/api-documentation/layouts/img/diagramTerminology.png differ
diff --git a/docs/api-documentation/layouts/img/homePage.png b/docs/api-documentation/layouts/img/homePage.png
new file mode 100644
index 0000000..ee0b730
Binary files /dev/null and b/docs/api-documentation/layouts/img/homePage.png differ
diff --git a/docs/api-documentation/layouts/img/iconUrlChildPage.png b/docs/api-documentation/layouts/img/iconUrlChildPage.png
new file mode 100644
index 0000000..e60eb2a
Binary files /dev/null and b/docs/api-documentation/layouts/img/iconUrlChildPage.png differ
diff --git a/docs/api-documentation/layouts/img/pathHomePage.png b/docs/api-documentation/layouts/img/pathHomePage.png
new file mode 100644
index 0000000..b3fd6e9
Binary files /dev/null and b/docs/api-documentation/layouts/img/pathHomePage.png differ
diff --git a/docs/api-documentation/layouts/img/tableColumnNames.png b/docs/api-documentation/layouts/img/tableColumnNames.png
new file mode 100644
index 0000000..0c78842
Binary files /dev/null and b/docs/api-documentation/layouts/img/tableColumnNames.png differ
diff --git a/docs/api-documentation/layouts/img/tableCommands.png b/docs/api-documentation/layouts/img/tableCommands.png
new file mode 100644
index 0000000..537600a
Binary files /dev/null and b/docs/api-documentation/layouts/img/tableCommands.png differ
diff --git a/docs/api-documentation/layouts/img/tablePath.png b/docs/api-documentation/layouts/img/tablePath.png
new file mode 100644
index 0000000..74913dc
Binary files /dev/null and b/docs/api-documentation/layouts/img/tablePath.png differ
diff --git a/docs/api-documentation/layouts/img/tableRowMappingId.png b/docs/api-documentation/layouts/img/tableRowMappingId.png
new file mode 100644
index 0000000..f811dcf
Binary files /dev/null and b/docs/api-documentation/layouts/img/tableRowMappingId.png differ
diff --git a/docs/api-documentation/layouts/img/tableRowMappingLabelFormat.png b/docs/api-documentation/layouts/img/tableRowMappingLabelFormat.png
new file mode 100644
index 0000000..66ffc50
Binary files /dev/null and b/docs/api-documentation/layouts/img/tableRowMappingLabelFormat.png differ
diff --git a/docs/api-documentation/layouts/img/tableStringInterpolation.png b/docs/api-documentation/layouts/img/tableStringInterpolation.png
new file mode 100644
index 0000000..ccadfc5
Binary files /dev/null and b/docs/api-documentation/layouts/img/tableStringInterpolation.png differ
diff --git a/docs/api-documentation/layouts/img/titleHomePage.png b/docs/api-documentation/layouts/img/titleHomePage.png
new file mode 100644
index 0000000..1f13f78
Binary files /dev/null and b/docs/api-documentation/layouts/img/titleHomePage.png differ
diff --git a/docs/api-documentation/layouts/img/treeCommands.png b/docs/api-documentation/layouts/img/treeCommands.png
new file mode 100644
index 0000000..e103e8b
Binary files /dev/null and b/docs/api-documentation/layouts/img/treeCommands.png differ
diff --git a/docs/api-documentation/layouts/img/treeIconHomePage.png b/docs/api-documentation/layouts/img/treeIconHomePage.png
new file mode 100644
index 0000000..b38ceec
Binary files /dev/null and b/docs/api-documentation/layouts/img/treeIconHomePage.png differ
diff --git a/docs/api-documentation/layouts/img/treePath.png b/docs/api-documentation/layouts/img/treePath.png
new file mode 100644
index 0000000..294ad9b
Binary files /dev/null and b/docs/api-documentation/layouts/img/treePath.png differ
diff --git a/docs/api-documentation/layouts/img/treeRowMappingId.png b/docs/api-documentation/layouts/img/treeRowMappingId.png
new file mode 100644
index 0000000..a1fc9dd
Binary files /dev/null and b/docs/api-documentation/layouts/img/treeRowMappingId.png differ
diff --git a/docs/api-documentation/layouts/img/treeRowMappingLabelFormat.png b/docs/api-documentation/layouts/img/treeRowMappingLabelFormat.png
new file mode 100644
index 0000000..bab5b78
Binary files /dev/null and b/docs/api-documentation/layouts/img/treeRowMappingLabelFormat.png differ
diff --git a/docs/api-documentation/layouts/pages.md b/docs/api-documentation/layouts/pages.md
new file mode 100644
index 0000000..7f018fb
--- /dev/null
+++ b/docs/api-documentation/layouts/pages.md
@@ -0,0 +1,323 @@
+---
+sidebar_position: 1
+---
+
+# Pages
+
+:::info pages.json
+
+Create a `src/vision/layouts/pages.json` file (case-sensitive)
+
+:::
+
+The `src/vision/layouts/pages.json` file is responsible for:
+
+- Defining what OML Vision can render
+ - Home Page
+ - Titles
+ - Icons
+ - Sidebar
+ - Titles
+ - Icons
+ - Child Pages
+ - Titles
+ - Table, Tree, or Diagram
+ - Icons
+- Defining the path to the content that OML Vision renders
+
+It is formatted as a JSON data structure.
+
+
+An example of what this looks like is seen below with the source code found [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/layouts/pages.json)
+
+```json
+[
+ { "title": "Home", "path": "/", "treeIcon": "home" },
+ {
+ "title": "Kepler16b",
+ "treeIcon": "server",
+ "iconUrl": "https://nasa-jpl.github.io/stellar/icons/satellite.svg",
+ "children": [
+ {
+ "title": "Objectives",
+ "treeIcon": "window",
+ "path": "objectives"
+ },
+ {
+ "title": "Missions",
+ "treeIcon": "graph-scatter",
+ "path": "missions",
+ "isDiagram": true
+ },
+ {
+ "title": "Components",
+ "treeIcon": "list-tree",
+ "path": "components",
+ "isTree": true
+ },
+ {
+ "title": "Connections",
+ "treeIcon": "window",
+ "path": "connections"
+ },
+ {
+ "title": "Requirements",
+ "treeIcon": "list-tree",
+ "path": "requirements",
+ "isTree": true
+ }
+ ]
+ }
+]
+```
+
+## Home Page
+
+The home page acts as an entry point for users to navigate through the pages that OML Vision renders.
+
+![Home Page](./img/homePage.png)
+
+### title
+:::danger REQUIRED
+
+```typescript
+title: string
+```
+
+:::
+
+
+This string defines the title of the home page. A good name for the home page is "Home" or "Frontpage"
+
+:::tip USER INTERFACE
+
+The name of the `title` is rendered in the sidebar for the OML Vision extension shown in the red boxes.
+
+![Title Home Page](./img/titleHomePage.png)
+
+:::
+
+### path
+:::danger REQUIRED
+
+```typescript
+path: string
+```
+
+:::
+
+
+This string defines the path of the page.
+
+**For the `Home Page` the path must be `/`**
+
+:::tip USER INTERFACE
+
+The name of the `path` is rendered in the sidebar when you hover and hold for 2 seconds over the `Home Page` in the OML Vision extension shown in the red boxes.
+
+![Path Home Page](./img/pathHomePage.png)
+
+:::
+
+### treeIcon
+:::note OPTIONAL
+
+```typescript
+treeIcon: string
+```
+
+:::
+
+
+This string defines the icon to be rendered in the sidebar next to the `Title` of the page.
+
+**A full list of available icons can be seen [here](https://code.visualstudio.com/api/references/icons-in-labels#icon-listing). Use the `default codicon ID` as the value of the `treeIcon`**
+
+:::tip USER INTERFACE
+
+The `Home Page` icon of the `treeIcon` is rendered in the sidebar for the OML Vision extension shown in the red boxes.
+
+![Path Home Page](./img/treeIconHomePage.png)
+
+:::
+
+## Child Pages
+
+Child pages are pages that are grouped with other similar pages. The paths to these pages are rendered in the sidebar and in the `Home Page` shown in the red boxes.
+
+**OML Vision supports more than 1 child page.**
+
+![Child Page](./img/childPage.png)
+
+### title
+:::danger REQUIRED
+
+```typescript
+title: string
+```
+
+:::
+
+
+This string defines the title of the child page.
+
+:::tip USER INTERFACE
+
+The name of the `title` is rendered in the sidebar and in the `Home Page`.
+
+:::
+
+### treeIcon
+:::note OPTIONAL
+
+```typescript
+treeIcon: string
+```
+
+:::
+
+
+This string defines the icon to be rendered in the sidebar next to the `Title` of the page.
+
+**A full list of available icons can be seen [here](https://code.visualstudio.com/api/references/icons-in-labels#icon-listing). Use the `default codicon ID` as the value of the `treeIcon`**
+
+:::tip USER INTERFACE
+
+The `Child Page` icon of the `treeIcon` is rendered in the sidebar for the OML Vision extension.
+
+:::
+
+### iconUrl
+:::danger REQUIRED
+
+```typescript
+iconUrl: string
+```
+
+:::
+
+
+This string defines the path of the icon that is rendered in the home page.
+
+**Supported image file formats are .svg, .png, or .jpg**
+
+:::tip USER INTERFACE
+
+The `Child Page` icon of the `iconUrl` is rendered in the `Home Page` in the OML Vision extension shown in the red boxes.
+
+![Icon URL Child Page](./img/iconUrlChildPage.png)
+
+:::
+
+### children
+:::danger REQUIRED
+
+```typescript
+children: {
+ title: string;
+ path: string;
+ treeIcon: string;
+ isTree: boolean;
+ isDiagram: boolean;
+ }[];
+```
+
+:::
+
+
+This `children` array of objects defines the `title`, `path`, and `treeIcon` of the `Child Page`.
+
+**You can more than one `Child Page` in the `children` array.**
+
+**By default all child pages are rendered as tables unless specified with the isTree or isDiagram booleans.**
+
+:::tip USER INTERFACE
+
+The `Child Pages` are rendered in the sidebar and in the `Home Page` of the OML Vision extension shown in the red boxes.
+
+![Children Pages](./img/childrenPages.png)
+
+:::
+
+#### title
+:::danger REQUIRED
+
+```typescript
+title: string
+```
+
+:::
+
+
+This string defines the title of the child page.
+
+:::tip USER INTERFACE
+
+The name of the `title` of the `Child Page` is rendered in the sidebar and in the `Home Page` of the OML Vision extension.
+
+:::
+
+#### path
+:::danger REQUIRED
+
+```typescript
+path: string
+```
+
+:::
+
+
+This string defines the path of the `Child Page`.
+
+**Remember this string as it will be needed for the layouts of the tables, trees, and diagrams**
+
+:::tip USER INTERFACE
+
+The name of the `path` is rendered in the sidebar when you hover and hold for 2 seconds over the `Child Page` in the OML Vision extension.
+
+:::
+
+#### treeIcon
+:::note OPTIONAL
+
+```typescript
+treeIcon: string
+```
+
+:::
+
+
+This string defines the icon to be rendered in the sidebar next to the `Title` of the page.
+
+**A full list of available icons can be seen [here](https://code.visualstudio.com/api/references/icons-in-labels#icon-listing). Use the `default codicon ID` as the value of the `treeIcon`**
+
+:::tip USER INTERFACE
+
+The `Child Page` icon of the `treeIcon` is rendered in the sidebar for the OML Vision extension.
+
+:::
+
+#### isTree
+:::note OPTIONAL
+
+```typescript
+isTree: boolean
+```
+
+:::
+
+
+This bool specifies whether or not the `Child Page` will be a tree. Set `isTree` to `true` to turn the `Child Page` into a tree.
+
+
+#### isDiagram
+:::note OPTIONAL
+
+```typescript
+isDiagram: boolean
+```
+
+:::
+
+
+This bool specifies whether or not the `Child Page` will be a diagram. Set `isDiagram` to `true` to turn the `Child Page` into a diagram.
\ No newline at end of file
diff --git a/docs/api-documentation/layouts/tables.md b/docs/api-documentation/layouts/tables.md
new file mode 100644
index 0000000..0b9a634
--- /dev/null
+++ b/docs/api-documentation/layouts/tables.md
@@ -0,0 +1,273 @@
+---
+sidebar_position: 2
+---
+
+# Tables
+
+Tables are created using [tanstack table](https://tanstack.com/table/v8).
+
+:::info tables.json
+
+Create a `src/vision/layouts/tables.json` file (case-sensitive)
+
+:::
+
+The `src/vision/layouts/tables.json` file is responsible for:
+
+- Defining what OML Vision Tables can render
+ - Name of the Table
+ - Commands that can be executed from the Table
+ - Name of the columns for the Table
+ - Queries that the Table's content needs
+ - How to map Table queries to columns
+
+It is formatted as a JSON data structure.
+
+
+An example of what this looks like is seen below with the source code found [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/layouts/tableLayouts.json)
+
+```json
+{
+ "objectives": {
+ "name": "Objectives",
+ "diagrams": {
+ "all-rows": "objectives-diagram"
+ },
+ "columnNames": {
+ "o1_id": "Objective 1 ID",
+ "o1_name": "Objective 1 Name",
+ "o2_id": "Objective 2 ID",
+ "o2_name": "Objective 2 Name"
+ },
+ "queries": {
+ "o1_id": "objectives.sparql",
+ "o1_name": "objectives.sparql",
+ "o2_id": "objectives.sparql",
+ "o2_name": "objectives.sparql"
+ },
+ "rowMapping": {
+ "id": "o1_id",
+ "name": "Objectives",
+ "labelFormat": "Objective"
+ }
+ },
+ "connections": {
+ "name": "Connections",
+ "diagrams": {
+ "all-rows": "connections-diagram"
+ },
+ "columnNames": {
+ "c1_name": "Connection 1 Name",
+ "c2_name": "Connection 2 Name"
+ },
+ "queries": {
+ "c1_name": "connections.sparql",
+ "c2_name": "connections.sparql"
+ },
+ "rowMapping": {
+ "id": "c1_name",
+ "name": "Connections",
+ "labelFormat": "Connection"
+ }
+ }
+}
+```
+
+## Defining Table
+
+A table must be properly defined in order to be rendered by OML Vision
+
+### path
+:::danger REQUIRED
+
+```typescript
+path: string
+```
+
+:::
+
+
+This string defines the path of the Table.
+
+:::tip USER INTERFACE
+
+The name of the `path` is the same path that was defined in the `pages.json`.
+
+![Table Path](./img/tablePath.png)
+
+:::
+
+### name
+:::note OPTIONAL
+
+```typescript
+name: string
+```
+
+:::
+
+
+This string gives a name to the table in the `tableLayouts.json` file.
+
+
+### diagrams
+:::note OPTIONAL
+
+```typescript
+diagrams: {
+ all-rows: string
+ }
+```
+
+:::
+
+
+The diagrams object defines the commands that the Table is able to execute.
+
+:::tip USER INTERFACE
+
+The `diagrams` correspond to the commands that appear when a user right clicks a row in the Table.
+
+![Table Commands](./img/tableCommands.png)
+
+:::
+
+#### all-rows
+:::danger REQUIRED
+
+```typescript
+all-rows: string
+```
+
+:::
+
+
+This string defines that all rows have the commands defined available for them to execute. The name of the string is arbitrary, but a good name for `all-rows` is "all-rows".
+
+### columnNames
+:::danger REQUIRED
+
+```typescript
+columnNames: {}
+```
+
+:::
+
+
+This object contains the columns that will render on the Table.
+
+:::tip USER INTERFACE
+
+The `columnNames` are rendered in the headers of the Table shown in the red boxes.
+
+![Table Column Names](./img/tableColumnNames.png)
+
+:::
+
+### queries
+:::danger REQUIRED
+
+```typescript
+queries: {}
+```
+
+:::
+
+This object contains the queries that will query the RDF Triplestore for the content that will populate in the Table.
+
+**Look at the sparql docs for more info found [here](/docs/api-documentation/sparql)**
+
+:::tip FUSEKI
+
+You can test queries by going to localhost:3030 which is created once data is loaded into the Fuseki DB. You can watch more info about testing queries with Fuseki by going [here](https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s)
+
+The AI & DS Channel (2021, February 18). SPARQL Query [Video]. YouTube. https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s
+
+:::
+
+### rowMapping
+:::danger REQUIRED
+
+```typescript
+rowMapping: {}
+```
+
+:::
+
+This object defines how the `queries` map to the `columnNames`
+
+#### id
+:::danger REQUIRED
+
+```typescript
+id: string
+```
+
+:::
+
+This string the `id` for the `rowMapping`.
+
+:::tip USER INTERFACE
+
+The `id` correspond to one of the `columnNames`.
+
+![Table Row Mapping Id](./img/tableRowMappingId.png)
+
+:::
+
+#### name
+:::note OPTIONAL
+
+```typescript
+name: string
+```
+
+:::
+
+This string gives a name to the `rowMapping`.
+
+#### labelFormat
+:::danger REQUIRED
+
+```typescript
+labelFormat: string
+```
+
+:::
+
+This string contains the label of the row for the `rowMapping`.
+
+:::tip USER INTERFACE
+
+The `labelFormat` is rendered in the rows of the Table shown in the red boxes.
+
+![Table Column Names](./img/tableRowMappingLabelFormat.png)
+
+:::
+
+:::tip STRING INTERPOLATION
+
+OML Vision supports string interpolation with the queries that were formatted. The format is `"{string}"`
+
+An example is found [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/layouts/tableLayouts.json#L25)
+
+![Table String Interpolation](./img/tableStringInterpolation.png)
+
+:::
+
+#### subRowMappings
+:::note OPTIONAL
+
+```typescript
+subRowMappings: {
+ id: string
+ name: string
+ labelFormat: string
+ }[]
+```
+
+:::
+
+This `subRowMappings` array of objects defines the `id`, `name`, and `labelFormat` for the subrows of the Table.
+
+**The `id`, `name`, and `labelFormat` have the same data structure as `rowMapping`**
\ No newline at end of file
diff --git a/docs/api-documentation/layouts/trees.md b/docs/api-documentation/layouts/trees.md
new file mode 100644
index 0000000..904705d
--- /dev/null
+++ b/docs/api-documentation/layouts/trees.md
@@ -0,0 +1,249 @@
+---
+sidebar_position: 3
+---
+
+# Trees
+
+Trees are created using [React Arborist](https://github.com/brimdata/react-arborist).
+
+:::info trees.json
+
+Create a `src/vision/layouts/trees.json` file (case-sensitive)
+
+:::
+
+The `src/vision/layouts/trees.json` file is responsible for:
+
+- Defining what OML Vision Trees can render
+ - Name of the Trees
+ - Commands that can be executed from the Trees
+ - Name of the columns for the Trees
+ - Queries that the Trees's content needs
+ - How to map Tree queries to columns
+
+It is formatted as a JSON data structure.
+
+
+An example of what this looks like is seen below with the source code found [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/layouts/treeLayouts.json)
+
+```json
+{
+ "requirements": {
+ "name": "Requirements Diagram",
+ "diagrams": {
+ "all-rows": "requirements-diagram"
+ },
+ "queries": {
+ "requirements": "requirements.sparql"
+ },
+ "rowMapping": {
+ "id": "requirements",
+ "name": "Requirements",
+ "labelFormat": "{r_id}",
+ "subRowMappings": [
+ {
+ "id": "requirements",
+ "name": "Components",
+ "labelFormat": "C Name: {c_name}"
+ }
+ ]
+ }
+ },
+ "components": {
+ "name": "Components",
+ "diagrams": {
+ "all-rows": "components-diagram"
+ },
+ "queries": {
+ "components": "components.sparql"
+ },
+ "rowMapping": {
+ "id": "components",
+ "name": "Components",
+ "labelFormat": "{c1_id} {c1_name}",
+ "subRowMappings": [
+ {
+ "id": "components",
+ "name": "Masses",
+ "labelFormat": "{c1_mass}"
+ }
+ ]
+ }
+ }
+}
+```
+
+## Defining Tree
+
+A tree must be properly defined in order to be rendered by OML Vision
+
+### path
+:::danger REQUIRED
+
+```typescript
+path: string
+```
+
+:::
+
+
+This string defines the path of the Tree.
+
+:::tip USER INTERFACE
+
+The name of the `path` is the same path that was defined in the `pages.json`.
+
+![Tree Path](./img/treePath.png)
+
+:::
+
+### name
+:::note OPTIONAL
+
+```typescript
+name: string
+```
+
+:::
+
+
+This string gives a name to the Tree in the `treeLayouts.json` file.
+
+
+### diagrams
+:::note OPTIONAL
+
+```typescript
+diagrams: {
+ all-rows: string
+ }
+```
+
+:::
+
+
+The diagrams object defines the commands that the Tree is able to execute.
+
+:::tip USER INTERFACE
+
+The `diagrams` correspond to the commands that appear when a user right clicks a row in the Tree.
+
+![Tree Commands](./img/treeCommands.png)
+
+:::
+
+#### all-rows
+:::danger REQUIRED
+
+```typescript
+all-rows: string
+```
+
+:::
+
+
+This string defines that all rows have the commands defined available for them to execute. The name of the string is arbitrary, but a good name for `all-rows` is "all-rows".
+
+### queries
+:::danger REQUIRED
+
+```typescript
+queries: {}
+```
+
+:::
+
+This object contains the queries that will query the RDF Triplestore for the content that will populate in the Tree.
+
+**Look at the sparql docs for more info found [here](/docs/api-documentation/sparql)**
+
+:::tip FUSEKI
+
+You can test queries by going to localhost:3030 which is created once data is loaded into the Fuseki DB. You can watch more info about testing queries with Fuseki by going [here](https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s)
+
+The AI & DS Channel (2021, February 18). SPARQL Query [Video]. YouTube. https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s
+
+:::
+
+### rowMapping
+:::danger REQUIRED
+
+```typescript
+rowMapping: {}
+```
+
+:::
+
+This object defines how the `queries` map to the `columnNames`
+
+#### id
+:::danger REQUIRED
+
+```typescript
+id: string
+```
+
+:::
+
+This string the `id` for the `rowMapping`.
+
+:::tip USER INTERFACE
+
+The `id` correspond to one of the `columnNames`.
+
+![Tree Row Mapping Id](./img/treeRowMappingId.png)
+
+:::
+
+#### name
+:::note OPTIONAL
+
+```typescript
+name: string
+```
+
+:::
+
+This string gives a name to the `rowMapping`.
+
+#### labelFormat
+:::danger REQUIRED
+
+```typescript
+labelFormat: string
+```
+
+:::
+
+This string contains the label of the row for the `rowMapping`.
+
+:::tip USER INTERFACE
+
+The `labelFormat` is rendered in the rows of the Tree shown in the red boxes.
+
+**STRING INTERPOLATION**
+
+OML Vision supports string interpolation with the queries that were formatted. The format is `"{string}"`
+
+An example is found [here](https://github.com/pogi7/kepler16b-example/blob/main/src/vision/layouts/treeLayouts.json#L18)
+
+![Tree Column Names](./img/treeRowMappingLabelFormat.png)
+
+:::
+
+#### subRowMappings
+:::note OPTIONAL
+
+```typescript
+subRowMappings: {
+ id: string
+ name: string
+ labelFormat: string
+ }[]
+```
+
+:::
+
+This `subRowMappings` array of objects defines the `id`, `name`, and `labelFormat` for the subrows of the Tree.
+
+**The `id`, `name`, and `labelFormat` have the same data structure as `rowMapping`**
\ No newline at end of file
diff --git a/docs/api-documentation/required-directories.md b/docs/api-documentation/required-directories.md
new file mode 100644
index 0000000..e9a467e
--- /dev/null
+++ b/docs/api-documentation/required-directories.md
@@ -0,0 +1,42 @@
+---
+sidebar_position: 1
+---
+
+# Required Directories
+
+## Config
+
+Create a `src/vision/config` directory
+
+It contains the configuration for the update and query API endpoint for the in-memory [Fuseki](https://jena.apache.org/documentation/fuseki2/) RDF triplestore.
+
+Detailed information about the config directory can be found [here](/docs/api-documentation/config)
+
+## Layouts
+
+Create a `src/vision/layouts` directory
+
+It contains the specification needed for OML Vision to format the different views (i.e. Table, Tree, Diagram, etc.) that are rendered by the extension.
+
+Detailed information about the layouts directory can be found [here](/docs/category/layouts)
+
+## Sparql
+
+Create a `src/vision/sparql` directory
+
+It contains the definitions for the updates and queries that will be sent to the in-memory RDF triplestore.
+
+Detailed information about the config directory can be found [here](/docs/api-documentation/sparql)
+
+:::danger Required Directories
+
+The following directories are required for OML Vision to work properly.
+
+
+- `src/vision/config`
+- `src/vision/layouts`
+- `src/vision/sparql`
+
+An error like this will occur without those directories
+![No Required Directories](./img/noRequiredDirectories.png)
+:::
diff --git a/docs/api-documentation/sparql.md b/docs/api-documentation/sparql.md
new file mode 100644
index 0000000..5d07606
--- /dev/null
+++ b/docs/api-documentation/sparql.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 4
+---
+
+# Sparql
+
+SPARQL is the main query language that is used to query the RDF triplestore.
+
+Examples of correctly formatted `sparql` directory for OML Vision are found here:
+
+- [Kepler16b sparql directory](https://github.com/pogi7/kepler16b-example/tree/main/src/vision/sparql)
+- [Open Source Rover sparql directory](https://github.com/UTNAK/open-source-rover/tree/main/src/vision/sparql)
+
+You can read more about SPARQL [here](https://www.ontotext.com/knowledgehub/fundamentals/what-is-sparql/)
+
+## Formatting Query
+
+There are several ways to correctly format a SPARQL query.
+
+Once the SPARQL query is correctly formatted create a file for the query and place it in the `src/vision/sparql` directory.
+
+### Fuseki Web User Interface
+
+Fuseki's RDF triplestore has a convenient way to format queries using their web user interface.
+
+:::tip FUSEKI
+
+You can test queries by going to localhost:3030 which is created once data is loaded into the Fuseki DB. You can watch more info about testing queries with Fuseki by going [here](https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s)
+
+The AI & DS Channel (2021, February 18). SPARQL Query [Video]. YouTube. https://www.youtube.com/watch?v=w_pJ3XiBWeM&t=621s
+
+:::
+
+### SPARQL Notebooks
+
+If you feel comfortable working with notebooks you can use SPARQL Notebooks to format queries. You can read more about SPARQL notebooks [here](https://marketplace.visualstudio.com/items?itemName=Zazuko.sparql-notebook)
+
diff --git a/docs/api-documentation/troubleshooting.md b/docs/api-documentation/troubleshooting.md
new file mode 100644
index 0000000..907b610
--- /dev/null
+++ b/docs/api-documentation/troubleshooting.md
@@ -0,0 +1,56 @@
+---
+sidebar_position: 6
+---
+
+# Troubleshooting
+
+Feel free to contact the OML Vision contributors for troubleshooting information if this guide does not suffice.
+
+[Contact Us](https://www.opencaesar.io/contributors/)
+
+:::tip FUESKI LOGS
+
+If using Fuseki for the RDF Triplestore, logs are usually created in the `.fuseki/fuseki.log` directory.
+
+:::
+
+## Incorrect Java Version
+
+Some OML models may specify a specific version of Java. For example, the Kepler16b OML Model only supports Java 17 or higher.
+
+To fix this update Java to the correct version.
+
+Helpful guide for updating Java version for Windows and macOS [here](https://www.baeldung.com/java-home-on-windows-mac-os-x-linux)
+
+:::tip USER INTERFACE
+
+Updating the Java version on macOS within VSCode may look like this.
+
+![Correct Java Version](./img/correctJavaVersion.png)
+
+:::
+
+## Fuseki RDF Triplestore port already in use
+
+By default, the Fuseki RDF triplestore uses port `3030`. If this port is already in use, you will need to kill it in order for data to be loaded into the triplestore.
+
+:::tip USER INTERFACE
+
+Killing the `3030` port using macOS within VSCode may look like this.
+
+![Kill Port in Use](./img/portAlreadyUsed.png)
+
+:::
+
+### Windows
+
+**Use port 3030**
+
+Follow this guide to kill a port on a Windows found [here](https://sentry.io/answers/kill-process-using-port-in-windows/)
+
+### macOS
+
+**Use port 3030**
+
+Follow this guide to kill a port on a macOS found [here](https://stackoverflow.com/questions/3855127/find-and-kill-process-locking-port-3000-on-mac)
+
diff --git a/docs/img/activateExtension.png b/docs/img/activateExtension.png
new file mode 100644
index 0000000..8231bb6
Binary files /dev/null and b/docs/img/activateExtension.png differ
diff --git a/docs/img/entryPoint.png b/docs/img/entryPoint.png
new file mode 100644
index 0000000..b375509
Binary files /dev/null and b/docs/img/entryPoint.png differ
diff --git a/docs/img/objectivesTable.png b/docs/img/objectivesTable.png
new file mode 100644
index 0000000..e7997a2
Binary files /dev/null and b/docs/img/objectivesTable.png differ
diff --git a/docs/img/unopenedWorkspace.png b/docs/img/unopenedWorkspace.png
new file mode 100644
index 0000000..7f95437
Binary files /dev/null and b/docs/img/unopenedWorkspace.png differ
diff --git a/docs/intro.md b/docs/intro.md
index 45e8604..bc767fb 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -2,46 +2,142 @@
sidebar_position: 1
---
-# Tutorial Intro
+# Get Started
-Let's discover **Docusaurus in less than 5 minutes**.
+Let's discover **OML Vision in less than 5 minutes**.
## Getting Started
-Get started by **creating a new site**.
+### VSCode Terminology (Optional)
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+:::tip VSCode Terminology
-### What you'll need
+While not required, it is recommended to read the documentation on VSCode terminology as it will be referenced heavily. Read more [here](https://code.visualstudio.com/docs/getstarted/userinterface)
+
+:::
+
+### Install OML Vision
+
+#### VSCode Marketplace (Automatic Installation)
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
- - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+1. Go to VSCode Marketplace and install the extension from there.
-## Generate a new site
+#### VSIX File (Manual Installation)
-Generate a new Docusaurus site using the **classic template**.
+1. Go to latest release of [OML Vision](https://github.com/opencaesar/oml-vision/releases/latest)
+2. Download the VSIX file
+3. Install the OML Vision extension using the downloaded VSIX file. Helpful guide [here](https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-vsix)
-The classic template will automatically be added to your project after you run the command:
+### What you'll need
+#### Windows
+1. Install scoop https://scoop.sh/#/
+2. Use scoop to install `git`, `nodejs`, `nvm`, `yarn`, `java17` and `visual studio code` if not already installed.
+```bash
+scoop bucket add main
+scoop bucket add extras
+scoop bucket add java
+scoop install main/git
+scoop install main/nodejs
+scoop install main/nvm
+scoop install main/yarn
+scoop install java/openjdk17
+scoop install extras/vscode
+```
+3. The version of VSCode must be at `1.78.2` or newer.
+4. Install the following VSCode extensions if not already installed
```bash
-npm init docusaurus@latest my-website classic
+code --install-extension vscjava.vscode-java-pack
+code --install-extension vscjava.vscode-gradle
```
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+#### macOS
+1. Install homebrew https://brew.sh
+2. Use scoop to install `git`, `nodejs`, `nvm`, `yarn` and `visual studio code` if not already installed.
+```bash
+brew install git
+brew install nodejs
+brew install nvm
+brew install yarn
+brew install openjdk@17
+brew install --cask visual-studio-code
+```
+3. The version of VSCode must be at `1.78.2` or newer.
+4. Install the following VSCode extensions
+```bash
+code --install-extension vscjava.vscode-java-pack
+code --install-extension vscjava.vscode-gradle
+```
+
+## Load OML Model Data
+
+OML Vision is designed to work with OML (Ontological Modeling Language) models.
+
+### Start from Scratch
+
+Tutorials on how to create an OML model from scratch can be found [here](https://www.opencaesar.io/oml-tutorials/)
-The command also installs all necessary dependencies you need to run Docusaurus.
+:::danger No OML Vision viewpoints defined in above tutorial
+OML Vision works with viewpoints which will be covered in `Layouts` found [here](/docs/category/layouts)
+:::
-## Start your site
+### Use existing OML model
-Run the development server:
+If you want to see the capabilities of OML Vision without creating your own OML model you may use one of the following OML models:
+
+- [Kepler16b](https://github.com/pogi7/kepler16b-example/tree/main): A hypothetical spacecraft that will explore the [Kepler16b exoplanet](https://en.wikipedia.org/wiki/Kepler-16b)
+- [Open Source Rover](https://github.com/UTNAK/open-source-rover/tree/main): A descriptive model of the [JPL Open Source Rover](https://github.com/nasa-jpl/open-source-rover/tree/master)
+
+1. Click the eye icon in the sidebar which will activate the OML Vision extension
+2. Your screen should look like this
+![Unopened Workspace](./img/unopenedWorkspace.png)
+
+1. Click `Clone OML Model` and enter in this URL https://github.com/pogi7/kepler16b-example.git
+
+
+:::tip Command Line Interface
+
+You can also run this command from the command line using
```bash
-cd my-website
-npm run start
+git clone https://github.com/pogi7/kepler16b-example.git
+```
+:::
+
+4. Open the kepler16b-example OML model in VSCode
+
+### Start OML Vision
+
+1. Your screen should look like this
+![Entry Point](./img/entryPoint.png)
+2. Click the eye icon in the sidebar which will activate the OML Vision extension
+3. Your screen should look like this
+![Activate Extension](./img/activateExtension.png)
+
+4. Data must be loaded into the in-memory RDF triplestore for OML Vision to render views
+5. Click `Run clean` (This will clear the cache i.e.delete the build folder)
+
+:::tip Command Line Interface
+
+You can also run this command from the command line using
+```java
+./gradlew clean
```
+Look in the [build.gradle](https://github.com/pogi7/kepler16b-example/blob/main/build.gradle) file for a list of commands
+:::
+
+6. Click `Run owlLoad` (This will load data into the in-memory RDF triplestore)
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+:::tip Command Line Interface
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+You can also run this command from the command line using
+```java
+./gradlew owlLoad
+```
+Look in the [build.gradle](https://github.com/pogi7/kepler16b-example/blob/main/build.gradle) file for a list of commands
+:::
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+7. Click `Objectives`
+8. Your screen should look like this
+![Objectives Table](./img/objectivesTable.png)
\ No newline at end of file
diff --git a/docs/tutorial-basics/_category_.json b/docs/tutorial-basics/_category_.json
deleted file mode 100644
index 2e6db55..0000000
--- a/docs/tutorial-basics/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Tutorial - Basics",
- "position": 2,
- "link": {
- "type": "generated-index",
- "description": "5 minutes to learn the most important Docusaurus concepts."
- }
-}
diff --git a/docs/tutorial-basics/congratulations.md b/docs/tutorial-basics/congratulations.md
deleted file mode 100644
index 04771a0..0000000
--- a/docs/tutorial-basics/congratulations.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-sidebar_position: 6
----
-
-# Congratulations!
-
-You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
-
-Docusaurus has **much more to offer**!
-
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
-
-Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
-
-## What's next?
-
-- Read the [official documentation](https://docusaurus.io/)
-- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
-- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
-- Add a [search bar](https://docusaurus.io/docs/search)
-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
diff --git a/docs/tutorial-basics/create-a-blog-post.md b/docs/tutorial-basics/create-a-blog-post.md
deleted file mode 100644
index ea472bb..0000000
--- a/docs/tutorial-basics/create-a-blog-post.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-sidebar_position: 3
----
-
-# Create a Blog Post
-
-Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
-
-## Create your first Post
-
-Create a file at `blog/2021-02-28-greetings.md`:
-
-```md title="blog/2021-02-28-greetings.md"
----
-slug: greetings
-title: Greetings!
-authors:
- - name: Joel Marcey
- title: Co-creator of Docusaurus 1
- url: https://github.com/JoelMarcey
- image_url: https://github.com/JoelMarcey.png
- - name: Sébastien Lorber
- title: Docusaurus maintainer
- url: https://sebastienlorber.com
- image_url: https://github.com/slorber.png
-tags: [greetings]
----
-
-Congratulations, you have made your first post!
-
-Feel free to play around and edit this post as much you like.
-```
-
-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
diff --git a/docs/tutorial-basics/create-a-document.md b/docs/tutorial-basics/create-a-document.md
deleted file mode 100644
index c22fe29..0000000
--- a/docs/tutorial-basics/create-a-document.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-sidebar_position: 2
----
-
-# Create a Document
-
-Documents are **groups of pages** connected through:
-
-- a **sidebar**
-- **previous/next navigation**
-- **versioning**
-
-## Create your first Doc
-
-Create a Markdown file at `docs/hello.md`:
-
-```md title="docs/hello.md"
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
-
-## Configure the Sidebar
-
-Docusaurus automatically **creates a sidebar** from the `docs` folder.
-
-Add metadata to customize the sidebar label and position:
-
-```md title="docs/hello.md" {1-4}
----
-sidebar_label: 'Hi!'
-sidebar_position: 3
----
-
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-It is also possible to create your sidebar explicitly in `sidebars.js`:
-
-```js title="sidebars.js"
-export default {
- tutorialSidebar: [
- 'intro',
- // highlight-next-line
- 'hello',
- {
- type: 'category',
- label: 'Tutorial',
- items: ['tutorial-basics/create-a-document'],
- },
- ],
-};
-```
diff --git a/docs/tutorial-basics/create-a-page.md b/docs/tutorial-basics/create-a-page.md
deleted file mode 100644
index 20e2ac3..0000000
--- a/docs/tutorial-basics/create-a-page.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create a Page
-
-Add **Markdown or React** files to `src/pages` to create a **standalone page**:
-
-- `src/pages/index.js` → `localhost:3000/`
-- `src/pages/foo.md` → `localhost:3000/foo`
-- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
-
-## Create your first React Page
-
-Create a file at `src/pages/my-react-page.js`:
-
-```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function MyReactPage() {
- return (
- This is a React pageMy React page
-
docs
directory.
+ OML Vision falls under the openCAESAR product line. openCAESAR is a ontological modeling and
+ analysis platform that implements the Ontological Modeling Language (OML), and supports
+ an agile DevOps approach to system modeling and analysis.
>
),
},
{
- title: 'Powered by React',
- Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+ title: 'Powered by React TSX and VSCode',
+ Svg: require('@site/static/img/undraw_react.svg').default,
description: (
<>
- Extend or customize your website layout by reusing React. Docusaurus can
- be extended while reusing the same header and footer.
+ OML Vision is a Visual Studio Code extension that is built using React and Typescript. This allows type safety,
+ improved collaboration, and enhanced code maintainability throughout the lifecycle of the project.
>
),
},
diff --git a/src/css/custom.css b/src/css/custom.css
index 2bc6a4c..c8ef8ce 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -5,16 +5,16 @@
*/
/* You can override the default Infima variables here. */
+
+/* Read more here https://docusaurus.io/docs/styling-layout */
:root {
- --ifm-color-primary: #2e8555;
- --ifm-color-primary-dark: #29784c;
- --ifm-color-primary-darker: #277148;
- --ifm-color-primary-darkest: #205d3b;
- --ifm-color-primary-light: #33925d;
- --ifm-color-primary-lighter: #359962;
- --ifm-color-primary-lightest: #3cad6e;
- --ifm-code-font-size: 95%;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+ --ifm-color-primary: #1e48ff;
+ --ifm-color-primary-dark: #0131ff;
+ --ifm-color-primary-darker: #002df2;
+ --ifm-color-primary-darkest: #0025c8;
+ --ifm-color-primary-light: #3b5fff;
+ --ifm-color-primary-lighter: #496bff;
+ --ifm-color-primary-lightest: #5776ff;
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -22,9 +22,8 @@
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
- --ifm-color-primary-darkest: #1a8870;
+ --ifm-color-primary-darkest: #1e9b80;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..eaedb06 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -20,4 +20,21 @@
display: flex;
align-items: center;
justify-content: center;
+ padding: 2rem;
}
+
+.buttonContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ justify-items: center;
+}
+
+/*for smaller screens*/
+@media screen and (max-width: 996px){
+ .buttonContainer{
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 400a3e1..176d5b0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,27 +1,46 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Heading from "@theme/Heading";
-import styles from './index.module.css';
+import styles from "./index.module.css";
function HomepageHeader() {
- const {siteConfig} = useDocusaurusContext();
+ const { siteConfig } = useDocusaurusContext();
return (
- {siteConfig.tagline}
-