visualifyjs 2.5.3-2.dev

package/docs/docs/components/dotBio.md

@@ -0,0 +1,34 @@
+# DotBio Component
+
+The DotBio component is a dot plot that
+displays the expression of genes in different cell types. 
+
+
+## Properties
+
+The DotBio component has the following properties:
+
+-   `type` (string): The type of the component, in this case `DotBio`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `colspan` (int): The number of columns the component is to span.
+-   `settings` (object): The settings of the component.
+-   `meta` (object): The metadata API of the component.
+    -   `name` (string): The name of the metadata.
+    -   `url` (string): The URL of the metadata.
+-   `exclude_celltype` (array): The cell types to be excluded.
+-   `gene` (string): The gene API.
+-   `genelist` (string): The genelist variable name we want to use.
+
+### settings Properties
+
+The `settings` object has the following properties:
+
+-   `preset` (string): The preset of the component.
+-   `ignoreEmptyData` (boolean): Whether to ignore empty data or not.
+-   `showscale` (boolean): Whether to show the scale or not.
+-   `showlegend` (boolean): Whether to show the legend or not.
+        
+

package/docs/docs/components/echart.md

@@ -0,0 +1,82 @@
+# Echart Component
+
+The Echart component is a wrapper around the
+[Apache ECharts](https://echarts.apache.org/en/index.html) library. It is used
+to create a variety of visualizations including scatter plots, line charts, bar
+charts, and more.
+
+This Echart Component is same as the Rechart Component, but it is used for the
+page mode, which enable the user to create a page with multiple components. And
+it also **support the API to fetch the data**.
+
+## Properties
+
+The Echart component has the following properties:
+
+-   `type` (string): The type of the component, in this case `Echart`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `colspan` (int): The number of columns the component is to span.
+-   `config` (object): The configuration of the component.
+-   `parser` (object): The parser of the component.
+-   `trigger` (object): The trigger of the component.
+
+### config Properties
+
+The `config` object has the following properties:
+
+-   `width` (int): The width of the component.
+-   `height` (int): The height of the component.
+-   `preset` (string): The preset of the component.
+-   `title` (string): The title of the component.
+-   `xAxis` (string): The x-axis of the component.
+-   `yAxis` (string): The y-axis of the component.
+-   `legend` (string): The legend of the component.
+-   `tooltip` (string): The tooltip of the component.
+-   `data` (string): The data of the component.
+
+### parser Properties
+
+The `parser` object has the following properties:
+
+-   `sources` (array): The sources of the component.
+    -   `name` (string): The name of the trigger.
+    -   `url` (string): The URL of the data.
+    -   `type` (string): The type of the component.
+    -   `responseKey` (string): The response key of the component.
+    -   `trigger` (object): The trigger of the component.
+        -   `title` (boolean): set the title to the triiger value.
+
+### Example
+
+```json
+        {
+            "id": "mmtrbc_tsne",
+            "type": "Echart",
+            "col": 2,
+            "rowspan": 3,
+            "config": {
+                "width": 600,
+                "height": 600,
+                "preset": "mmtrbc",
+                "title": " "
+            },
+            "parser": {
+                "sources": [{
+                    "name": "metadata",
+                    "url": "<your-backend-url>"
+                }, {
+                    "name": "gene",
+                    "url": "<your-backend-url>",
+                    "responseKey": "gene",
+                    "trigger": {
+                        "name": "mmtrbc_gene",
+                        "title": true
+                    }
+                }],
+                "type": "scatter"
+            }
+        }
+```

package/docs/docs/components/html.md

@@ -0,0 +1,34 @@
+# HTML Component
+
+The HTML component is used to display HTML content on the page.
+
+## Properties
+
+The HTML component has the following properties:
+
+-   `type` (string): The type of the component, in this case `HTML`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `colspan` (int): The number of columns the component is to span.
+-   `html` (string): The HTML content to be displayed.
+
+## Future Work
+
+We will add the ability to fetch the HTML content from an API.
+
+- `script` (string): The script to be executed.
+- `style` (string): The style to be applied.
+
+### Example
+
+```json
+{
+    "type": "HTML",
+    "row": 1,
+    "col": 2,
+    "colspan": 3,
+    "html": "<img style='width: 100%' src='./mainpage.png' alt='Abstract'>"
+}
+```
+

package/docs/docs/components/macaron.md

@@ -0,0 +1,145 @@
+# Macaron Component
+
+The Macaron component is used to display a macaron plot for relation of nodes on
+the page.
+
+The Macaron component also has interactive features, such as the ability to drag
+and drop nodes, and the ability to select nodes.
+
+## Properties
+
+The Macaron component has the following properties:
+
+-   `type` (string): The type of the component, in this case `Macaron`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `config` (object): The configuration of the component.
+-   `data` (object): The data of the component.
+
+### config Properties
+
+The `config` object has the following properties:
+
+-   `animation` (boolean): Whether to animate the component or not.
+-   `draggable` (boolean): Whether to make the component draggable or not.
+-   `height` (int): The height of the component.
+-   `unclickable` (array): The nodes that are unclickable.
+-   `symbolSize` (string): The size of the symbols in the component.
+-   `color` (object): The color of the component.
+    -   `selected` (string): The color of the selected nodes.
+    -   `unselectable` (string): The color of the unselectable nodes.
+
+### data Properties
+
+The `data` object has the following properties:
+
+-   `nodes` (array): The nodes of the component.
+    -   `name` (string): The name of the node.
+    -   `category` (int): The category of the node.
+    -   `value` (int): The value of the node.
+-   `edges` (array): The edges of the component.
+-   `categories` (array): The categories of the component.
+
+### Example
+
+```json
+{
+            "id": "celltype",
+            "type": "Macaron",
+            "title": "Select Cell Type",
+            "style": {
+                "height": "350px",
+                "width": "350px",
+                "font": "Arial, sans-serif",
+                "border": ""
+            },
+            "data": {
+                "nodes": [{
+                        "name": "Esophagus",
+                        "category": 1,
+                        "value": 216229
+                    },
+                    {
+                        "name": "Epithelium",
+                        "category": 2,
+                        "value": 108800
+                    },
+                    {
+                        "name": "Stroma",
+                        "category": 2,
+                        "value": 107429
+                    },
+                    {
+                        "name": "EPI (E)",
+                        "category": 3,
+                        "value": 97799
+                    },
+                    {
+                        "name": "ST (E)",
+                        "category": 3,
+                        "value": 1760
+                    }
+                ],
+                "edges": [{
+                        "source": "Esophagus",
+                        "target": "Epithelium",
+                        "level": 1
+                    },
+                    {
+                        "source": "Esophagus",
+                        "target": "Stroma",
+                        "level": 1
+                    },
+                    {
+                        "source": "Epithelium",
+                        "target": "IM (E)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Epithelium",
+                        "target": "ERY (E)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Stroma",
+                        "target": "MES (S)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Stroma",
+                        "target": "ENS (S)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Stroma",
+                        "target": "ENDO (S)",
+                        "level": 2
+                    }
+                ],
+                "categories": [{
+                        "name": "Category 1"
+                    },
+                    {
+                        "name": "Category 2"
+                    },
+                    {
+                        "name": "Category 3"
+                    }
+                ]
+            },
+            "config": {
+                "animation": false,
+                "draggable": true,
+                "height": "88%",
+                "unclickable": ["EPI (S)", "Esophagus"],
+                "symbolSize": "value",
+                "color": {
+                    "selected": "skyblue",
+                    "unselectable": "black"
+                }
+            },
+            "row": 1,
+            "col": 1
+        }
+```

package/docs/docs/components/more.md

@@ -0,0 +1,142 @@
+# More components
+
+## Markdown
+
+The Markdown component is used to render markdown content on the page.
+
+
+
+## SearchBar
+
+The SearchBar component is used to search for a specific gene.
+
+### Properties
+
+The SearchBar component has the following properties:
+
+-   `type` (string): The type of the component, in this case `SearchBar`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `config` (object): The configuration of the component.
+-   `style` (object): The style of the component.
+-   `title` (string): The title of the component.
+
+### config Properties
+
+The `config` object has the following properties:
+
+-   `save` (boolean/String): Whether to save the search or not.
+    -   (string): The name to be saved at global data.
+-   `source` (object): The source of the component.
+    -   `name` (string): The name of the source.
+    -   `url` (string): The URL of the source.
+    -   `responseKey` (string): The response key of the source.
+
+### Example
+
+```json
+{
+    "id": "mmtrbc_gene",
+    "type": "SearchBar",
+    "title": "Search Gene",
+    "config": {
+        "save": true,
+        "source": {
+            "name": "genelist",
+            "url": "https://visualify.pharmacy.arizona.edu/api/mmtrbc/genelist",
+            "responseKey": "gene"
+        }
+    }
+}
+```
+
+## List
+
+The List component is used to display a list of genes.
+
+### Properties
+
+The List component has the following properties:
+
+-   `type` (string): The type of the component, in this case `List`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `btn` (object): The button of the component.
+-   `style` (object): The style of the component.
+-   `title` (string): The title of the component.
+
+### example
+
+```json
+  {
+            "id": "genelist",
+            "type": "List",
+            "row": 2,
+            "col": 1,
+            "rowspan": 3,
+            "btn": {
+                "add": {
+                    "text": "Add",
+                    "show": true,
+                    "style": {
+                        "color": "white",
+                        "backgroundColor": "#FF8E8E",
+                        "fontSize": "12px",
+                        "border": "none",
+                        "cursor": "pointer"
+                    },
+                    "addfrom": "mmtrbc_gene"
+                },
+                "clear": {
+                    "text": "Clear",
+                    "show": true,
+                    "msg": "Successfully cleared the list",
+                    "style": {
+                    }
+                },
+                "remove": {
+                    "show": true,
+                    "style": {
+                        "color": "white",
+                        "backgroundColor": "#f44336",
+                    }
+                }
+            }
+        }
+```
+
+## RatioBox
+
+The RatioBox component is used to display a ratio box on the page.
+
+### Properties
+
+The RatioBox component has the following properties:
+
+-   `type` (string): The type of the component, in this case `RatioBox`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `choice` (array): The choice of the component.
+-   `style` (object): The style of the component.
+-   `val` (string): Will save the choices to the name of global variable.
+
+### Example
+
+```json
+{
+    "type": "RatioBox",
+    "id": "chrom_colour",
+    "row": 2,
+    "col": 1,
+    "choice": ["Cell Type", "Stage"],
+    "style": {
+        "width": "350px"
+    },
+    "val": "chrom_colour",
+    "title": "Colour by"
+}
+```

package/docs/docs/components/plotly.md

@@ -0,0 +1,62 @@
+# Plotly Component
+
+The Plotly component is used to display a plotly plot on the page.
+
+## Properties
+
+The Plotly component has the following properties:
+
+-   `type` (string): The type of the component, in this case `Plotly`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `colspan` (int): The number of columns the component is to span.
+-   `settings` (object): The settings of the component.
+-   `parser` (object): The parser of the component.
+-   `trigger` (object): The trigger of the component.
+
+### settings Properties
+
+The `settings` object has the following properties:
+
+-   `preset` (string): The preset of the component.
+-   `ignoreEmptyData` (boolean): Whether to ignore empty data or not.
+
+### parser Properties
+
+The `parser` object has the following properties:
+
+-   `sources` (array): The sources of the component.
+    -   `name` (string): The name of the trigger.
+    -   `url` (string): The URL of the data.
+    -   `responseKey` (string): The response key of the component.
+-   `exclude` (array): The data to be excluded.
+-   `type` (string): The type of the component.
+
+### Example
+
+```json
+        {
+            "id": "mmtrbc_tsne",
+            "type": "Plotly",
+            "col": 2,
+            "rowspan": 3,
+            "settings": {
+                "preset": "mmtrbc",
+                "ignoreEmptyData": true
+            },
+            "parser": {
+                "sources": [{
+                    "name": "metadata",
+                    "url": "<your-backend-url>"
+                }, {
+                    "name": "gene",
+                    "url": "<your-backend-url>",
+                    "responseKey": "gene"
+                }],
+                "exclude": ["BC-Mes", "BC-NE", "BC-Im"],
+                "type": "scatter"
+            }
+        }
+```

package/docs/docs/components/scatterL.md

@@ -0,0 +1,70 @@
+# ScatterL Components
+
+The ScatterL component is a scatter plot that is used to visualize the data in
+2D. It is a part of the Plotly library and is used to visualize the data in 2D.
+The ScatterL component is used to visualize the data in 2D.
+
+The ScatterL component is designed for a specified data Format, like R-tree, to
+visualize a large data set in 2D.
+
+## Requirements
+
+The ScatterL component requires the specified API to fetch the data. Currently,
+the ScatterL component supports the API for fetching the data - in the format of
+JSON, - and it need API to consist as
+`your-backend-server-url/xxx/<x-min>/<y-min>/<x-max>/<y-max>`
+
+We will provide an example of the backend to show you how to implement our
+customized Rtree API.
+
+## Properties
+
+The ScatterL component has the following properties:
+
+-   `type` (string): The type of the component, in this case `ScatterL`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `config` (object): The configuration of the component.
+
+### config Properties
+
+The `config` object has the following properties:
+
+-   `merge` (boolean): Whether to merge the data or not.
+-   `startup_msg` (string): The message to be displayed when the component is
+    started.
+-   `size` (object): The size of the component.
+    -   `width` (int): The width of the component.
+    -   `height` (int): The height of the component.
+    -   `dotsize` (object): The size of the dots in the scatter plot.
+    -   `dotFactor` (int): The factor by which the dot size is to be multiplied.
+        -   `min` (int): The minimum size of the dot.
+        -   `max` (int): The maximum size of the dot.
+    -   `colourby` (string): The property by which the dots are to be coloured.
+    -   `exclusion` (array): The properties to be excluded.
+    -   `api` (object): The API to be used to fetch the data.
+        -   `metadata` (object): The metadata API.
+            -   `href` (string): The URL of the metadata API.
+            -   `val` (string): The value of the metadata API.
+        -   `gene` (object): The gene API.
+            -   `href` (string): The URL of the gene API.
+            -   `val` (string): The value of the gene API.
+            -   `dep` (string): The dependent property of the gene API.
+    -   `mapping` (object): The mapping of the data.
+        -   `api` (object): The API to be used for mapping.
+            -   Example:
+                -   `ENS (S): 'ens_iter_2'` (string): Maps ENS (S) to endo_iter_2 API.
+                -   `IM (S): 'im_iter_2'` (string): Maps IM (S) to im_iter_2 API.
+                -   `MES (S): 'mes_iter_2'` (string): Maps MES (S) to mes_iter_2 API.
+        -   `axis` (object): The axis to be used for mapping.
+            -   `x: X_Coord` (string):  Maps x-axis to specified value name.
+            -   `y: Y_Coord` (string): Maps y-axis to specified value name.
+            -   `extra` (object): The extra properties.
+                -   Example:
+                    -   `Stage : Stage` (string): Mapes the Stage to the stage property.
+                    -   `MT : MT` (string): Maps the MT to the MT property.
+                    -   `Gene : Gene` (string): Maps the Gene to the gene property.
+                    -   `Cell_Type : Cell_Type` (string): Maps the Cell_Type to the cell type property.
+                    -   `Cell_ID : Cell_ID` (string): Maps the Cell_ID to the cell ID property.

package/docs/docs/components/visium.md

@@ -0,0 +1,57 @@
+# Visium Component
+
+The Visium component is used to display the Visium data on the page.
+
+## Properties
+
+The Visium component has the following properties:
+
+-   `type` (string): The type of the component, in this case `Visium`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `startup_msg` (string): The startup message of the component.
+-   `meta` (string): The metadata API of the component.
+-   `simpleload` (boolean): Whether to load the data simply or not.
+-   `metaval` (string): The metadata variable name we want to use.
+-   `gene` (string): The gene API.
+-   `geneval` (string): The gene variable name we want to use.
+-   `image` (string): The image API.
+-   `cellval` (string): The celltype variable name we want to use.
+-   `axis_mapping` (object): The axis mapping of the component.
+    -   `x: X_Coord` (string): Maps the X_Coord to the x-axis.
+    -   `y: Y_Coord` (string): Maps the Y_Coord to the y-axis.
+    -   `extra` (object): The extra properties.
+        -   Example:
+            -   `BC : BC` (string): Maps the BC to the BC property.
+            -   `SB-1 : SB-1` (string): Maps the SB-1 to the SB-1 property.
+
+
+### Example
+
+```json
+        {
+            "id": "visium_scatter2d",
+            "type": "Visium",
+            "row": 1,
+            "col": 2,
+            "rowspan": 3,
+            "startup_msg": "Section",
+            "meta": "<your-api-for-metadata>",
+            "simpleload": false,
+            "metaval": "visium_section",
+            "gene": "<your-api-for-gene-data>",
+            "geneval": "visium_gene",
+            "image": "<your-api-for-image>",
+            "cellval": "visium_celltype",
+            "axis_mapping": {
+                "x": "X_Coord",
+                "y": "Y_Coord",
+                "extra": {
+                    "BC": "BC",
+                    "SB-1": "SB-1",
+                }
+            }
+        }
+```