4bb9e8caea515342ba98d3871da76cd4ec69916f
chmalee
  Fri May 1 14:10:00 2026 -0700
Initial myVariants implementation: a form on hgTracks where users can enter item details in one of three ways: hgvs/item search, simple bed form, advanced bed form where additional non-bed fields can dynamically created. Allows changing the color of items, writing descriptions, and editing the items after creation. Show overlaps with hardcoded tracks when hgc page is open (not in the hgc dialog). Next commit has implementation of sharing these tracks with other users

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index a791ac4d65a..21c3a4d6edc 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -1274,30 +1274,57 @@
     display: grid;
     grid-template-columns: max-content max-content;
     row-gap: 10px;
 }  
 
 .dialogNewWindowIcon {
     position: absolute;
     right: 1.5em;
     top: 50%;
     width: 19px;
     margin: -10px 0 0 0;
     padding: 1px;
     height: 18px;
 }
 
+.bed-form {
+display: grid;
+grid-template-columns: 1fr 2fr;
+gap: 0.5rem 1rem;
+max-width: 500px;
+margin: 2rem auto;
+font-family: sans-serif;
+}
+
+.bed-form label {
+text-align: right;
+padding-right: 0.5rem;
+}
+
+.bed-form input[type="text"],
+.bed-form input[type="number"],
+.bed-form input[type="color"] {
+width: 100%;
+padding: 0.4rem;
+}
+
+.bed-form button {
+grid-column: span 2;
+padding: 0.6rem;
+font-size: 1rem;
+}
+
 .hgTracksGearIcon {
     position: absolute !important;
     top: 4px;
     left: -25%;
     line-height: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 16px;
     height: 16px;
     cursor: pointer;
     z-index: 10;
 }
 
 .hgTracksCloseIcon {
@@ -1327,30 +1354,70 @@
     color: red;
 }
 
 #hgta_doClearIntersect {
     color: red;
 }
 
 #hgta_doClearUserRegions {
     color: red;
 }
 
 #hgta_doClearSubtrackMerge {
     color: red;
 }
 
+.section-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 12px 0;
+}
+
+.table-section-title {
+  display: inline-block;
+  font-weight: bold;
+  padding: 6px 12px;
+  background: #dcdcdc;
+  border: 1px solid #bbb;
+  border-radius: 4px;
+  white-space: nowrap; /* stays on one line */
+}
+
+.table-scroll-wrapper {
+    overflow-x: auto;
+    flex: 1;
+}
+
+.table-grid {
+  display: grid;
+    grid-auto-flow: row;
+  grid-auto-columns: minmax(120px, auto);
+  gap: 4px;
+}
+
+.table-cell {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  background: #fafafa;
+}
+
+.table-header {
+  background: #e6e6e6;
+  font-weight: bold;
+}
+
 .searchCell {
     white-space: nowrap;
     vertical-align: top;
 }
 
 .searchCell > .flexContainer {
     display: flex;
     flex-direction: column;
     gap: 0.2em;
     min-width: 0;
     max-width: 500px;
 }
 
 .searchBarAndButton {
     display: flex;