Skip to content

Commit

Permalink
chore: updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
hrishikeshpaul committed Apr 7, 2021
1 parent e045f8a commit ab10139
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 37 deletions.
22 changes: 11 additions & 11 deletions projects/v2/src/assets/docs/compare/README.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
## Compare
---

You can now compare your own data with that found in the ASCT+B Master tables, which is visualized in the ASCT+B Reporter. In order to do this, you will need to have your data in the ASCT+B table Google Sheets template with public access that can be uploaded into the Reporter. NOTE: .xls files are not supported. The Compare feature is particularly useful if you have data from your own research that you would like to compare to the data in the ASCT+B Master Tables.
You can now compare your own data with that visualized by the ASCT+B Reporter. In order to do this, you will need to have your data in the ASCT+B table Google Sheets template with public access so it can be uploaded into the Reporter. NOTE: .xls files are not supported. The compare feature is particularly useful if you have data from your own research that you would like to compare to the data in the ASCT+B Master Tables.

<br>

#### Usage

1. To access the Compare feature, go to the toolbar at the top and click on *Compare* (shown in the image below)
1. 1. To access the compare feature, go to the toolbar at the top and click on *Compare* (shown in the image below)

<img src="assets/docs/compare/toolbar.png" alt="Compare Icon Toolbar" class="md-img p-2 w-75">
<br>
<br>

