7df99a27a400ec5627663c3a0692e9ab7d04796c
max
  Fri May 9 09:25:54 2025 -0700
fix: null on recent genes, split screen titles, scroll bar coming up without reason, zooming on split screen, checkbox on both sides updating on change event, hide checkbox when not in split screen mode

diff --git src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css
index cfe7298..0380d79 100644
--- src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css
+++ src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css
@@ -1,590 +1,590 @@
 /* tsneViewer.js class definitions */
 /* * {padding: 0; margin: 0} */ /* important, otherwise precise placement is impossible */ 
 /* body { font-family: Roboto, sans-serif } */
 body { font-family: Arial,Helvetica,sans-serif; overflow:hidden; line-height:1.0}
 canvas { user-select: none }
 
 section { font-weight: bold; padding-top: 5px; padding-bottom: 5px }
 
 #tpExprViewTitle { 
         background-color: #eee;
         padding: 5px;
         height: 25px;
         /*border-bottom: 1px solid black; */
 }
 
 #tpExprView { 
         position: absolute;
         z-index: 100;
         display: block;
         background-color: white;
         top: 1%;
         left: 1%;
         height: 99%;
         width: 99%;
         border: 1px solid grey;
 }
 
 #tpGeneExprMetaLabel {
         margin-left: 6px;
         margin-right: 6px;
 }
 
 #tpExprViewPlot {
         display:flex;
         flex-direction: row;
         flex-flow: wrap;
         height:100%;
         padding-top:10px;
         overflow: scroll;
 }
 
 #tpExprViewContent {
         padding: 6px;
         height: 100%;
 }
 
 #tpGeneExprLabel {
         margin-right: 6px;
 }
 
 .tpTitle {
         z-index: 100;
 }
 
 .tpGeneExprCombo {
         margin-left: 6px;
         margin-right: 6px;
 }
 
 /* selectize dropdown triangle is black by default, make light grey like chosen's triangle */
 .selectize-control.single .selectize-input:after {
         border-color: #888 transparent transparent transparent;
 }
 
 #tpLegendBar { 
         cursor:default; 
         padding-left: 2px; 
         border-left: 1px solid #D7D7D7; 
         height:100%;
 }
 
 .tpDatasetPane { 
         padding: 5px !important; 
         padding-left: 10px !important; 
         overflow: hidden;
         line-height: 120%; 
 }
 
 #mpTitle {
     cursor : default;
     left : 8px;
     width : max-content;
     display : block;
     position : absolute;
     font-size : 16px;
     color: white;
     text-shadow:
        1px 1px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
 }
 
 .sliderContainer {
         position : absolute;
         display: grid;
         grid-template-columns: 45px 120px 15px;
         background: rgba(255,255,255,0.5);
 }
 
 .sliderLabel {
     font-size: 11px;
     z-index: 10;
     font-weight: bold;
 }
 
 .tpLegend { font-size:13px; /* border: 2px solid transparent; */ cursor:default; word-wrap: break-word; clear:both}
 .tpLegendHl { background-color: #ccc; color: black; }
 .tpHint { font-weight:normal; line-height:1.4; font-size: 80%}
 #tpLegendHeader { background-color:#eee; color: #777 }
 #tpLegendTitle { font-weight: bold }
 #tpLegendSubTitle { font-size: 80%; font-style: italic }
 #tpLegendCol1 { padding-left: 1px}
 #tpLegendCol2 { float: right; padding-right: 2px}
 .tpLegendSelect { outline: 2px solid black }
 .tpLegendLabel { display:inline; user-select: none; }
 /*.tpLegendCount { display:inline-block; position: absolute; right: 4px; color: #888} */
 .tpLegendCount { display:inline-block; float: right; color: #888} 
 .tpLegend .tpLegendCheckbox { margin-right: 2px; margin-top: 2px}
 .tpGrey { color: #bbb }
 
 
 .ui-helper-reset { font-size: 12px}
 .ui-tabs { padding: 0 }
 .ui-tabs { padding: 0 }
 .ui-tabs-nav { border: 0 } /* color control should not be separated from tabs */
 .ui-tabs .ui-tabs-panel { padding-top:5px; border:1px solid lightgray; padding:0} /* for marker panels */
 .ui-tabs-anchor { padding: 3px }
 .ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 3px }
 
 .tab-pane { padding: .4em 1em; border: 1px solid lightgrey }
 .ui-corner-all { border-radius: 0px } /* dialogs */
 #tpOpenDatasetButton { border-radius: 4px }
 .ui-menu-item { font-size:13px }
 .ui-menu .ui-menu-item-wrapper { padding: 1px 1em 1px .4em; }
 .ui-tooltip { font-size: 13px }
 #tpButtonInfo { height: 24px; top: 1px; margin-right: 8px; border-radius: 4px; padding-top: 4px }
 .tpDialogInput { margin-left: 12px; margin-top: 5px; margin-bottom: 12px; }
 #tpDialog { z-index: 1001; }}
 
 .tpIconButton { 
         padding: 1px 2px 1px 2px; 
         border-radius: 0; 
         height:28px; 
         width: 28px; 
         cursor: default
 }
 
 .tpRibbonButton {
         background-color: #ccc;
         padding:  1px 2px 1px 2px; 
         border-radius: 4px;
         height: 24px;
         border: 1px solid #c5c5c5;
         vertical-align: top;
         text-align: center;
         margin-right: 8px;
         top: 3px;
         position: relative;
         padding-left: 4px;
         padding-right: 4px;
 }
 
 .tpClicked { background-color: #AAA }
 .tpClicked:hover { background-color: #AAA }
 .btn-primary.load-dataset {float: right; margin-left: 10px; color: white; font-size: 12px; margin-top: -4px;}
 .list-group-item.active>.btn-primary {color: #337ab7;background-color: #fff;}
 .list-group-item .badge {margin-top: -2px;}
 
 .link,
 .tpDatasetPane a { 
         text-decoration: underline; 
         color: #0000EE; 
         cursor: pointer; 
 }
 
 .tpSameLink {
     text-decoration: underline; 
     cursor: pointer; 
     color: darkgrey; 
     float: right
 }
 
 .tpDatasetPane {
         padding-top: 10px !important;
         border-radius: 4px;
 }
 
 .tpDatasetPane h4 {
         margin-top: 0;
 }
 
 /* modify bootstrap tooltip defaults */
 .tooltip .tooltip-inner { 
         min-width: 220px; 
         border-radius: 0; 
         background-opacity: 50%;
         text-align: left
 }
 
  .ui-widget-header { background: white} 
 .ui-state-active { background: green }
 
 .ui-progressbar { position: relative; }
 .ui-progressbar-value { background-color: #888 }
 
 .tpProgressLabel {
     position: absolute;
     left: 40%;
     top: 4px;
     font-weight: bold;
 }
 
 /* expression progress bar only */
 .ui-progressbar {
         position: relative;
 }
 .progress-label {
         position: absolute;
         left: 50%;
         top: 4px;
         font-weight: bold;
         /*text-shadow: 1px 1px 0 #fff;*/
 }
 
 
 .context-menu-item { 
         font-size: 13px; 
         padding: 3px 
 }
 
 .contextmenu-customwidth { 
         width: 200px !important; 
         min-width: 200px !important
 }
 
 /* .tpGeneTable { 
         table-layout: fixed; 
         white-space: nowrap; 
         border-collapse:collapse 
 }
 */
 
 .tpGeneBarCell { 
         font-size: 12px; 
         color: black; 
         padding-left:1px; 
         padding-right:1px; 
         border: 1px solid #AAA;
         background: #F6;
         /*color:#AAAAAA; */
         display: inline-block;
 }
 
 .tpGeneBarCellSelected { 
         outline: 1px solid black 
 }
 
 #tpPeakListTitle { 
         padding-top: 8px;
         padding-bottom: 6px;
         padding-left: 3px;
 }
 
 #tpPeakList { 
         border-top: 1px solid #CCC; 
         border-bottom: 1px solid #CCC; 
         border-left: 1px solid #CCC; 
         margin-left: 4px;
         padding: 3px;
         padding-left: 4px;
         background-color: #EEE;
         height: 30%;
         overflow-y: scroll;
 }
 
 .tpPeak > label {
         font-weight: normal;
 }
 
 #tpPeakList > div { 
         background-color: #EEE;
 }
 
 input[type=checkbox], input[type=radio] {
         vertical-align : -2px; /* https://stackoverflow.com/a/2806786/233871 */
 }
 
 
 .tpSidebarHeader { font-weight: bold; padding-left: 4px; font-size: 16px; padding-top: 4px; height: 25px; background-color: white; text-align: center}
 
 #tpLeftSidebar { 
         border-right: 1px solid #D7D7D7; 
         height: 100%
 }
 #tpLeftSidebar .ui-tabs-anchor {
         /* jquery UI tabs label */
         font-size: 14px
 }
 
 #tpSideMeta { padding-left: 2px}
 
 #tpMetaPanel { 
         background-color: white;
         height: 100%;
         overflow-y: auto;
 }
 
 #tpLegendRows {
         width: 100%;
         overflow-y: auto;
         /* height: 100%; */
 }
 
 #tpLegendContent { 
         width: 100%;
         height: 100%;
         overflow-y: scroll;
 }
 
 #tpLeftTabs { 
         border: 0; 
         height: 100%;
 }
 
 #tpGeneTab, #tpAnnotTab, #tpLayoutTab { 
         border-top: 1px solid #AAA;
         padding:0;
         padding-top: 5px;
         height: 100%;
