3d and other updates

lidaof · Jul 21, 2021 · a67d31f · a67d31f
1 parent 04c1ab9
commit a67d31f
Show file tree

Hide file tree

Showing 37 changed files with 200 additions and 4 deletions.
diff --git a/docs/3d.rst b/docs/3d.rst
@@ -15,7 +15,7 @@ g3d track
 
 From `Tracks` menu, choose `Remote Tracks`, choose `g3d` track type and paste the g3d file url, you can also input a track label which is optional.
 
-.. note:: you can use our `example file <http://target.wustl.edu/dli/tmp/test2.g3d>`_11 for testing purpose, this file is converted from data published in `Three-dimensional genome structures of single diploid human cells, Science Vol. 361, Issue 6405, pp. 924-928 <https://science.sciencemag.org/content/361/6405/924.long>`_ and the original data was obtained from NCBI GEO database.
+.. note:: you can use our `example file <http://target.wustl.edu/dli/tmp/test2.g3d>`_ for testing purpose, this file is converted from data published in `Three-dimensional genome structures of single diploid human cells, Science Vol. 361, Issue 6405, pp. 924-928 <https://science.sciencemag.org/content/361/6405/924.long>`_ and the original data was obtained from NCBI GEO database.
 
 .. image:: _static/g3d_1.png
 
@@ -28,7 +28,7 @@ By default the 3D viewer contains main and thumbnail viewer, if you zoom/rotate
 3D viewer menu
 --------------
 
-The |g3dmenu| icon by default floats to the left of the screen, click it will open the Configuration menu for the 3D visulization, the menu is grouped to control the model data, layout, highlighting, painting, animation and export. Each group can be clicked to toggle expansion.
+The |g3dmenu| button by default floats to the left of the screen, click it will open the Configuration menu for the 3D visulization, the menu is grouped to control the model data, layout, highlighting & labeling, painting, animation and export. Each group can be clicked to toggle expansion.
 
 .. |g3dmenu| image:: _static/g3d_3.png
     :width: 32
