Hover effect and Data Anonymization module

WWW/anon_assets/custom.css

@@ -0,0 +1,290 @@
+/* custom.css */
+
+/* -----------------------------------------------------------------------
+   0) Base reset + scope
+   ----------------------------------------------------------------------- */
+.anon-root,
+.anon-root *,
+.anon-root *::before,
+.anon-root *::after {
+  box-sizing: border-box;
+}
+
+.anon-root {
+  width: 100%;
+  min-height: 85vh;
+  position: relative;
+  overflow: hidden;              /* keep module self-contained */
+  font-family: Arial, sans-serif;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Allow children to shrink properly (important for scroll containers) */
+.anon-root .container-fluid,
+.anon-root .row,
+.anon-root [class*="col-"],
+.anon-root .tab-content,
+.anon-root .tab-pane,
+.anon-root .tab-pane.active {
+  min-height: 0 !important;
+  min-width: 0 !important;
+}
+
+/* -----------------------------------------------------------------------
+   1) Dashboard container (landing removed)
+   ----------------------------------------------------------------------- */
+.anon-root .anon-dashboard {
+  min-height: 85vh;
+}
+
+/* tab content should not force the whole page to grow */
+.anon-root .anon-dashboard .tab-content {
+  min-height: 0 !important;
+}
+
+/* -----------------------------------------------------------------------
+   2) Layout heights (make the anonymization dashboard row fixed-height)
+   ----------------------------------------------------------------------- */
+/* Targets the row inside the Dashboard tabPanel */
+.anon-root .anon-dashboard .tab-pane.active > .row {
+  height: calc(100vh - 160px);   /* adjust if your top header spacing differs */
+  overflow: hidden !important;
+}
+
+/* LEFT PANEL: the primary vertical scroller */
+.anon-root [id$="left-panel"] {
+  height: 100%;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  padding-right: 8px;
+}
+
+/* left scrollbar styling */
+.anon-root [id$="left-panel"]::-webkit-scrollbar { width: 8px; }
+.anon-root [id$="left-panel"]::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 4px; }
+.anon-root [id$="left-panel"]::-webkit-scrollbar-track { background: transparent; }
+
+/* RIGHT PANEL: fill height and split 50/50 */
+.anon-root [id$="right-panel"] {
+  height: 100%;
+  overflow: hidden !important;
+}
+
+/* Right containers stretch to full height */
+.anon-root .right-containers {
+  height: 100% !important;
+  min-height: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 12px !important;
+  overflow: hidden !important;
+}
+
+/* Each box gets equal share */
+.anon-root .right-box {
+  flex: 1 1 0 !important;       /* equal split */
+  min-height: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+
+  background: #ffffff;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+}
+
+/* Headers */
+.anon-root .right-header {
+  flex: 0 0 auto !important;
+  padding: 10px 12px;
+  border-bottom: 1px solid #eeeeee;
+  background: #ffffff;
+  z-index: 2;
+}
+
+.anon-root .right-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+/* Body becomes internal scroll container */
+.anon-root .right-body {
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  padding: 10px 12px;
+}
+
+/* Preview table wrapper: allow scroll (both directions if needed) */
+.anon-root .table-wrap {
+  height: 100%;
+  min-height: 0 !important;
+  overflow: auto !important;
+}
+
+.anon-root table {
+  width: 100% !important;
+  border-collapse: collapse;
+}
+
+/* -----------------------------------------------------------------------
+   3) Risk summary cards
+   ----------------------------------------------------------------------- */
+.anon-root .risk-summary-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  align-items: start;
+}
+
+.anon-root .summary-card {
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #fafafa;
+}
+
+/* -----------------------------------------------------------------------
+   4) Gauges
+   ----------------------------------------------------------------------- */
+.anon-root .gauge .gauge-value,
+.anon-root .gauge .gauge-label {
+  display: none !important;
+}
+
+.anon-root #preview-gauges .gauge-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.anon-root #preview-gauges h4 {
+  margin: 0 0 6px 0;
+}
+
+/* -----------------------------------------------------------------------
+   5) Copy buttons (module-scoped)
+   ----------------------------------------------------------------------- */
+.anon-root button[id^="copy_"] {
+  float: right;
+  font-size: 12px;
+  background-color: #e0e0e0;
+  border: none;
+  border-radius: 5px;
+  padding: 6px 10px;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
+  cursor: pointer;
+  margin-bottom: 10px;
+  position: relative;
+  z-index: 10;
+}
+
+/* -----------------------------------------------------------------------
+   6) Inline suppress icon button
+   ----------------------------------------------------------------------- */
+.anon-root .qid-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.anon-root .icon-button {
+  background: #dc3545;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  padding: 0;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.anon-root .icon-button:hover { opacity: 0.9; }
+.anon-root .icon-button .fa { pointer-events: none; }
+
+/* -----------------------------------------------------------------------
+   7) Leaflet map sizing
+   ----------------------------------------------------------------------- */
+.anon-root [id$="geo_map"] {
+  height: 420px;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* -----------------------------------------------------------------------
+   8) Download note
+   ----------------------------------------------------------------------- */
+.anon-root .download-note {
+  font-size: 12px;
+  color: #444444;
+  background: #f7f7f7;
+  border: 1px dashed #dddddd;
+  border-radius: 8px;
+  padding: 8px;
+  margin-top: 8px;
+}
+
+/* -----------------------------------------------------------------------
+   9) Dark mode (toggle should add/remove .dark-mode on .anon-root)
+   ----------------------------------------------------------------------- */
+.anon-root.dark-mode {
+  background-color: #1e1e1e !important;
+  color: #ffffff;
+}
+
+.anon-root.dark-mode .right-box {
+  background: #2a2a2a;
+  border-color: #444444;
+}
+
+.anon-root.dark-mode .right-header {
+  background: #2a2a2a;
+  border-bottom-color: #444444;
+}
+
+.anon-root.dark-mode .summary-card {
+  background: #2e2e2e;
+  border-color: #444444;
+}
+
+.anon-root.dark-mode button[id^="copy_"] {
+  background-color: #444444;
+  color: #ffffff;
+}
+
+/* -----------------------------------------------------------------------
+   10) Responsive adjustments
+   ----------------------------------------------------------------------- */
+@media (max-width: 992px) {
+  /* On smaller screens, let the page flow naturally */
+  .anon-root .anon-dashboard .tab-pane.active > .row {
+    height: auto;
+    overflow: visible !important;
+  }
+
+  .anon-root [id$="left-panel"] {
+    height: auto;
+    max-height: none;
+  }
+
+  .anon-root [id$="right-panel"] {
+    height: auto;
+  }
+
+  .anon-root .right-containers {
+    height: auto !important;
+  }
+
+  .anon-root .risk-summary-grid {
+    grid-template-columns: 1fr;
+  }
+}

WWW/clipboard.min.js

@@ -0,0 +1,7 @@
+/*!
+ * clipboard.js v2.0.11
+ * https://clipboardjs.com/
+ * 
+ * Licensed MIT © Zeno Rocha
+ */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"=