feat: minimal_mode for iframe embedding (#138)

hms-dbmi · May 16, 2024 · d1c1969 · d1c1969
1 parent 4d0191d
commit d1c1969
Show file tree

Hide file tree

Showing 5 changed files with 1,138 additions and 623 deletions.
diff --git a/src/App.css b/src/App.css
@@ -224,6 +224,7 @@ a:hover {
     border: 1px solid grey;
     position: absolute;
     left: 3px;
+    scroll-margin-top: 50px;
 }
 
 .nav-dropdown:focus {
@@ -747,3 +748,263 @@ a:hover {
     opacity: 1;
     background-color: #7aaded;
 }
+
+.track-mouseover-menu {
+    z-index: 999;
+}
+
+/* Styles for the variant view controls */
+.variant-view-controls {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    justify-content: center;
+    left: 3px;
+
+    .chromosome-select {
+        position: relative;
+        height: auto;
+        left: 0px;
+    }
+    .gene-search {
+        position: relative;
+        left: 0px;
+        padding: 0px;
+        width: auto;
+        height: auto;
+        display: flex;
+
+        svg {
+            position: absolute;
+            top: 50%;
+            transform: translate(0px, -50%);
+            left: 8px;
+            margin: auto;
+            margin-left: 0px;
+        }
+        input {
+            position: relative;
+            left: 0;
+            margin-left: 0;
+            border: none;
+            width: 180px;
+            padding-left: 35px;
+        }
+    }
+    .directional-controls {
+        display: flex;
+        margin: auto 0px auto 16px;
+        gap: 16px;
+        .control-group {
+            display: flex;
+            .control {
+                position: relative;
+                left: 0px;
+                margin-left: 0px;
+                line-height: 28px;
+            }
+        }
+    }
+}
+
+/* Minimal Mode styles */
+.minimal_mode {
+    .gosling-panel {
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .sample-label {
+        left: 300px;
+        top: 8px;
+    }
+
+    .navigation-buttons {
+        position: fixed;
+        z-index: 998;
+        display: flex;
+        flex-direction: column;
+        top: 3px;
+        left: 3px;
+    }
+
+    .navigation-button {
+        background-color: #f6f6f6;
+        cursor: pointer;
+        font-size: 1rem;
+        font-family: Inter;
+        height: 40px;
+        width: 210px;
+        padding: 2px 10px;
+        border: 1px solid #d3d3d3;
+    }
+
+    .navigation-button:hover:not(:disabled) {
+        background-color: #ebebeb;
+    }
+    .navigation-button:active:not(:disabled) {
+        background-color: #e6e4e4;
+    }
+    .navigation-button:first-of-type {
+        border-radius: 8px 8px 0px 0px;
+    }
+    .navigation-button:last-of-type {
+        border-radius: 0px 0px 8px 8px;
+    }
+
+    /* Force scrollbar to show */
+    ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        width: 10px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.5);
+        box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+    }
+    ::-webkit-scrollbar:hover {
+        cursor: pointer;
+    }
+
+    /* Styles for the navigation on the right side of visualization */
+    .external-links {
+        position: absolute;
+        z-index: 998;
+        height: auto;
+        width: auto;
+        top: 3px;
+        right: 12px;
+
+        .external-links-nav {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .open-in-chromoscope-link {
+                background-color: #f6f6f6;
+                font-size: 0.9rem;
+                font-family: Inter;
+                font-weight: 400;
+                display: flex;
+                height: 35px;
+                justify-content: center;
+                border: 1px solid #d3d3d3;
+                border-radius: 8px;
+
+                .link-group {
+                    margin: auto;
+
+                    .external-link-icon {
+                        margin: auto;
+                        margin-left: 8px;
+                        fill: black;
+                        stroke: black;
+                    }
+                }
+            }
+
+            .open-in-chromoscope-link:hover {
+                text-decoration: none;
+                cursor: pointer;
+                background-color: #ebebeb;
+            }
+
+            .open-in-chromoscope-link:active {
+                background-color: #e6e4e4;
+            }
+
+            .export-links {
+                border-radius: 4px;
+                margin-top: 4px;
+
+                .export-dropdown {
+                    height: auto;
+                    background-color: #f6f6f6;
+                    right: 0px;
+                    border-radius: 8px;
+                    border: 1px solid #d3d3d3;
+                    transition: all 100ms;
+                    overflow: hidden;
+
+                    .export-button {
+                        width: 210px;
+                        height: 35px;
+                        border-radius: inherit;
+                        border: 0px solid;
+                        font-weight: 400;
+                        background-color: transparent;
+
+                        .export-title {
+                            font-size: 0.9rem;
+                            font-family: Inter;
+                        }
+
+                        .button.triangle-down {
+                            width: 11px;
+                            height: 7px;
+                            margin-left: 8px;
+                        }
+                    }
+
+                    .export-button:hover {
+                        cursor: pointer;
+                        background-color: #ebebeb;
+                    }
+
+                    .export-button:active {
+                        background-color: #e6e4e4;
+                    }
+
+                    .nav-list {
+                        list-style-type: none;
+                        padding: 0px 10px;
+                        display: flex;
+                        flex-direction: row;
+                        height: 50px;
+                        background-color: white;
+                        margin: 0px 8px 8px 8px;
+                        border-radius: 3px;
+
+                        .nav-list-item {
+                            display: flex;
+                            margin: auto;
+                        }
+
+                        .title-btn {
+                            display: flex;
+                            position: relative;
+                            width: 25px;
+                            height: 25px;
+                            margin-left: 0px;
+                        }
+
+                        .title-btn.png {
+                            padding: 0px;
+                            border: none;
+                            background-color: transparent;
+                        }
+                    }
+                }
+
+                .export-dropdown.open {
+                    background-color: #ebebeb;
+                    border-radius: 8px;
+                    border: 1px solid #c3c3c3;
+                    transition: all 100ms;
+
+                    .export-button {
+                        border: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .variant-view-controls {
+        left: 50%;
+        transform: translate(-50%, 0px);
+    }
+}