Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: minimal_mode for iframe embedding #138

Merged
merged 19 commits into from
May 16, 2024
Merged

feat: minimal_mode for iframe embedding #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
4fb3530
-feat: check for minimal_mode url parameter
crfmc Mar 15, 2024
84fc1aa
fix: adjust padding in minimal mode
crfmc Mar 19, 2024
dd045e3
-feat: create object for vis padding
crfmc Mar 19, 2024
702ac68
style: navigation button styles
crfmc Mar 26, 2024
399f5ba
-style: interaction styles for buttons
crfmc Mar 26, 2024
7153266
feat: keep buttons enabled/remove section state
crfmc Apr 2, 2024
d2276ed
Merge remote-tracking branch 'origin/master' into crfmc/minimal_mode
crfmc Apr 9, 2024
b1ebccb
fix: use boolean to track minimal mode activation
crfmc Apr 9, 2024
0eb0ea5
Merge remote-tracking branch 'origin/master' into crfmc/minimal_mode
crfmc Apr 23, 2024
9247681
feat: add triangle down icon
crfmc Apr 29, 2024
e07a17f
-feat: Dropdown component for export buttons
crfmc Apr 29, 2024
f51d78a
feat: add spacing argument to generateSpec()
crfmc Apr 30, 2024
a566fe9
-feat: pass spacing variable
crfmc Apr 30, 2024
bacfad8
-style: correct styling for placeholder input
crfmc Apr 30, 2024
72d63ac
Merge remote-tracking branch 'origin/master' into crfmc/minimal_mode
crfmc May 8, 2024
49395f3
-feat: export dropdown
crfmc May 8, 2024
2c35c23
-feat: add open in chromoscope link button
crfmc May 8, 2024
fabc541
fix: push track mouseover-menu to top z-index
crfmc May 16, 2024
5c87b6c
fix: remove typo
crfmc May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
261 changes: 261 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ a:hover {
border: 1px solid grey;
position: absolute;
left: 3px;
scroll-margin-top: 50px;
}

.nav-dropdown:focus {
Expand Down Expand Up @@ -747,3 +748,263 @@ a:hover {
opacity: 1;
background-color: #7aaded;
}

Copy link
Member

@sehilyi sehilyi May 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see now that, since the gene search menu is in the middle, it occasionally overlaps with tooltips when I hover on an SV in the genome view. Making tooltips visible.

Suggested change
.track-mouseover-menu {
z-index: 999;
}

.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);
}
}
Loading
Loading