@@ -65,17 +65,138 @@ You can also change how the thumbnail structure looks like, for example, `sphere
 
 .. image:: _static/g3d_10.png
 
+Highlighting & labeling
+-----------------------
+
 Toggle browser region highlighting
-----------------------------------
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-By default the main viewer would highlight the structure part belongs to current browser region in yellow, the `Highlighting` section is used to control this behaviour, click the `Remove highligh` will turn off the highlighting.
+By default the main viewer would highlight the structure part belongs to current browser region in yellow, the `Highlighting` section is used to control this behaviour, click the `Remove highlight` will turn off the highlighting.
 
 .. image:: _static/g3d_11.png
 
 This is how it looks like when the highlighting is turned off:
 
 .. image:: _static/g3d_12.png
 
+Customize highlighting
+~~~~~~~~~~~~~~~~~~~~~~
+
+Highlighting color and tube thickness can be customized to get a different viewer. As shown below, we changed the color to purple and thickness to 1:
+
+.. image:: _static/g3d_31.png
+
+and this is the updated and view:
+
+.. image:: _static/g3d_32.png
+
+Labeling by gene
+~~~~~~~~~~~~~~~~
+
+Gene symbol can be searched for labeling, start with search any gene symbol, the menu will auto complete the search based on users' input.
+
+.. image:: _static/g3d_33.png
+
+choose the isoform wanted:
+
+.. image:: _static/g3d_34.png
+
+the gene will be added as a new label in the label list:
+
+.. image:: _static/g3d_35.png
+
+and shown in 3D view:
+
+.. image:: _static/g3d_36.png
+
+update the display style of the label:
+
+.. image:: _static/g3d_37.png
+
+updated view of the label:
+
+.. image:: _static/g3d_38.png
+
+Labeling by region
+~~~~~~~~~~~~~~~~~~
+
+User can also manully type a region for highlighting:
+
+.. image:: _static/g3d_39.png
+
+the added label by region search by also be updated in the menu control:
+
+.. image:: _static/g3d_40.png
+
+the view after added region label:
+
+.. image:: _static/g3d_41.png
+
+Upload a file for labeling
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+A text file contains list of regions/gene symbols can also be uploaded for batch labeling, as shown below, the text file contains content::
+
+    CYP4A22
+    chr10:96796528-96829254
+    CYP2A6
+    CYP3A4
+    chr1:47223509-47276522
+    CYP1A2
+
+upload this file:
+
+.. image:: _static/g3d_42.png
+
+regions in the file are all labeled:
+
+.. image:: _static/g3d_43.png
+
+Pointing using arrows
+~~~~~~~~~~~~~~~~~~~~~
+
+instead of using shapes for labels, arrows can also be used to pointing the region desired. Choose label style as arrow:
+
+.. image:: _static/g3d_44.png
+
+use either gene search or region labeling:
+
+.. image:: _static/g3d_44.png
+
+the new added label will be displayed under arrow list:
+
+.. image:: _static/g3d_45.png
+
+and displayed in 3d viewer:
+
+.. image:: _static/g3d_46.png
+
+config the style of arrow:
+
+.. image:: _static/g3d_47.png
+
+updated arrow style in the viewer:
+
+.. image:: _static/g3d_48.png
+
+Interactivity on tracks
+-----------------------
+
+From certain track types like gene and HiC track, users can choose to display gene or HiC anchors on 3D structure directly. As shown below, the tooltip of the gene has ``Show in 3D`` button, click it will add this gene to the label list and highlight it in 3D view:
+
+.. image:: _static/g3d_49.png
+
+.. image:: _static/g3d_50.png
+
+Clicking any dimond on a HiC track will also bring the ``Show in 3D`` button, click it will add both anchors of this contact to the arrow list by default:
+
+.. image:: _static/g3d_51.png
+
+.. image:: _static/g3d_52.png
+
+arrows pointing both anchors will be displayed in 3D view (there are 2 models in this structure, patenal and maternal, so 4 arrows displayed here): 
+
+.. image:: _static/g3d_53.png
 
 Numerical painting on 3D
 ------------------------
@@ -120,6 +241,8 @@ Paint the whole genome is also doable, click the `Paint genome` button:
 
 .. image:: _static/g3d_22.png
 
+.. note:: by default the color gradient uses the min and max values from the bigwig file, users can also set the min and max value manually by unchecking the ``auto scale`` option.
+
 Click the `Remove paint` button will remove the painting.
 
 

diff --git a/docs/_static/boxplot1.png b/docs/_static/boxplot1.png
diff --git a/docs/_static/boxplot2.png b/docs/_static/boxplot2.png
diff --git a/docs/_static/boxplot3.png b/docs/_static/boxplot3.png
diff --git a/docs/_static/g3d_11.png b/docs/_static/g3d_11.png
diff --git a/docs/_static/g3d_17.png b/docs/_static/g3d_17.png
diff --git a/docs/_static/g3d_3.png b/docs/_static/g3d_3.png
diff --git a/docs/_static/g3d_31.png b/docs/_static/g3d_31.png
diff --git a/docs/_static/g3d_32.png b/docs/_static/g3d_32.png
diff --git a/docs/_static/g3d_33.png b/docs/_static/g3d_33.png
diff --git a/docs/_static/g3d_34.png b/docs/_static/g3d_34.png
diff --git a/docs/_static/g3d_35.png b/docs/_static/g3d_35.png
diff --git a/docs/_static/g3d_36.png b/docs/_static/g3d_36.png
diff --git a/docs/_static/g3d_37.png b/docs/_static/g3d_37.png
diff --git a/docs/_static/g3d_38.png b/docs/_static/g3d_38.png
diff --git a/docs/_static/g3d_39.png b/docs/_static/g3d_39.png
diff --git a/docs/_static/g3d_4.png b/docs/_static/g3d_4.png
diff --git a/docs/_static/g3d_40.png b/docs/_static/g3d_40.png
diff --git a/docs/_static/g3d_41.png b/docs/_static/g3d_41.png
diff --git a/docs/_static/g3d_42.png b/docs/_static/g3d_42.png
diff --git a/docs/_static/g3d_43.png b/docs/_static/g3d_43.png
diff --git a/docs/_static/g3d_44.png b/docs/_static/g3d_44.png
diff --git a/docs/_static/g3d_45.png b/docs/_static/g3d_45.png
diff --git a/docs/_static/g3d_46.png b/docs/_static/g3d_46.png
diff --git a/docs/_static/g3d_47.png b/docs/_static/g3d_47.png
diff --git a/docs/_static/g3d_48.png b/docs/_static/g3d_48.png
diff --git a/docs/_static/g3d_49.png b/docs/_static/g3d_49.png
diff --git a/docs/_static/g3d_5.png b/docs/_static/g3d_5.png
diff --git a/docs/_static/g3d_50.png b/docs/_static/g3d_50.png
diff --git a/docs/_static/g3d_51.png b/docs/_static/g3d_51.png
diff --git a/docs/_static/g3d_52.png b/docs/_static/g3d_52.png
diff --git a/docs/_static/g3d_53.png b/docs/_static/g3d_53.png
diff --git a/docs/datahub.rst b/docs/datahub.rst
@@ -494,6 +494,21 @@ After right clicking on the track you can click **More Information** and see the
         "date collected": "May 7 2016"
     }
 
+queryEndPoint
+~~~~~~~~~~~~~
+
+*Optional*. Most time this parameter will be used with geneAnnotation track. When users deal with custom genome, or genome not listed in NCBI
+or Ensembl database, gene search link would not work, so in such case, user can specify a custom database to query detailed information. For example,
+for some trypanosome genome, gene search should be queried through TriTryDB, we can define the track like this then::
+
+    {
+        type: "geneAnnotation",
+        name: "gene",
+        label: "TriTrypDB genes",
+        genome: "TbruceiLister427",
+        queryEndpoint: { name: "TriTrypDB", endpoint: "https://tritrypdb.org/tritrypdb/app/search?q=" },
+    }
+
 options
 ~~~~~~~
 
@@ -542,6 +557,12 @@ yMin
 .. important:: If you need the track to be in *fixed* scale, you need to specify ``yScale`` to *fixed*
                besides of set ``yMax`` and ``yMin``.
 
+group
+^^^^^
+
+Numerical tracks can be grouped to same group, tracks from same group will share y-axis scale settings. For example, when 2 tracks are
+in one group, the y-axis will both set to max value of current views of both tracks. Users can find one example data hub with ``group`` settings from here: https://wangftp.wustl.edu/~dli/test/a-group.json
+
 scoreScale/scoreMax/scoreMin
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 

diff --git a/docs/index.rst b/docs/index.rst
@@ -23,6 +23,7 @@ WashU Epigenome Browser
     dynamic
     3d
     image
+    stats
     installation
     add
     faq

diff --git a/docs/installation.rst b/docs/installation.rst
@@ -23,6 +23,35 @@ Start the browser
 That's it! You are done with your mirror site.
 The browser is now accessible from http://localhost:3000/browser.
 
+Example commands for installation on a RHEL system
+--------------------------------------------------
+
+.. code-block:: bash
+
+   $ cat /etc/redhat-release 
+    Red Hat Enterprise Linux Server release 7.9 (Maipo)
+    # remove system nodejs (optional)
+    sudo yum remove nodejs
+    #install n for node version control
+    curl -L https://git.io/n-install | bash
+    source .bashrc
+    $ node -v
+    v14.17.0
+
+    # get the browser code go to frontend folder
+    git clone https://github.com/lidaof/eg-react.git
+    cd eg-react/frontend/
+    npm install --force
+    npm install react-app-rewired
+    npm start
+
+    # if get error like: System limit for number of file watchers reached, run this command below
+
+    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+    # details see: https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached
+
+
 Setup your own backend API (optional)
 -------------------------------------
 

diff --git a/docs/stats.rst b/docs/stats.rst
@@ -0,0 +1,18 @@
+Statistical Tracks
+==================
+
+boxplot
+-------
+
+``boxplot`` is a track type that show data as boxplots. It accepts numberical data (:ref:`bigWig` or :ref:`bedGraph`) as track files. 
+To submit a `boxplot` track, it' same as submit a numerical track, instead choose `boxplot` from the track type dropdown menu:
+
+.. image:: _static/boxplot1.png
+
+The default view after submit a boxplot track:
+
+.. image:: _static/boxplot2.png
+
+Right clicking the track brings the configuration menu, from which window size, height, box and line colors etc can be customized:
+
+.. image:: _static/boxplot3.png
diff --git a/docs/tracks.rst b/docs/tracks.rst
@@ -292,6 +292,8 @@ Currently there are two types of numerical tracks:
 * bigWig_
 * bedGraph_
 
+.. _bigWig:
+
 bigWig
 ~~~~~~
 
@@ -300,6 +302,8 @@ Please check the `UCSC bigWig`_ page to learn more about this format.
 
 .. _`UCSC bigWig`: https://genome.ucsc.edu/goldenpath/help/bigWig.html
 
+.. _bedGraph:
+
 bedGraph
 ~~~~~~~~