dataset dropdown

js/ui/text_buttons.js

@@ -357,6 +357,16 @@ const make_ist_img_layer_button_callback = (
 
     toggle_slider(inst_slider, is_visible);
 
+    if (!viz_state.img.visible_layers) {
+      viz_state.img.visible_layers = new Set();
+    }
+
+    if (is_visible) {
+      viz_state.img.visible_layers.add(text);
+    } else {
+      viz_state.img.visible_layers.delete(text);
+    }
+
     viz_state.obs_store.deck_check.set({
       ...viz_state.obs_store.deck_check.get(),
       image_layers: false,

js/ui/ui_containers.js

@@ -379,6 +379,73 @@ export const make_ist_ui_container = (
       'row'
     );
 
+    const datasetDropdown = (() => {
+      const options = viz_state.dataset_options || [];
+
+      if (!Array.isArray(options) || options.length === 0) {
+        return null;
+      }
+
+      const wrapper = document.createElement('div');
+      wrapper.style.display = 'flex';
+      wrapper.style.alignItems = 'center';
+      wrapper.style.gap = '4px';
+      wrapper.style.marginLeft = '6px';
+      wrapper.style.fontSize = '12px';
+
+      const label = document.createElement('span');
+      label.textContent = '';
+      label.style.color = '#47515b';
+
+      const select = document.createElement('select');
+      select.style.fontSize = '12px';
+      select.style.padding = '2px 4px';
+      select.style.borderRadius = '6px';
+      select.style.border = '1px solid #d3d3d3';
+      select.style.background = '#fff';
+      select.style.cursor = 'pointer';
+      select.style.maxWidth = '120px';
+      select.style.whiteSpace = 'nowrap';
+      select.style.textOverflow = 'ellipsis';
+      select.style.overflow = 'hidden';
+
+      options.forEach((option) => {
+        const opt = document.createElement('option');
+        opt.value = option.base_url;
+        opt.textContent = option.name || option.base_url;
+        select.appendChild(opt);
+      });
+
+      const currentBaseUrl = viz_state.model?.get('base_url');
+      if (currentBaseUrl) {
+        select.value = currentBaseUrl;
+      }
+
+      select.addEventListener('change', () => {
+        const selectedOption = options.find(
+          (opt) => opt.base_url === select.value
+        );
+        if (!selectedOption || !viz_state.model?.set) {
+          return;
+        }
+
+        viz_state.model.set('base_url', selectedOption.base_url);
+        viz_state.model.set(
+          'dataset_name',
+          selectedOption.name || selectedOption.base_url
+        );
+
+        if (viz_state.model.save_changes) {
+          viz_state.model.save_changes();
+        }
+      });
+
+      wrapper.appendChild(label);
+      wrapper.appendChild(select);
+
+      return wrapper;
+    })();
+
     if (isChromium) {
       make_button(
         spatial_toggle_container,
@@ -442,6 +509,10 @@ export const make_ist_ui_container = (
       );
     }
 
+    if (datasetDropdown) {
+      spatial_toggle_container.appendChild(datasetDropdown);
+    }
+
     viz_state.containers.image.appendChild(spatial_toggle_container);
 
     const get_slider_by_name = (img, name) => {
@@ -513,7 +584,11 @@ export const make_ist_ui_container = (
         toggle_slider(slider, viz_image_layers)
       );
 
-      toggle_visibility_image_layers(layers_obj, viz_image_layers);
+      if (viz_image_layers && viz_state.img.enforce_visibility) {
+        viz_state.img.enforce_visibility();
+      } else {
+        toggle_visibility_image_layers(layers_obj, viz_image_layers);
+      }
 
       refresh_layer(viz_state, layers_obj, 'image_layers');