Skip to content
Snippets Groups Projects
Select Git revision
  • 940dfba7de4a138fec01fc72e2db6281b2d0adfe
  • development default
  • production protected
  • bugfixing
  • polishing
  • update
  • security_patch
7 results

ui-panels.component.html

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    ui-panels.component.html 10.50 KiB
    <p>
        The Drugst.One sidebar consists of different panels which can be individually
        integrated or excluded to fit your websites needs. If desired, the complete
        sidebar can be deactivated by setting the parameter 'showSidebar' to 'false'
        in the config. In the following, each panel and its functionality is
        described.
    </p>
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_sidebar.png"
                    class="rounded"
                    alt="Drugst.one sidepanel"
            />
            <figcaption class="figure-caption">
                The Drugst.One sidebar holds various panels providing different features. Panels can be retracted or
                expanded.
            </figcaption>
        </figure>
    </div>
    <app-doc-subsubheader
            text="Detail View"
            id="panel_id_view"
    ></app-doc-subsubheader>
    <p>
        The detail view shows the node information of the currently selected network component. The
        name and the group of the gene will be displayed here. If a gene can be found
        by Drugst.One in its database, the information will be complemented by
        information from different databases. If a tissue is selected, the exact
        measured expression value will be displayed here when the gene is selected. If
        the gene cab be found in the Drugst.One database and thus is available for
        selection, a button to toggle the selection status fo the gene will be
        displayed.
    </p>
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_detail.png"
                    class="rounded"
                    alt="Drugst.one detail panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One detail panel with content for the CFTR gene.
            </figcaption>
        </figure>
    </div>
    <app-doc-subsubheader
            text="Network Overview"
            id="panel_network_overview"
    ></app-doc-subsubheader>
    <p>
        The overview panel shows a summary of the currently displayed network
        consisting of the numbers of edges and nodes.
    </p>
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_network-overview.png"
                    class="rounded"
                    alt="Drugst.one overview panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One overview panel for a small network.
            </figcaption>
        </figure>
    </div>
    
    <app-doc-subsubheader
            text="Query Node"
            id="panel_query_node"
    ></app-doc-subsubheader>
    <p>
        This panel allows searching nodes in the network. A search bar allows
        filtering the nodes in the network and assists the user with an autocomplete
        function. The query functionality is especially valuable for large and complex
        networks.
    </p>
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_query.png"
                    class="rounded"
                    alt="Drugst.one query panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One query panel with a search for 'cystic fibrosis' showing the CTFR gene.
            </figcaption>
        </figure>
    </div>
    
    <app-doc-subsubheader
            text="Connect Genes"
            id="panel_connect_genes"
    ></app-doc-subsubheader>
    <p>
        The 'Connect Genes' panel offers the option to connect the genes in the
        network with one click. The buttons start a
        <a href="/doc#multi_steiner_trees">Multi-Steiner</a> algorithm on all genes in
        the network or the selected genes. The resulting network find connections
        between the seed genes if any exist.
    </p>
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_connect-genes.png"
                    class="rounded"
                    alt="Drugst.one connect genes panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One connect genes panel as a shortcut for 'drug target search'.
            </figcaption>
        </figure>
    </div>
    <app-doc-subsubheader
            text="Quick Drug Search"
            id="panel_simple_analysis"
    ></app-doc-subsubheader>
    <p>
        The 'Quick Drug Search' panel allows to search for drug candidates with one
        click. It starts a
        <a href="/doc#multi_steiner_trees">Multi-Steiner</a> algorithm on all genes in
        the network or the selected genes, similar to the 'Connect Genes' function. In
        a second step, Drugst.One will execute a
        <a href="/doc#closeness_centrality">Closeness Centrality</a> algorithm on the
        resulting network, finding drug candidates that are related to the original
        seed genes.
    </p>
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_quick-drugs.png"
                    class="rounded"
                    alt="Drugst.one quick drug search panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One quick drug search panel with shortcuts for a whole drug repurposing run.
            </figcaption>
        </figure>
    </div>
    
    <app-doc-subsubheader
            text="Analysis"
            id="panel_analysis"
    ></app-doc-subsubheader>
    <p>
        The analysis panel gives the user three ways to analyze the selected seed
        genes. The <b>'drug target search'</b> allows to select algorithms that will
        find genes related to the seed genes. It depends on the selected algorithm, if
        the algorithm will try to find genes in between the seed genes or if the
        algorithm searches for new genes in close proximity to the seed genes. These
        genes can extend existing disease module or, if seen in the context of drug
        repurposing, represent putative drug targets. The <b>'drug search'</b> works
        similar, but the algorithms will return a list of putative drugs in the
        network neighborhood of the seed genes. Lastly, the
        <b>'enrichment analysis'</b> will export the list of selected genes either to
        <a href="https://biit.cs.ut.ee/gprofiler/gost" target="_blank">g:Profiler</a> or <a
            href="https://digest-validation.net" target="_blank">DIGEST</a>
        which offer different evaluation, enrichment, profiling and conversion methods. Another option is to search for
        selected proteins in NDEx integrated Query (<a href="https://www.ndexbio.org/iquery/" target="_blank">iQuery</a>) to
        show curated pathways with the same participants.
    </p>
    <p>
        For more information about the algorithm see the
        <a href="/doc#implementation_algorithms">section about algorithms</a>.
    </p>
    
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_analysis.png"
                    class="rounded"
                    alt="Drugst.one analysis panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One analysis panel with full configuration option for 'drug target' and 'drug' searches and
                redirects to external resources.
            </figcaption>
        </figure>
    </div>
    
    <app-doc-subsubheader text="Tasks" id="panel_tasks"></app-doc-subsubheader>
    <p>
        The task list offers an overview over the tasks and indicates the used
        algorithm, the status of the Task ('running', 'done', 'failed') and a
        timestamp. While the tasks should never fail, in the case of an error and the
        task status 'failed', a short error message will be displayed to inform the
        user. In this case, please <a href="/doc#contact_us">reach out to us</a> with
        the displayed message. In the task list, tasks will be listed chronologically
        from newest to oldest. A click on a task in this list opens the
        <a href="/doc#drugstone_ui_analysis_window">analysis window</a> for this task.
        Lastly, tasks that are not needed anymore can be deleted by the user
        individually or all together by clicking the button 'Delete All' at the bottom
        of the list.
    </p>
    
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_tasks.png"
                    class="rounded"
                    alt="Drugst.one tasks panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One tasks panel from which previously ran analysis tasks can be loaded.
            </figcaption>
        </figure>
    </div>
    
    <app-doc-subsubheader
            text="Selection"
            id="panel_selection"
    ></app-doc-subsubheader>
    <p>
        This panel shows a list of all selected genes. Labels and the group are
        displayed for each genes to give the user an overview over their current
        selection. Individual genes or the complete selection can be removed here. Genes can be manually selected by
        double-clicking nodes in the network, checking boxes in the according tabular view, or by using the 'rectangular
        select' function, which can be used by pressing <kbd>shift</kbd> and then holding the left mouse button down while
        dragging the cursor over the network. Options for selection expansion are provided though the 'Add First neighbors'
        and 'Add Connected Components' buttons, that use the current selection list as input.
    </p>
    
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_selection.png"
                    class="rounded"
                    alt="Drugst.one selection panel"
            />
            <figcaption class="figure-caption">
                The Drugst.One selection panel after using the 'rectangle select' function to manually select a group of
                genes.
            </figcaption>
        </figure>
    </div>
    
    <app-doc-subsubheader
            text="Views"
            id="views"
    ></app-doc-subsubheader>
    <p>
        The views panel shows a list of all created views. A view is a subnetwork
        based on a selection of other networks. The user can create a view by
        selecting a network and a selection of genes in the network. The view will
        then be created and displayed in the network panel. The user can also delete
        views from the list. The view list is saved in the browser's local storage
        and will be restored when the user returns to the page.
    </p>
    
    <div class="figure-frame">
        <figure class="figure">
            <img
                    height="200px"
                    src="/assets/doc/ui_view.png"
                    class="rounded"
                    alt="Drugst.one selection panel"
            />
            <figcaption class="figure-caption">
                The list of created views, so subnetworks based on selections of other networks.
            </figcaption>
        </figure>
    </div>