2. A drawer will pop up from the side that will show a few instructions and the various input fields.
- **Title**: *Optional*. This is the title by which the uploaded sheet can be identified. By default it is given a title in the format `Sheet <number>`. This number corresponds to the index of the sheet in the compare feature. If you have added sheets, the default title of the sheets would be `Sheet 1` and `Sheet 2` respectively.
- **Description**: *Optional*. This field holds a small description about what your data is about. It is empty by default.
- **Google Sheets Link**: *Required*. This field will hold the sheet link to your data. Your data has to be in the specified format that can be found [here](https://docs.google.com/spreadsheets/d/1bsA-HngthTD7NtzAfab8t3EVjFFT439-Pc-mp_mdZUU/edit#gid=0).
- **Color picker**: *Optional*. This is a swatch that will allow you to pick the color. A random color is assigned my default.
- **Title** (optional): This is the title by which the uploaded sheet can be identified. By default it is given a title in the format `Sheet <number>`. This number corresponds to the index of the sheet in the compare feature. If you have added sheets, the default title of the sheets would be `Sheet 1` and `Sheet 2` respectively.
- **Description** (optional): This field holds a small description of your data. It is empty by default.
- **Google Sheets Link** (required): This field will hold the sheet link to your data. Your data has to be in the specified format that can be found [here](https://docs.google.com/spreadsheets/d/1bsA-HngthTD7NtzAfab8t3EVjFFT439-Pc-mp_mdZUU/edit#gid=0).
- **Color selector** (optional): This is a swatch that will allow you to choose the color. A random color is assigned by default.

<br>
<img src="assets/docs/compare/cmp.png" alt="Compare Dialog" class="md-img p-2 w-50">
<br>
<br>

3. Additional sheets can also be added in the same way by clicking on the **+ Add** button at the bottom.
4. Clicking on **Compare** will then render the new data on the visualization after the Reporter have successfully received the data. (sometimes this can take a few seconds). The results of a compared data is shown below (with the updated legend),
4. 4. Clicking on *Compare* will then render the new data on the visualization after the Reporter has successfully received the data (sometimes this can take a few seconds). The results of the compared data are shown below (with the updated legend).

<img src="assets/docs/compare/result.png" alt="Compare Results" class="md-img p-2 w-50">
<img src="assets/docs/compare/legend.png" alt="Compare Legend" class="md-img p-2 w-25" align="right">
<br>
<br>

5. Reports are generated for each separately that lists various statistics (common counts, uncommon counts etc). More information about the report can be found [here](/docs?id=8).
5. Reports are generated for each of the sheets separately that lists various statistics (common counts, uncommon counts etc). More information about the report can be found in the Report section.

#### Characteristics

- All links (paths, relationships) that are common between the master data and the uploaded data are highlighted in the selected color.
- All nodes that are common between the master table and the uploaded data are highlighted in the selected color.
- All the new nodes have been added to the visualization with a dashed stoke around them in the selected color.
- All the new nodes have been added to the visualization with a dashed line around them in the selected color.

<br>

#### Note

In order for the compare feature to work properly, make sure,
- The sheet on Google Sheets has public access. The permissions on Google should look something like this,
- The Google Sheet you’re using has public access; permissions on Google should look something like this:

<img src="assets/docs/compare/permissions.png" alt="Compare Results" class="md-img p-2 w-25">
<img src="assets/docs/compare/permissions.png" alt="Compare Results" class="md-img p-2 w-50">
<br>
<br>
- The data should be in the format specified [here](https://docs.google.com/spreadsheets/d/1bsA-HngthTD7NtzAfab8t3EVjFFT439-Pc-mp_mdZUU/edit#gid=0). Its completely fine to not include headers that are not required for your data. For example, if you have just cell types in your data you can just have `CT/1` in your sheet, and that would work fine with the Reporter. Therefore, the headers matter.
Expand Down
2 changes: 1 addition & 1 deletion projects/v2/src/assets/docs/indented-list/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
## Indented List
---

This visualization is a traditional, hierarchical structure that displays anatomical structures and its sub-structures. This makes use the of [Angular Material Tree](https://material.angular.io/components/tree/overview).
This visualization, which makes use of the [Angular Material Tree](https://material.angular.io/components/tree/overview), is a traditional, hierarchical structure that displays anatomical structures and their sub-structures.

<br>

Expand Down
12 changes: 6 additions & 6 deletions projects/v2/src/assets/docs/playground/README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
## Playground
---

The latest feature, Playground, allows you to play around with a sample visualization, as well as upload your own data that can be visualized. This also comes with an in-house table that can be edited to see the changes in the visualization in real time. Uploading your sheet/data is temporary and once the page is refreshed the link is terminated.
This feature allows you to play around with a sample visualization and upload your own data to be visualized. It also comes with an in-house table that can be edited to see the changes in the visualization in real time. Uploading your sheet/data is temporary, and once the page is refreshed, the link is terminated.

#### Usage

1. To active playground mode, click on the *Playground* button on the toolbar.
1. To activate playground mode, click on the *Playground* button on the toolbar.

<img src="assets/docs/playground/toolbar.png" alt="Playground Icon Toolbar" class="md-img p-2 w-75">
<br>
<br>

2. This should take you to an example visualization with just a handful of nodes.
2. This will take you to an example visualization with just a handful of nodes.

<img src="assets/docs/playground/play.png" alt="Playground" class="md-img p-2 w-75">
<br>
<br>

3. There are 3 tabs,
3. There are three tabs,
- **Visualization**: This is the default view which shows the visualization (as shown in the image above).
- **Table**: This is a tabular view of the data. This is not a full featured table, just a basic view to do some quick edits. Alternatively, you can edit your sheet on Google Sheets and then head over to the Reporter, click on the Refresh button and get the latest data.
- **Table**: This is a tabular view of the data. This is not a full-featured table but a basic view for quick edits. Alternatively, you can edit your sheet on Google Sheets and then head over to the Reporter, click on the *Refresh* button, and get the latest data.

<img src="assets/docs/playground/table.png" alt="Playground" class="md-img p-2 w-75">
<br>
Expand All @@ -36,7 +36,7 @@ The latest feature, Playground, allows you to play around with a sample visualiz

In order for the playground feature to work properly, make sure,

- The sheet on Google Sheets has public access. The permissions on Google should look something like this,
- The Google Sheet you’re using has public access; permissions on Google should look something like this:

<img src="assets/docs/compare/permissions.png" alt="Compare Results" class="md-img p-2 w-25">
<br>
Expand Down
14 changes: 7 additions & 7 deletions projects/v2/src/assets/docs/report/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The report computes and generates various statistics from the data (current orga

#### Usage

1. Click on the **Report** button in the nav-bar to generate and show the report.
1. Click on the **Report** button in the nav-bar to generate and dsiplay the report.

<img src="assets/docs/report/nav.png" alt="Report Icon Nav" class="md-img p-2 w-75">
<br>
Expand All @@ -18,7 +18,7 @@ The report computes and generates various statistics from the data (current orga
<br>
<br>

3. To download the Report in XL format, click on the download button at the top. If there are multiple compare sheets, these would be different sheets in the excel workbook.
3. To download the report in XL format, click on the *Download* button at the top. If there are multiple compare sheets, they will appear as different sheets in the XL workbook.

<img src="assets/docs/report/report-download.png" alt="Report Download" class="md-img p-2 w-25">
<br>
Expand All @@ -32,21 +32,21 @@ The report computes and generates various statistics from the data (current orga

##### Main Sheet

This tab will contain the statistics of the Main Master table of that selected organ. The main sections of this tab are,
This tab will contain the statistics of the master table of that selected organ. The main sections of this tab are,

- **Unique Entities**: Unique counts of Anatomical Structures, Cell Types and Biomarkers.
- **Unique Entities**: Unique counts of AS, CT and B.
- **Entity Links**: Count of the linkages between various entities, namely,
- part_of
- located_in
- characterizes
- **Ontology Links**: Shows the count of structures that have Ontology IDs and that do not have the same.
- **Alphabetical listing of AS, CT & B**: This section has expandable panels that name provide the names of the nodes for which the counts were generated above.
- **Ontology Links**: Separate graphs showing the count of structures that have Ontology IDs and that do not.
- **Alphabetical listing of AS, CT and B**: This section has expandable panels that name provide the names of the nodes for which the counts were generated above.

<br>

##### Compare Sheet

Each compare sheet has its own report. In order for data to be visible in this tab, make sure to use the [compare](/docs?id=6) feature and upload your data. These sheets can be individually downloaded as well as deleted. Once the data is there, this tab would look something like this,
Each compare sheet has its own report. In order for data to be visible in this tab, make sure to use the compare feature and upload your data. These sheets can be individually downloaded as well as deleted. Once the data is there, the tab will look something like this:

<img src="assets/docs/report/compare-report.png" alt="Report Download" class="md-img p-2 w-25">
<br>
Expand Down
8 changes: 4 additions & 4 deletions projects/v2/src/assets/docs/search/README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
## Search
---

This useful feature allows for anatomical structures, cell types and biomarkers to be searched and pinpointed in the visualization. The input auto-complete filters the entities based on the name. Additionally, you can also select multiple structures to search for.
This feature allows for AS, CT, and B to be searched and pinpointed in the visualization. The input auto-complete filters the entities based on the name. You can also search for multiple structures.

<br>

#### Usage

1. Click on the search bar at at the top.
1. Click on the search bar at the top.

<img src="assets/docs/search/nav.png" alt="Search nav bar" class="md-img p-2 w-75">
<br>
<br>

2. Type in the name in the input field. The options will keep changing as letters are typed (auto complete).
2. Type in the name in the input field. The options will keep changing as letters are typed (auto-complete).

<img src="assets/docs/search/search.png" alt="Search typing" class="md-img p-2 w-75">
<br>
<br>

3. Clicking on the available options will highlight those entities in the visualization with a light blue box around the name.
3. Clicking on the available options will highlight those entities in the visualization with a light-blue box around the name.

<img src="assets/docs/search/click.png" alt="Search typing" class="md-img p-2 w-75">
<br>
Expand Down
6 changes: 3 additions & 3 deletions projects/v2/src/assets/docs/vis-controls/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
## Visualization Controls
---

Due to the ever increasing data, the visualization can sometimes get messy and hard to read. The visualization Controls can be used to solve this problem by being able to resize the visualization and change the default configurations on the fly. These configurations can also be downloading in a JSON format. These controls can be found on the Control Pane on the left (figure below),
Due to an ever-increasing amount of data, the visualization can sometimes get messy and hard to read. The visualization controls can be used to solve this problem by being able to resize the visualization and change the default configurations on the fly. These configurations can also be downloaded in a JSON format. These controls can be found on the control pane on the left (figure below),

<img src="assets/docs/vis-controls/controls.png" alt="Vis Controls" class="md-img p-2 w-50" >

Expand All @@ -10,12 +10,12 @@ Due to the ever increasing data, the visualization can sometimes get messy and h

**Ontology IDs**

By default this option is switched on. Toggling this options will show/hide the ontology names of nodes (if present) that can be found below the name of the node.
This option is switched on by default. Toggling this option will show/hide the ontology names (if present) found below the name of the node.


**Show all AS**

This is an options that is only visible in the [All Organ Visualization](/vis?sheet=all&version=latest). This is switched off by default and the visualization only renders the organ instead of all its anatomical structures and substructures. Toggling this to be on will show all the Anatomical structures and their substructures in the all organs visualization.
This option is only visible in the *all-organs visualization*. This is switched off by default, and the visualization only renders the organ instead of all its anatomical structures and substructures. Toggling this on will show all the anatomical structures and their substructures in the all-organs visualization.


**Tree Width**
Expand Down
10 changes: 5 additions & 5 deletions projects/v2/src/assets/docs/vis-functions/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
## Visualization Functions
---

To make the visualization more interactive, there are certain functions like sorting, sizing and filtering that can be done on various nodes. These functionalities only apply to the Cell Types nodes and the Biomarker nodes. The figure below shows the visualization functions that can be accessed via the Control Pane on the left.
To make the visualization more interactive, there are certain functions like sorting, sizing, and filtering that can be performed on various nodes. These functionalities only apply to CT and B nodes. The figure below shows the visualization functions that can be accessed via the control pane on the left.

<img src="assets/docs/vis-functions/vf.png" alt="Vis Functions Full" class="md-img p-2 w-50" >

Expand All @@ -20,21 +20,21 @@ To make the visualization more interactive, there are certain functions like sor

##### Sorting

CT and B nodes can be sorted *Alphabetically* or by their *Degree*. By default, these nodes are sorted Alphabecially. Selecting any of the options will cause the visualization to re-render.
CT and B nodes can be sorted *alphabetically* or by their *degree*. By default, these nodes are sorted Alphabecially. Selecting any of the options will cause the visualization to re-render.

<br>

##### Sizing

CT and B nodes can be sized based on their *Indegree*, *Outdegree* and *Degree*. By default, all the nodes are sized based on the default value of `300`. Since the outdegree is the same and the indegree for the B nodes, you can just sort B nodes by their *Degree*. Selecting any of the options will cause the visualization to re-render.
CT and B nodes can be sized based on their *indegree*, *outdegree* and *degree*. By default, all the nodes are sized based on the default value of `300`. Since the outdegree is the same and the indegree for the B nodes, you can just sort B nodes by their *degree*. Selecting any of the options will cause the visualization to re-render.

<br>

##### Filtering

The Reporter currently supports 2 types of Biomarkers,
The Reporter currently supports two types of bomarkers,

- Protein (denoted by BP in the ASCT+B Tables)
- Gene (denoted by BG in the ASCT+B Tables)

By using the third select menu in the Biomarker Functions, B nodes can be filtered based on their type. Selecting any of the options will cause the visualization to re-render.
By using the third select menu in the biomarker Functions, B nodes can be filtered based on their type. Selecting any of the options will cause the visualization to re-render.

0 comments on commit ab10139

Please sign in to comment.