Enable configuration of visibility of visual elements (edit button, bias tag)

Author: diegochine

client/app.js

@@ -105,6 +105,11 @@ const store = createStore({
     twoWayTable: false,
   },
 
+  visualElements: {
+    editExperimentButton: true,
+    biasTag: true,
+  },
+
   running: {
     cancel: false,
     auto: false,
@@ -161,7 +166,7 @@ const runner = createRunner(store.getState().running, {
   onTick: () => {
     const state = store.getState();
     render(els, state);
-    applySectionVisibility(state);
+    applyVisibility(state);
     activityLogger.maybeLogStatus(state);
   },
   onDone: updateControls,
@@ -249,7 +254,7 @@ function resetSimulation({ reason = 'unknown', logSettings = false } = {}) {
   else resetSingleSimulation();
 
   render(els, store.getState());
-  applySectionVisibility(store.getState());
+  applyVisibility(store.getState());
   syncUiFromState();
 
   const currentState = store.getState();
@@ -313,6 +318,46 @@ function applySectionVisibility(state) {
   }
 }
 
+function applyVisualElementVisibility(state) {
+  const visualElements = state.visualElements || {};
+
+  const showEditExperimentButton = visualElements.editExperimentButton !== false;
+  if (els.openSettings) {
+    els.openSettings.style.display = showEditExperimentButton ? '' : 'none';
+    els.openSettings.hidden = !showEditExperimentButton;
+  }
+
+  const showBiasTag = visualElements.biasTag !== false;
+  if (els.biasSummary) {
+    els.biasSummary.style.display = showBiasTag ? '' : 'none';
+    els.biasSummary.hidden = !showBiasTag;
+  }
+
+  const tagsContainer = els.biasSummary?.parentElement || els.relationshipSummary?.parentElement;
+  if (tagsContainer) {
+    const biasVisible = Boolean(
+      showBiasTag
+      && els.biasSummary
+      && !els.biasSummary.hidden
+      && els.biasSummary.style.display !== 'none',
+    );
+    const relationshipVisible = Boolean(
+      els.relationshipSummary
+      && !els.relationshipSummary.hidden
+      && els.relationshipSummary.style.display !== 'none',
+    );
+
+    const anyVisible = biasVisible || relationshipVisible;
+    tagsContainer.style.display = anyVisible ? '' : 'none';
+    tagsContainer.hidden = !anyVisible;
+  }
+}
+
+function applyVisibility(state) {
+  applySectionVisibility(state);
+  applyVisualElementVisibility(state);
+}
+
 function updateControls() {
   const state = store.getState();
   const autoRunning = state.running.auto;
@@ -669,7 +714,7 @@ function renderEventOptions() {
       });
       const state = store.getState();
       render(els, state);
-      applySectionVisibility(state);
+      applyVisibility(state);
       activityLogger.logSettingsChange(state);
     });
 
@@ -955,7 +1000,7 @@ function initEventListeners() {
     });
     const currentState = store.getState();
     render(els, currentState);
-    applySectionVisibility(currentState);
+    applyVisibility(currentState);
   });
 
   els.heatmap.addEventListener('click', (event) => {
@@ -984,13 +1029,13 @@ function initEventListeners() {
     });
     const updatedState = store.getState();
     render(els, updatedState);
-    applySectionVisibility(updatedState);
+    applyVisibility(updatedState);
   });
 
   window.addEventListener('resize', () => {
     const state = store.getState();
     render(els, state);
-    applySectionVisibility(state);
+    applyVisibility(state);
   });
 }
 
@@ -1025,6 +1070,9 @@ async function init() {
     if (config.sections) {
       draft.sections = { ...draft.sections, ...config.sections };
     }
+    if (config.visualElements) {
+      draft.visualElements = { ...draft.visualElements, ...config.visualElements };
+    }
     draft.rng = createRngFromSeed(draft.seedText);
   });
   syncUiFromState();
@@ -1066,12 +1114,13 @@ async function init() {
 
   initEventListeners();
   updateControls();
-  applySectionVisibility(store.getState());
+  applyVisibility(store.getState());
   activityLogger.logAppStart(store.getState());
 
   // Defer initial render until after layout is complete
   requestAnimationFrame(() => {
     render(els, store.getState());
+    applyVisibility(store.getState());
   });
 }
 

client/config.json

@@ -7,6 +7,10 @@
     "outcomes": ["Pass", "Fail"],
     "probabilities": [0.7, 0.3]
   },
+  "visualElements": {
+    "editExperimentButton": true,
+    "biasTag": true
+  },
   "sections": {
     "barChart": true,
     "convergence": true,
@@ -15,4 +19,3 @@
     "twoWayTable": false
   }
 }
-

client/src/shell/config.js

@@ -6,6 +6,7 @@ const VALID_DEVICES = ['coin', 'die', 'spinner', 'custom'];
 const MAX_CUSTOM_OUTCOMES = 50;
 const VALID_SECTIONS_SINGLE = ['barChart', 'convergence', 'frequencyTable'];
 const VALID_SECTIONS_TWO = ['jointDistribution', 'twoWayTable'];
+const VALID_VISUAL_ELEMENTS = ['editExperimentButton', 'biasTag'];
 
 /**
  * Validates configuration object structure
@@ -106,7 +107,7 @@ function validateCustomDeviceSettings(settings, label) {
   };
 }
 
-function validateConfig(config) {
+export function validateConfig(config) {
   const validated = {};
   const rawConfig = config && typeof config === 'object' ? config : {};
 
@@ -173,6 +174,16 @@ function validateConfig(config) {
   }
   // If sections is missing entirely, don't add it (will use store defaults)
 
+  // Validate visual elements toggles
+  if (rawConfig.visualElements && typeof rawConfig.visualElements === 'object' && !Array.isArray(rawConfig.visualElements)) {
+    const validatedVisualElements = {};
+    for (const key of VALID_VISUAL_ELEMENTS) {
+      const value = rawConfig.visualElements[key];
+      validatedVisualElements[key] = typeof value === 'boolean' ? value : true;
+    }
+    validated.visualElements = validatedVisualElements;
+  }
+
   return validated;
 }
 
@@ -194,6 +205,10 @@ export async function loadConfig() {
     return {
       mode: 'single',
       device: 'coin',
+      visualElements: {
+        editExperimentButton: true,
+        biasTag: true,
+      },
       sections: {
         barChart: false,
         convergence: false,

tests/shell/config.test.js

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { validateConfig } from '../../client/src/shell/config.js';
+
+describe('validateConfig (visualElements)', () => {
+  it('omits visualElements when not provided', () => {
+    const validated = validateConfig({ mode: 'single', device: 'coin' });
+    expect(validated.visualElements).toBeUndefined();
+  });
+
+  it('defaults visualElements keys to true when provided as empty object', () => {
+    const validated = validateConfig({ mode: 'single', device: 'coin', visualElements: {} });
+    expect(validated.visualElements).toEqual({ editExperimentButton: true, biasTag: true });
+  });
+
+  it('supports hiding biasTag via visualElements', () => {
+    const validated = validateConfig({ mode: 'single', device: 'coin', visualElements: { biasTag: false } });
+    expect(validated.visualElements).toEqual({ editExperimentButton: true, biasTag: false });
+  });
+
+  it('ignores visualElements when not an object', () => {
+    const validated = validateConfig({ mode: 'single', device: 'coin', visualElements: 'nope' });
+    expect(validated.visualElements).toBeUndefined();
+  });
+});
+