Merge pull request #1859 from cvisionai/dev/1858-version-dialog

Closes #1858 (Version Dialog Updates)

ui/src/css/base.css

@@ -98,7 +98,7 @@ summary::marker {
   opacity: 0;
   transition-duration: 0.15s;
   transition-property: opacity;
-  z-index: 1;
+  z-index: 5;
 }
 .background-dimmer.has-open-modal {
   opacity: 100;

ui/src/css/components/annotation.css

@@ -165,7 +165,7 @@ save-dialog {
   transform: scale(0.95);
   transition-duration: 0.25s;
   transition-property: transform, opacity;
-  z-index: 4;
+  z-index: 100;
 }
 save-dialog.is-open {
   opacity: 1;
@@ -192,7 +192,7 @@ modify-track-dialog {
   transform: scale(0.95);
   transition-duration: 0.25s;
   transition-property: transform, opacity;
-  z-index: 4;
+  z-index: 100;
 }
 modify-track-dialog.is-open {
   opacity: 1;
@@ -324,7 +324,6 @@ favorite-button {
 
 .annotation__version-list {
   overflow-y: auto;
-  max-height: 240px;
 }
 
 .annotation__announcement-list {

ui/src/css/components/nav.css

@@ -9,7 +9,7 @@
   transition-duration: 0.25s;
   transition-property: transform;
   width: 420px;
-  z-index: 3;
+  z-index: 100;
 }
 .nav.is-open {
   transform: translateX(100%);

ui/src/css/components/table.css

@@ -276,3 +276,29 @@
   border: 1px solid #a2afcd;
   overflow-wrap: break-word;
 }
+
+.version-table {
+  table-layout: fixed;
+  background-color: var(--color-charcoal--medium-dark);
+}
+.version-table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background-color: var(--color-charcoal--light70);
+}
+.version-table thead {
+  border: 1px solid var(--color-charcoal--light70);
+}
+.version-table tbody tr {
+  border: 1px solid var(--color-charcoal--light70);
+}
+.version-table tbody tr.selected {
+  background-color: var(--color-charcoal--light70);
+}
+.version-table tbody tr:hover {
+  background-color: var(--color-charcoal--light70);
+}
+.version-table td {
+  height: 70px;
+  vertical-align: middle;
+}

ui/src/css/variables.css

@@ -3,11 +3,11 @@
 **/
 :host,
 :root {
-  --color-purple: #696cff;
-  --color-purple50: rgba(var(--color-purple), 0.5);
+  --color-purple: #696cff; /* rgb(105, 108, 255) */
+  --color-purple50: rgba(105, 108, 255, 0.5);
 
-  --color-blue: #1b9ffb;
-  --color-blue50: rgba(var(--color-blue), 0.5);
+  --color-blue: #1b9ffb; /* rgb(27, 159, 251) */
+  --color-blue50: rgba(27, 159, 251, 0.5);
 
   --color-green: #85d81d;
   --color-parakeet-green: #03c04a;
@@ -22,30 +22,27 @@
   --color-teal: rgb(64, 224, 208);
   --color-teal--50: rgba(var(--color-teal), 0.5);
 
-  --color-blue-iris: #4a4eae;
-  --color-blue-iris50: rgba(var(--color-blue-iris), 0.5);
+  --color-blue-iris: #4a4eae; /* rgb(74, 78, 174) */
+  --color-blue-iris50: rgba(74, 78, 174, 0.5);
 
-  --color-white: #ffffff;
-  --color-white--75: rgba(var(--color-white), 0.75);
-  --color-white--50: rgba(var(--color-white), 0.5);
-  --color-white--25: rgba(var(--color-white), 0.25);
+  --color-white: #ffffff; /* rgb(255, 255, 255) */
+  --color-white--75: rgba(255, 255, 255, 0.75);
+  --color-white--50: rgba(255, 255, 255, 0.5);
+  --color-white--25: rgba(255, 255, 255, 0.25);
 
   --color-gray--light: #a2afcd;
   --color-gray--medium: #72809d;
-  --color-gray--dark: #6d7a96;
-  --color-gray--dark50: rgba(var(--color-gray--dark), 0.5);
-
-  --color-charcoal--light: #262e3d;
-  --color-charcoal--light70: rgba(var(--color-charcoal--light), 0.7);
-  --color-charcoal--medium: #151b28;
-  --color-charcoal--medium70: rgba(var(--color-charcoal--medium), 0.7);
-  --color-charcoal--medium-dark: #0d1320;
-  --color-charcoal--medium-dark70: rgba(
-    var(--color-charcoal--medium-dark),
-    0.7
-  );
-  --color-charcoal--dark: #00070d;
-  --color-charcoal--dark70: rgba(var(--color-charcoal--dark), 0.7);
+  --color-gray--dark: #6d7a96; /* rgb(109, 122, 150) */
+  --color-gray--dark50: rgba(109, 122, 150, 0.5);
+
+  --color-charcoal--light: #262e3d; /* rgb(38, 46, 61) */
+  --color-charcoal--light70: rgba(38, 46, 61, 0.7);
+  --color-charcoal--medium: #151b28; /* rgb(21, 27, 40) */
+  --color-charcoal--medium70: rgba(21, 27, 40, 0.7);
+  --color-charcoal--medium-dark: #0d1320; /* rgb(13, 19, 32) */
+  --color-charcoal--medium-dark70: rgba(13, 19, 32, 0.7);
+  --color-charcoal--dark: #00070d; /* rgb(0, 7, 13) */
+  --color-charcoal--dark70: rgba(0, 7, 13, 0.7);
   --color-charcoal--brown: #2e2314;
   --color-charcoal--red: #281d26;
   --color-steel--dark: #3d4147;

ui/src/js/analytics/export/export-page.js

@@ -1719,13 +1719,14 @@ class MainPage extends TatorPage {
     this._selectedMediaIds = [];
 
     var urlParams = new URLSearchParams(window.location.search);
-    var sectionIds = urlParams.get("section");
-    if (sectionIds) {
-      this._selectedSectionIds = sectionIds.split(",").map(Number);
+
+    var mediaIds = urlParams.get("media_id");
+    if (mediaIds) {
+      this._selectedMediaIds = mediaIds.split(",").map(Number);
     } else {
-      var mediaIds = urlParams.get("media_id");
-      if (mediaIds) {
-        this._selectedMediaIds = mediaIds.split(",").map(Number);
+      var sectionIds = urlParams.get("section");
+      if (sectionIds) {
+        this._selectedSectionIds = sectionIds.split(",").map(Number);
       }
     }
 

ui/src/js/annotation/annotation-page.js

@@ -19,11 +19,6 @@ export class AnnotationPage extends TatorPage {
     this._shadow.appendChild(this._loading);
     this._versionLookup = {};
 
-    this._modalDimmer = document.createElement("div");
-    this._modalDimmer.setAttribute("class", "background-dimmer");
-    this._modalDimmer.style.zIndex = 101;
-    this._shadow.appendChild(this._modalDimmer);
-
     document.body.setAttribute("class", "no-padding-bottom");
 
     const header = document.createElement("div");
@@ -822,14 +817,12 @@ export class AnnotationPage extends TatorPage {
 
     this._versionDialog.addEventListener("versionSelect", (evt) => {
       this._loading.style.display = "block";
-      this._modalDimmer.classList.add("has-open-modal");
       this._data
         .setVersion(evt.detail.version, evt.detail.viewables)
         .then(() => {
           this._settings.setAttribute("version", evt.detail.version.id);
           this._canvas.refresh();
           this._loading.style.display = "none";
-          this._modalDimmer.classList.remove("has-open-modal");
         });
       this._browser.version = evt.detail.version;
       this._versionButton.text = evt.detail.version.name;
@@ -1028,17 +1021,17 @@ export class AnnotationPage extends TatorPage {
               }
             }
 
-            // Finde the index of the default version.
-            let selected_version_idx = 0;
+            // Find the index of the default version.
+            let selected_version_id = 0;
             for (const [idx, version] of versions.entries()) {
               if (version.id == default_version) {
                 this._version = this._versionLookup[default_version];
-                selected_version_idx = idx;
+                selected_version_id = idx;
               }
             }
 
             // Initialize version dialog.
-            this._versionDialog.init(versions, selected_version_idx);
+            this._versionDialog.init(versions, selected_version_id);
             if (versions.length == 0) {
               this._versionButton.style.display = "none";
             } else {