visualifyjs 2.5.3

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",
+                }
+            }
+        }
+```

package/docs/docs/configuration.md

@@ -0,0 +1,123 @@
+# Configuration
+
+You can configure Visualify by defining `window.$visualify` or `$visualify` as
+an object:
+
+```js
+<script>
+window.$visualify = {
+    mode: 'pages',
+    // ...
+}
+</script>
+```
+
+Or you can initialize `$visualify` as a **Chart Module**:
+
+```js
+<script>
+$visualify = {
+    mode: 'charts',
+}
+
+new $visualify.Recharts({...}).mount('#chart')
+new $visualify.LiveEditor({...}).mount('#ex11');
+</script>
+```
+
+## el
+
+-   Type: `String`
+-   Default: `'#root'`
+
+The DOM element to be mounted on initialization. It can be a CSS selector string
+or an actual
+[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
+
+```js
+window.$visualify = {
+  el: '#root',
+};
+```
+
+## mode
+
+-   Type: `String`
+-   Default: `'pages'`
+-   Options: `'pages'`, `'charts'`
+
+The mode of Visualify. If you want to use Visualify as a chart module, you can
+set `mode` to `'charts'`.
+
+```js
+window.$visualify = {
+  mode: 'charts',
+};
+```
+
+## theme
+
+-   Type: `String`
+-   Default: `'modern'`
+-   Options: `'modern'`, `'classic'`
+
+The theme of Visualify. The default theme is `'modern'`. Themes usually make
+changes to the layout and components of the page. Built-in different themes
+provide different typesetting and functions, please choose different themes
+according to different needs, you can also replace a single css to change the
+style.
+
+```js
+window.$visualify = {
+  theme: 'modern',
+};
+```
+
+For more themes, please refer to [Themes](themes.md)
+
+## homepage
+
+-   Type: `String`
+-   Default: `'home.json'`
+
+The `home.json` in your docs folder will be treated as the homepage for your
+website, but sometimes you may need to serve another file as your homepage.
+
+```js
+window.$visualify = {
+    homepage: 'home',
+
+    // Or use the json in your repo
+    homepage: 'https://raw.githubusercontent.com/leolihao/visualify/master/docs/home.json',
+}
+```
+
+## repo
+
+-   Type: `String`
+
+Configure the repository url, or a string of `username/repo`, to add the
+[GitHub Corner](http://tholman.com/github-corners/) widget in the top right
+corner of the site.
+
+```js
+window.$docsify = {
+  repo: 'leolihao/visualify',
+  // or
+  repo: 'https://github.com/leolihao/visualify/',
+};
+```
+
+## alias
+
+-   Type: `Object`
+
+Set the route alias. You can freely manage `routing` rules. Supports `RegExp`.
+
+```js
+window.$visualify = {
+  alias: {
+    '/docsify': 'https://docsify.js.org/#/configuration?id=alias',
+  },
+};
+```

package/docs/docs/deploy.md

@@ -0,0 +1,31 @@
+# Deploy
+
+## On Your Local Machine
+
+You can deploy Visualify on your local machine by running a simple HTTP server.
+For example, you can use the `http-server` package from npm:
+
+```bash
+npm install -g http-server
+http-server ./docs
+```
+
+Then open your browser and navigate to `http://localhost:8080`.
+
+## On GitHub Pages
+
+There are three places to populate your docs for your GitHub repository:
+
+-   `docs/` folder
+-   main branch
+-   gh-pages branch
+
+It is recommended that you save your files to the `./docs` subfolder of the
+`main` branch of your repository. Then select `main branch /docs folder` as your
+GitHub Pages source in your repository's settings page.
+
+![GitHub Pages](./static/_images/deploy-github-pages.png)
+
+!> You can also save files in the root directory and select `main branch`.
+You'll need to place a `.nojekyll` file in the deploy location (such as `/docs`
+or the gh-pages branch)

package/docs/docs/log.md

@@ -0,0 +1 @@
+# log

package/docs/docs/more-pages.md

@@ -0,0 +1,23 @@
+# More pages
+
+If you need more pages, you can simply create more `json` configuration files in
+your visualify directory. If you create a file named `scatter`, then it is
+accessible via `/scatter`.
+
+For example, the directory structure is as follows:
+
+```text
+.
+└── docs
+    ├── index.html
+    ├── scatter.json
+    └── honme.json
+```
+
+Matching routes
+
+```text
+docs/home.json        => http://domain.com
+                      => http://domain.com/home
+docs/scatter.json     => http://domain.com/scatter
+```

package/docs/docs/quickstart.md

@@ -0,0 +1,119 @@
+# Quick start
+
+It is highly recommended to use `Docisfy` as a document framework and imports
+`visualify` to quickly present various diagrams.
+
+Insert the `visualify` script in your `index.html` file.
+
+```html
+<head>
+  ...
+  <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
+  <!-- or -->
+    <!-- script src="https://cdn.jsdelivr.net/npm/visualifyjs"></!-- -->
+</head>
+```
+
+Or install `visualify.cli` globally, which helps initializing and previewing the
+website locally.
+
+```bash
+npm i visualify.cli -g
+```
+
+## Initialize
+
+If you want to write the documentation in the `./docs` subdirectory, you can use
+the `init` command.
+
+```bash
+visualify init ./docs
+```
+
+or simply run `visualify init`
+
+```bash
+visualify init
+```
+
+or anywhere you like.
+
+```bash
+visualify init <path>
+```
+
+## Writing content
+
+After the `init` is complete, you can see the file list in the `./docs`
+subdirectory.
+
+-   `index.html` as the entry file
+-   `home.jsom` as the home page
+-   `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
+    underscore
+
+You can easily update the documentation in `./docs/home.json`, of course you can
+add [more pages](more-pages.md).
+
+## Preview your site
+
+Run the local server with `visualify serve <docs-path>`. You can preview your
+site in your browser on `http://localhost:3000`.
+
+```bash
+visualify serve docs
+```
+
+?> For more use cases of `visualify.cli`, head over to the
+[CLI documentation](CLI.md).
+
+## Manual initialization
+
+If you don't like `npm` or have trouble installing the tool, you can manually
+create `index.html`:
+
+```html
+<!-- index.html -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      $visualify = {
+        //...
+      };
+    </script>
+    <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
+    <!-- or -->
+    <!-- script src="https://cdn.jsdelivr.net/npm/visualifyjs"></!-- -->
+  </body>
+</html>
+
+```
+
+### Manually preview your site
+
+If you have `Node.js` installed on your system, you can easily use it to run a
+static server to preview your site.
+
+```bash
+# install corresponding dependencies
+npm install -g serve
+serve -s ./docs
+```
+
+If you have Python installed on your system, you can easily use it to run a
+static server to preview your site.
+
+```python2
+cd docs && python -m SimpleHTTPServer 3000
+```
+
+```python3
+cd docs && python -m http.server 3000
+```