log to supabase

app/static/js/attacks.js

@@ -16,6 +16,9 @@ class AttackSimulator {
 
         // Slider updates
         this.setupSliderUpdates();
+
+        // ✅ Add this (bind events for whatever tab is active on load)
+        this.bindAttacksPageEvents();
     }
 
     setupSliderUpdates() {
@@ -68,6 +71,131 @@ class AttackSimulator {
         }
     }
 
+    bindAttacksPageEvents(attackType = null) {
+      // Bind only within the currently active attack content (prevents binding to hidden/nonexistent nodes)
+      const container = attackType
+        ? document.getElementById(`${attackType}-content`)
+        : document.querySelector('.attack-content.active');
+
+      if (!container) return;
+
+      // Helper: bind once per element per handler-key
+      const bindOnce = (el, key, eventName, fn) => {
+        if (!el) return;
+        const flag = `bound_${key}`;
+        if (el.dataset[flag] === '1') return;
+        el.addEventListener(eventName, fn);
+        el.dataset[flag] = '1';
+      };
+
+      // ---- Membership tab ----
+      bindOnce(
+        container.querySelector('#privacy-level-slider'),
+        'privacy_level_slider',
+        'input',
+        () => this.updateMembershipDemo()
+      );
+
+      bindOnce(
+        container.querySelector('#update-privacy-btn'),
+        'update_privacy_btn',
+        'click',
+        (e) => {
+          // If you have a button on the Attacks page, prefer binding here over inline onclick
+          e.preventDefault();
+          this.updateMembershipDemo();
+        }
+      );
+
+      // ---- Reconstruction tab ----
+      bindOnce(
+        container.querySelector('#recon-clipping-slider'),
+        'recon_clipping_slider',
+        'input',
+        () => this.updateReconstructionAttack()
+      );
+
+      bindOnce(
+        container.querySelector('#recon-noise-slider'),
+        'recon_noise_slider',
+        'input',
+        () => this.updateReconstructionAttack()
+      );
+
+      bindOnce(
+        container.querySelector('#run-reconstruction-btn'),
+        'run_reconstruction_btn',
+        'click',
+        (e) => {
+          e.preventDefault();
+          this.updateReconstructionAttack();
+          updateCurrentReconstructionExamples();
+        }
+      );
+
+      // ---- Inversion tab ----
+      bindOnce(
+        container.querySelector('#inversion-privacy-slider'),
+        'inversion_privacy_slider',
+        'input',
+        () => {
+          const privacySlider = container.querySelector('#inversion-privacy-slider');
+          const classSelect = container.querySelector('#inversion-class-select');
+          if (!privacySlider || !classSelect) return;
+
+          const sliderValue = parseInt(privacySlider.value);
+          const privacyLevel = 11 - sliderValue;
+          drawInvertedFeatures(classSelect.value, privacyLevel);
+        }
+      );
+
+      bindOnce(
+        container.querySelector('#run-inversion-btn'),
+        'run_inversion_btn',
+        'click',
+        (e) => {
+          e.preventDefault();
+          // If you want: call your existing function or inline the logic
+          runInversionAttack();
+        }
+      );
+
+      // ---- Property tab ----
+      bindOnce(
+        container.querySelector('#run-property-btn'),
+        'run_property_btn',
+        'click',
+        (e) => {
+          e.preventDefault();
+          runPropertyAttack();
+        }
+      );
+
+      // ---- Linkage tab ----
+      bindOnce(
+        container.querySelector('#linkage-quality-slider'),
+        'linkage_quality_slider',
+        'input',
+        () => this.updateLinkageAttack()
+      );
+
+      bindOnce(
+        container.querySelector('#linkage-privacy-slider'),
+        'linkage_privacy_slider',
+        'input',
+        () => this.updateLinkageAttack()
+      );
+
+      bindOnce(
+        container.querySelector('#run-linkage-btn'),
+        'run_linkage_btn',
+        'click',
+        (e) => {
+          e.preventDefault();
+          this.updateLinkageAttack();
+        }
+      );
+    }
 
 
     switchTab(attackType) {
@@ -85,6 +213,9 @@ class AttackSimulator {
 
         // Initialize chart for this tab if needed
         this.initializeTabChart(attackType);
+
+        // ✅ Add this (bind events for the newly activated tab)
+        this.bindAttacksPageEvents(attackType);
     }
 
     initializeCharts() {