67cb546ae004d876b50e6959aef4d6dcf1e3bff0
max
  Fri May 16 10:01:03 2025 -0700
fixing width of buttons

diff --git src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css
index 0380d79..fa0e0d3 100644
--- src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css
+++ src/cbPyLib/cellbrowser/cbWeb/css/cellBrowser.css
@@ -1,590 +1,594 @@
 /* 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%;
 }
 
+.legendButton {
+        width: 40px;
+}
+
 .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: 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';
 }