-        overflow-y: scroll;
+        overflow-y: auto;
 }
 
 .tpMetaBox { font-size: 13px; cursor:default; overflow:hidden }
 .tpMetaHover { 
         color: white; 
         background-color: #333 !important;
 }
 .tpMetaLabel { font-weight: bold; padding-left: 2px}
 .tpMetaLabelGrey { color: #666666}
 .tpMetaMultiVal { font-style: italic; color: gray }
 .tpMetaHistLabel { text-decoration: underline; color: blue }
 .tpMetaValue { height: 1.3em; padding-left: 3px; background-color:#EEE; }
 .tpMetaSelect { outline: 2px solid black; background-color: #DEDEDE }
 .tpMetaValueSelect { background-color: #CCC}
 .tpMetaPerc { color:grey; float:right }
 .tpMetaSpark { float:right }
 
 #tpMetaTip { padding: 2px; border: 1px solid grey; background: white; display: none; position: absolute}
 .tpMetaTipBar { display: inline-block; position: absolute; left:0; background-color: #AAAAAA; z-index: 2 }
 .tpMetaTipPerc { display: inline-block; position: relative; left:0; z-index: 3; }
 .tpMetaTipName { display: inline-block; position: relative; left:20px; z-index: 3; }
 
 /* #tpSelectBox { border: 1px dotted black; } */
 
 button { line-height: 12px }
 
 .btn-default { background: linear-gradient(#fff 20%, #f7f7f7 60%, #f5f5f5 100%) }
 
 #tpButtonBar {display: block; }
 .tpButton { border-radius: 0; font-size: 15px; display: inline-block; background-color: #f6f6f6; border: 1px solid #c5c5c5; margin: 1px 3px 1px 1px; padding: 1px 3px 1px 3px; cursor:default; vertical-align: middle; user-select: none; }
 .tpButton:active { background-color: #888; }
 .tpButton active { background-color: #888; }
 .tpButton:hover { background-color: #eee }
 
 .tpButtonInactive { background-color: #EEE; user-select: none; color:#AAA; cursor:default}
 
 .tpMenu { z-index: 999; background: white; display:none; position:absolute}
 
 .sp-replacer { height: 17px; width: 18px; border: none; padding: 0px; margin-right: 5px; background-color: white; vertical-align: top }
 .sp-preview { height: 17px; width: 18px; border: none }
 .sp-dd { line-height: 11px; display:none }
 
 /* make bootstrap's navbar smaller */
 .navbar-xs { min-height:28px; height: 28px; }
 .navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
 .navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
 /* bootstraps badges are too dark */
 .list-group-item.active>.badge { background-color: darkgrey; color:white }
 /* bootstrap's small buttons have a lot of padding, for the toolbar, that's too much */
 .noPad {padding:0 2 0 2}
 
 /* make the navbar dividers smaller */
 .half-rule { 
     margin-left: 0;
     text-align: left;
     margin-top: 0;
     margin-bottom: 0;
 }
 
 #tpToolBar { margin-left: 5px; margin-top: 1px}
 
 #tpCanvas { }
 
 .tpToolBarItem { display:inline-block; white-space: nowrap }
 .tpToolBarItem > label { margin-right: 7px; display: inline} 
 
 .tpLeftSideItem { 
         display:inline-block; 
         white-space: nowrap;
         width:100%
 }
 .tpLeftSideItem > label { 
         margin-right: 7px; 
         display: inline; 
         display:block; 
         margin-bottom:8px; 
         padding-top: 8px;
         padding-left:4px
 } 
 #tpLayoutCombo_chosen {
         width:100%;
         padding-left:4px;
         padding-right:2px;
 }
 
 .tpCombo { display: inline-block} 
 
 
 
 /* adapt the chosen.js style a little */
 .chosen-container-single .chosen-single { border-radius: 0; }
 .tpCombo > a { border-radius: 0;}
 
 
 /* same for select2 */
 .select2-container .select2-selection--single { 
         border-radius: 0;
         background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
         padding: 2px
 }
 /* and selectize */
 .selectize-input {
         border-radius: 0;
         background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
         padding: 3px 3px;
         padding-left: 5px;
         overflow: visible; /* grrr!! otherwise baseline is ignored in tpToolBarItem */
         min-height: 0px;
 }
 #tpToolBar > div.selectize-control.tpCombo.single {
         border-color: #aaaaaa;
         display: inline-block;
 }
 
 /* for links in the open dataset dialog */
 .ui-widget-content .tab-content a { color: blue !important; text-decoration: underline; }
 
 /* make bootstrap look more like jquery tabs */
 .nav-tabs > li.active > a { 
         background-color: transparent; 
         border:0;
         color : black;
 }
 
 .gradientBackground { background-color: #f6f6f6 }
 
 .selectize-control.single .selectize-input { background: none; background-color: #f6f6f6 }
 .selectize-input { background: none; background-color: #f6f6f6; box-shadow: none }
 
 /* make bootstrap's navbar show menus on mouse hover */
 /* ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } */
 
 /* flying-sheep's suggestions */
 .ui-dialog-titlebar { border: none }
 a.list-group-item { background-color: #EEE }
 .nav-tabs > li > a { border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #EEE; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom:4px}
 .nav-tabs > li.active > a { background-color: #337ab7; color: white; border: 1px solid #EEE }
 /* .nav-tabs > li { background-color: #E9E9E9 } */
 .ui-corner-all { border-radius: 4px }
 .nav-tabs > li > a:hover { background-color: #EEE;}
 .nav-tabs > li.active > a:hover  { background-color: #397cba; color: white }
 .nav-tabs > li.active > a:focus  { background-color: #397cba; color: white }
 .nav-tabs { border-bottom: none}
 
 /*
 .nav-tabs>li>a:hover { background-color: #DDD; color: black ; }
 .nav-tabs>li.active>a:hover { background-color: #DDD; color: black ; }
 .nav-tabs>li>a:focus { background-color: #DDD; color: black ; }
 .nav-tabs>li.active>a:focus { background-color: #DDD; color: black ; }
 */
 
 .chosen-container-single .chosen-single { box-shadow: none; background: none; background-color: #f6f6f6 }
 
 /* ----- FOR SORTTABLE.JS ------- */
 th[role=columnheader]:not(.no-sort) {
         cursor: pointer;
 }
 
 th[role=columnheader]:not(.no-sort):after {
         content: '';
         float: right;
         margin-top: 7px;
         border-width: 0 4px 4px;
         border-style: solid;
         border-color: #404040 transparent;
         visibility: hidden;
         opacity: 0;
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;
 }
 
 th[aria-sort=ascending]:not(.no-sort):after {
         border-bottom: none;
         border-width: 4px 4px 0;
 }
 
 th[aria-sort]:not(.no-sort):after {
         visibility: visible;
         opacity: 0.4;
 }
 
 th[role=columnheader]:not(.no-sort):hover:after {
         visibility: visible;
         opacity: 1;
 }
 
 /* END: ----- FOR SORTTABLE.JS ------- */
 
 .ui-resizable-n {
         cursor : row-resize;
 }
 .ui-resizable-handle:hover {
         opacity : 0.5;
         background-color: grey;
 
 }
 
 #tpOpenDialogTabs > ul > li  {
         /*  !important here is the right choice. cannot use ID, cannot get specificty high enough with classes
         // Read: https://css-tricks.com/when-using-important-is-the-right-choice/ */
         border: 1px solid #D7D7D7 !important; 
         border-radius: 4px !important ;
         font-size: 14px !important; 
         font-weight: bold !important;
         line-height: 120% !important; 
 }
 
 .tpDatasetTab.ui-tabs-anchor{ 
         /*  !important here is the right choice. cannot use ID, cannot get specificty high enough with classes
         // Read: https://css-tricks.com/when-using-important-is-the-right-choice/ */
         overflow:hidden !important; 
         padding: 5px !important; 
 }
 
 
 /* obscure bugfix: https://stackoverflow.com/questions/31584544/jquery-ui-dialog-on-resizing-shrinks-the-content-of-the-dialog */
 .ui-dialog, .ui-dialog-content {
     box-sizing: content-box;
 }
 
 /* for google material icons, http://google.github.io/material-design-icons/#icon-font-for-the-web */
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
     local('MaterialIcons-Regular'),
     url(MaterialIcons-Regular.woff2) format('woff2'),
     url(MaterialIcons-Regular.woff) format('woff'),
     url(MaterialIcons-Regular.ttf) format('truetype');
 }
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
 
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;
 
   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
   font-feature-settings: 'liga';
 }