-chore: add genome and variant view images/content

-style: style content

src/App.css

@@ -1058,6 +1058,83 @@ a:hover {
             .modal-dialog {
                 width: 100%;
             }
+            .modal-body {
+                max-height: 80vh;
+                overflow-y: scroll;
+                padding: 24px 36px;
+                .section {
+                    /* margin-bottom: 20px; */
+
+                    h4 {
+                        font-size: 1.25rem;
+                        font-weight: 600;
+                        margin-bottom: 4px;
+                    }
+
+                    hr {
+                        color: #cdcdcd;
+                        border-width: 1px;
+                        margin: 0px;
+                    }
+                    hr.header {
+                        color: #b0b0b0;
+                        border-width: 2px;
+                    }
+
+                    .block {
+                        margin: 32px 0px;
+                        display: flex;
+                        min-height: 120px;
+                    }
+                    .block.with-image {
+                        justify-content: flex-start;
+                        height: auto;
+
+                        .image-container.two-image {
+                            display: flex;
+                            flex-direction: column;
+                        }
+
+                        img {
+                            width: 300px;
+                            height: fit-content;
+                            margin: auto 0px;
+                            border: 2px solid #ebebeb;
+                            object-fit: contain;
+                        }
+
+                        .text {
+                            display: flex;
+                            width: 400px;
+                            flex-direction: column;
+                            justify-content: space-evenly;
+                            margin-left: 60px;
+
+                            p {
+                                margin-bottom: 0px;
+
+                                span.text-button-example {
+                                    display: inline-flex;
+                                    justify-content: center;
+                                    background-color: #efefef;
+                                    width: 25px;
+                                    height: 25px;
+                                    border-radius: 10px 0px 0px 10px;
+                                    border: 1px solid lightgray;
+
+                                    b {
+                                        line-height: 20px;
+                                        margin: auto auto 5px;
+                                    }
+                                }
+                                span.text-button-example.right {
+                                    border-radius: 0px 10px 10px 0px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }

src/App.tsx

@@ -794,10 +794,8 @@ function App(props: RouteComponentProps) {
                                     <p>When showing large chromosomal regions, Chromoscope selects 500 indels in each visible tile (see documentation on sampling).</p>
                                 </div>
                             </div>
-                            <hr />
                         </div>
                     </div>
-                    <hr />
                     <div class='section interactions'>
                         <h4>Interactions</h4>
                         <hr class="header" />

src/ui/GenomeViewModal.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import genome_interactions_1 from '../script/img/modal_images/genome_view/interactions_1.png';
+import genome_interactions_2 from '../script/img/modal_images/genome_view/interactions_2.png';
+import genome_interactions_3 from '../script/img/modal_images/genome_view/interactions_3.png';
+import genome_interactions_4 from '../script/img/modal_images/genome_view/interactions_4.png';
 
 export const GenomeViewModal = () => {
     return (
@@ -28,18 +31,34 @@ export const GenomeViewModal = () => {
                                         <img src={genome_interactions_1} alt="" />
                                         <div className="text">
                                             <p>
-                                                <b>Circle with a dot</b> - denotes bi-allelic gene loss.
+                                                <b>Click and drag</b> the blue selection brush to highlight regions of
+                                                the genome.
                                             </p>
+                                        </div>
+                                    </div>
+                                    <div className="block with-image">
+                                        <img src={genome_interactions_2} alt="" />
+                                        <div className="text">
                                             <p>
-                                                <b>Circle without a dot</b> - denotes one mutation in gene.
+                                                <b>Click and drag</b> the edges of the selection brush to resize it.
                                             </p>
                                         </div>
                                     </div>
-                                    <hr />
                                     <div className="block with-image">
-                                        <img src={genome_interactions_1} alt="" />
+                                        <img src={genome_interactions_3} alt="" />
                                         <div className="text">
-                                            <p>Driver mutations are also annotated by name in the genome view.</p>
+                                            <p>
+                                                <b>Hover</b> over a structural variant to see detailed information.
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="block with-image">
+                                        <img src={genome_interactions_4} alt="" />
+                                        <div className="text">
+                                            <p>
+                                                <b>Click</b> on a structural variant to inspect breakpoints in other
+                                                views.
+                                            </p>
                                         </div>
                                     </div>
                                 </div>

src/ui/VariantViewModal.tsx

@@ -1,4 +1,9 @@
 import React from 'react';
+import variant_interpretation_1 from '../script/img/modal_images/variant_view/interpretation_1.png';
+import variant_interactions_1 from '../script/img/modal_images/variant_view/interactions_1.png';
+import variant_interactions_2 from '../script/img/modal_images/variant_view/interactions_2.png';
+import variant_interactions_3 from '../script/img/modal_images/variant_view/interactions_3.png';
+import variant_interactions_4 from '../script/img/modal_images/variant_view/interactions_4.png';
 
 export const VariantViewModal = () => {
     return (
@@ -17,7 +22,83 @@ export const VariantViewModal = () => {
                         </h1>
                         <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
-                    <div className="modal-body"></div>
+                    <div className="modal-body">
+                        <div className="popover-content">
+                            <div className="section interpretation">
+                                <h4>Interpretation</h4>
+                                <hr className="header" />
+                                <div className="section-content">
+                                    <div className="block with-image">
+                                        <img src={variant_interpretation_1} alt="" />
+                                        <div className="text">
+                                            <p>
+                                                A structural variant may leave a footprint on the copy number profile
+                                                and may perturb genes.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="section interactions">
+                                <h4>Interactions</h4>
+                                <hr className="header" />
+                                <div className="section-content">
+                                    <div className="block with-image">
+                                        <img src={variant_interactions_1} alt="" />
+                                        <div className="text">
+                                            <p>
+                                                <b>Hover</b> - over a structural variant to see detailed information.
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="block with-image">
+                                        <img src={variant_interactions_2} alt="" />
+                                        <div className="text">
+                                            <p>
+                                                <b>Click</b> - on a structural variant to show its breakpoints in the
+                                                Read View.
+                                            </p>
+                                            <p>
+                                                The positions of breakpoints are highlighted by dashed, vertical lines.
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="block with-image">
+                                        <img src={variant_interactions_3} alt="" />
+                                        <div className="text">
+                                            <p>
+                                                <b>Zoom in and out</b> on chromosomal regions by clicking the{' '}
+                                                <span className="text-button-example">
+                                                    <b>+</b>
+                                                </span>{' '}
+                                                and{' '}
+                                                <span className="text-button-example right">
+                                                    <b>-</b>
+                                                </span>{' '}
+                                                buttons.
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="block with-image">
+                                        <img src={variant_interactions_4} alt="" />
+                                        <div className="text">
+                                            <p>
+                                                <b>Pan left and right</b> around the current region by clicking the{' '}
+                                                <span className="text-button-example">
+                                                    <b>&larr;</b>
+                                                </span>{' '}
+                                                and{' '}
+                                                <span className="text-button-example right">
+                                                    <b>&rarr;</b>
+                                                </span>{' '}
+                                                buttons.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>