Skip to content

Commit d1c1969

Browse files
crfmccrfmc
authored
feat: minimal_mode for iframe embedding (#138)
1 parent 4d0191d commit d1c1969

File tree

5 files changed

+1138
-623
lines changed

5 files changed

+1138
-623
lines changed

‎src/App.css

+261
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ a:hover {
224224
border: 1px solid grey;
225225
position: absolute;
226226
left: 3px;
227+
scroll-margin-top: 50px;
227228
}
228229

229230
.nav-dropdown:focus {
@@ -747,3 +748,263 @@ a:hover {
747748
opacity: 1;
748749
background-color: #7aaded;
749750
}
751+
752+
.track-mouseover-menu {
753+
z-index: 999;
754+
}
755+
756+
/* Styles for the variant view controls */
757+
.variant-view-controls {
758+
position: absolute;
759+
display: flex;
760+
flex-direction: row;
761+
height: 30px;
762+
justify-content: center;
763+
left: 3px;
764+
765+
.chromosome-select {
766+
position: relative;
767+
height: auto;
768+
left: 0px;
769+
}
770+
.gene-search {
771+
position: relative;
772+
left: 0px;
773+
padding: 0px;
774+
width: auto;
775+
height: auto;
776+
display: flex;
777+
778+
svg {
779+
position: absolute;
780+
top: 50%;
781+
transform: translate(0px, -50%);
782+
left: 8px;
783+
margin: auto;
784+
margin-left: 0px;
785+
}
786+
input {
787+
position: relative;
788+
left: 0;
789+
margin-left: 0;
790+
border: none;
791+
width: 180px;
792+
padding-left: 35px;
793+
}
794+
}
795+
.directional-controls {
796+
display: flex;
797+
margin: auto 0px auto 16px;
798+
gap: 16px;
799+
.control-group {
800+
display: flex;
801+
.control {
802+
position: relative;
803+
left: 0px;
804+
margin-left: 0px;
805+
line-height: 28px;
806+
}
807+
}
808+
}
809+
}
810+
811+
/* Minimal Mode styles */
812+
.minimal_mode {
813+
.gosling-panel {
814+
overflow-y: scroll;
815+
overflow-x: hidden;
816+
}
817+
818+
.sample-label {
819+
left: 300px;
820+
top: 8px;
821+
}
822+
823+
.navigation-buttons {
824+
position: fixed;
825+
z-index: 998;
826+
display: flex;
827+
flex-direction: column;
828+
top: 3px;
829+
left: 3px;
830+
}
831+
832+
.navigation-button {
833+
background-color: #f6f6f6;
834+
cursor: pointer;
835+
font-size: 1rem;
836+
font-family: Inter;
837+
height: 40px;
838+
width: 210px;
839+
padding: 2px 10px;
840+
border: 1px solid #d3d3d3;
841+
}
842+
843+
.navigation-button:hover:not(:disabled) {
844+
background-color: #ebebeb;
845+
}
846+
.navigation-button:active:not(:disabled) {
847+
background-color: #e6e4e4;
848+
}
849+
.navigation-button:first-of-type {
850+
border-radius: 8px 8px 0px 0px;
851+
}
852+
.navigation-button:last-of-type {
853+
border-radius: 0px 0px 8px 8px;
854+
}
855+
856+
/* Force scrollbar to show */
857+
::-webkit-scrollbar {
858+
-webkit-appearance: none;
859+
width: 10px;
860+
}
861+
862+
::-webkit-scrollbar-thumb {
863+
width: 10px;
864+
border-radius: 4px;
865+
background-color: rgba(0, 0, 0, 0.5);
866+
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
867+
}
868+
::-webkit-scrollbar:hover {
869+
cursor: pointer;
870+
}
871+
872+
/* Styles for the navigation on the right side of visualization */
873+
.external-links {
874+
position: absolute;
875+
z-index: 998;
876+
height: auto;
877+
width: auto;
878+
top: 3px;
879+
right: 12px;
880+
881+
.external-links-nav {
882+
display: flex;
883+
flex-direction: column;
884+
justify-content: space-between;
885+
886+
.open-in-chromoscope-link {
887+
background-color: #f6f6f6;
888+
font-size: 0.9rem;
889+
font-family: Inter;
890+
font-weight: 400;
891+
display: flex;
892+
height: 35px;
893+
justify-content: center;
894+
border: 1px solid #d3d3d3;
895+
border-radius: 8px;
896+
897+
.link-group {
898+
margin: auto;
899+
900+
.external-link-icon {
901+
margin: auto;
902+
margin-left: 8px;
903+
fill: black;
904+
stroke: black;
905+
}
906+
}
907+
}
908+
909+
.open-in-chromoscope-link:hover {
910+
text-decoration: none;
911+
cursor: pointer;
912+
background-color: #ebebeb;
913+
}
914+
915+
.open-in-chromoscope-link:active {
916+
background-color: #e6e4e4;
917+
}
918+
919+
.export-links {
920+
border-radius: 4px;
921+
margin-top: 4px;
922+
923+
.export-dropdown {
924+
height: auto;
925+
background-color: #f6f6f6;
926+
right: 0px;
927+
border-radius: 8px;
928+
border: 1px solid #d3d3d3;
929+
transition: all 100ms;
930+
overflow: hidden;
931+
932+
.export-button {
933+
width: 210px;
934+
height: 35px;
935+
border-radius: inherit;
936+
border: 0px solid;
937+
font-weight: 400;
938+
background-color: transparent;
939+
940+
.export-title {
941+
font-size: 0.9rem;
942+
font-family: Inter;
943+
}
944+
945+
.button.triangle-down {
946+
width: 11px;
947+
height: 7px;
948+
margin-left: 8px;
949+
}
950+
}
951+
952+
.export-button:hover {
953+
cursor: pointer;
954+
background-color: #ebebeb;
955+
}
956+
957+
.export-button:active {
958+
background-color: #e6e4e4;
959+
}
960+
961+
.nav-list {
962+
list-style-type: none;
963+
padding: 0px 10px;
964+
display: flex;
965+
flex-direction: row;
966+
height: 50px;
967+
background-color: white;
968+
margin: 0px 8px 8px 8px;
969+
border-radius: 3px;
970+
971+
.nav-list-item {
972+
display: flex;
973+
margin: auto;
974+
}
975+
976+
.title-btn {
977+
display: flex;
978+
position: relative;
979+
width: 25px;
980+
height: 25px;
981+
margin-left: 0px;
982+
}
983+
984+
.title-btn.png {
985+
padding: 0px;
986+
border: none;
987+
background-color: transparent;
988+
}
989+
}
990+
}
991+
992+
.export-dropdown.open {
993+
background-color: #ebebeb;
994+
border-radius: 8px;
995+
border: 1px solid #c3c3c3;
996+
transition: all 100ms;
997+
998+
.export-button {
999+
border: none;
1000+
}
1001+
}
1002+
}
1003+
}
1004+
}
1005+
1006+
.variant-view-controls {
1007+
left: 50%;
1008+
transform: translate(-50%, 0px);
1009+
}
1010+
}

0 commit comments

Comments
 (0)