broadlistening-viewer 0.2.0

data/js/shared/scatter_chart.js

@@ -0,0 +1,250 @@
+import Plotly from "./plotly_shim";
+import { getClusterColor, INACTIVE_COLOR } from "./colors";
+import { escapeHtml } from "./decidim_core_shim";
+import { t } from "./i18n";
+import { wrapText, wrapTextWithLimit } from "./utils";
+class ScatterChart {
+  constructor(container, data, options = {}) {
+    this.container = container;
+    this.arguments = data.arguments || [];
+    this.clusters = data.clusters || [];
+    this.options = {
+      targetLevel: 1,
+      ...options
+    };
+    if (this.options.clusterById) {
+      this.clusterById = this.options.clusterById;
+      this.childrenByParent = this.options.childrenByParent;
+      this.clustersByLevel = this.options.clustersByLevel;
+      this.argumentsByClusterId = this.options.argumentsByClusterId;
+    } else {
+      this.clusterById = /* @__PURE__ */ new Map();
+      this.childrenByParent = /* @__PURE__ */ new Map();
+      this.clustersByLevel = /* @__PURE__ */ new Map();
+      this.argumentsByClusterId = /* @__PURE__ */ new Map();
+      this.buildIndexes();
+    }
+  }
+  buildIndexes() {
+    this.clusterById = new Map(this.clusters.map((c) => [c.id, c]));
+    this.childrenByParent = /* @__PURE__ */ new Map();
+    this.clustersByLevel = /* @__PURE__ */ new Map();
+    for (const cluster of this.clusters) {
+      if (cluster.parent) {
+        if (!this.childrenByParent.has(cluster.parent)) {
+          this.childrenByParent.set(cluster.parent, []);
+        }
+        this.childrenByParent.get(cluster.parent).push(cluster);
+      }
+      const level = cluster.level ?? 0;
+      if (!this.clustersByLevel.has(level)) {
+        this.clustersByLevel.set(level, []);
+      }
+      this.clustersByLevel.get(level).push(cluster);
+    }
+    this.argumentsByClusterId = /* @__PURE__ */ new Map();
+    for (const arg of this.arguments) {
+      for (const clusterId of arg.cluster_ids || []) {
+        if (!this.argumentsByClusterId.has(clusterId)) {
+          this.argumentsByClusterId.set(clusterId, []);
+        }
+        this.argumentsByClusterId.get(clusterId).push(arg);
+      }
+    }
+  }
+  render() {
+    if (this.arguments.length === 0) {
+      this.container.innerHTML = `<p class="text-gray text-center py-8">${escapeHtml(t("common.no_data"))}</p>`;
+      return;
+    }
+    const trace = this.buildTrace();
+    const layout = this.buildLayout();
+    const config = {
+      responsive: true,
+      displayModeBar: true,
+      modeBarButtonsToRemove: ["select2d", "lasso2d", "resetScale2d", "toImage", "zoom2d", "pan2d"],
+      displaylogo: false,
+      scrollZoom: true
+    };
+    Plotly.newPlot(this.container, [trace], layout, config);
+  }
+  buildTrace() {
+    const colors = this.getPointColors();
+    return {
+      x: this.arguments.map((a) => a.x),
+      y: this.arguments.map((a) => a.y),
+      mode: "markers",
+      type: "scattergl",
+      marker: {
+        color: colors,
+        size: 8,
+        opacity: 0.7
+      },
+      text: this.arguments.map((a) => this.formatHoverText(a)),
+      hoverinfo: "text",
+      hovertemplate: "%{text}<extra></extra>",
+      hoverlabel: {
+        align: "left",
+        bgcolor: "white",
+        bordercolor: "#ccc",
+        font: { size: 12, family: "sans-serif" }
+      }
+    };
+  }
+  buildLayout() {
+    const annotations = this.getClusterAnnotations();
+    return {
+      showlegend: false,
+      hovermode: "closest",
+      dragmode: "pan",
+      xaxis: {
+        showgrid: false,
+        zeroline: false,
+        showticklabels: false,
+        title: ""
+      },
+      yaxis: {
+        showgrid: false,
+        zeroline: false,
+        showticklabels: false,
+        title: ""
+      },
+      margin: { l: 10, r: 10, t: 10, b: 10 },
+      annotations,
+      paper_bgcolor: "rgba(0,0,0,0)",
+      plot_bgcolor: "rgba(0,0,0,0)"
+    };
+  }
+  getClusterIdAtLevel(clusterIds, level) {
+    return clusterIds.find((id) => id.startsWith(`${level}_`));
+  }
+  getPointColors() {
+    const { targetLevel, selectedClusterId, filteredArgumentIds, filteredClusterIds, maxLevel, clusterColorMap } = this.options;
+    const colorOf = (id) => clusterColorMap?.get(id) || getClusterColor(id);
+    let childIds;
+    if (selectedClusterId) {
+      const childClusters = this.childrenByParent.get(selectedClusterId) || [];
+      childIds = new Set(childClusters.map((c) => c.id));
+    }
+    return this.arguments.map((arg) => {
+      if (filteredArgumentIds && !filteredArgumentIds.has(arg.arg_id)) {
+        return INACTIVE_COLOR;
+      }
+      const clusterIds = arg.cluster_ids || [];
+      if (filteredClusterIds && maxLevel != null) {
+        const deepestClusterId = this.getClusterIdAtLevel(clusterIds, maxLevel);
+        if (!deepestClusterId || !filteredClusterIds.has(deepestClusterId)) {
+          return INACTIVE_COLOR;
+        }
+        return colorOf(deepestClusterId);
+      }
+      if (selectedClusterId && childIds) {
+        const childId = clusterIds.find((id) => childIds.has(id));
+        if (childId) {
+          return colorOf(childId);
+        }
+        return INACTIVE_COLOR;
+      }
+      const clusterId = this.getClusterIdAtLevel(clusterIds, targetLevel);
+      if (!clusterId) {
+        return INACTIVE_COLOR;
+      }
+      return colorOf(clusterId);
+    });
+  }
+  calculateCentroid(points) {
+    if (points.length === 0) return void 0;
+    const sumX = points.reduce((acc, p) => acc + p.x, 0);
+    const sumY = points.reduce((acc, p) => acc + p.y, 0);
+    return {
+      x: sumX / points.length,
+      y: sumY / points.length
+    };
+  }
+  getClusterAnnotations() {
+    const { targetLevel, selectedClusterId, filteredClusterIds, maxLevel } = this.options;
+    let clustersToShow;
+    if (filteredClusterIds && maxLevel != null) {
+      const maxLevelClusters = this.clustersByLevel.get(maxLevel) || [];
+      clustersToShow = maxLevelClusters.filter((c) => filteredClusterIds.has(c.id));
+    } else if (selectedClusterId) {
+      clustersToShow = this.childrenByParent.get(selectedClusterId) || [];
+    } else {
+      clustersToShow = this.clustersByLevel.get(targetLevel) || [];
+    }
+    return clustersToShow.filter((cluster) => {
+      const points = this.argumentsByClusterId.get(cluster.id);
+      return points && points.length > 0;
+    }).map((cluster) => {
+      const points = this.argumentsByClusterId.get(cluster.id);
+      const centroid = this.calculateCentroid(points);
+      if (!centroid) return void 0;
+      return {
+        x: centroid.x,
+        y: centroid.y,
+        text: wrapText(cluster.label, 16),
+        showarrow: false,
+        font: {
+          size: 11,
+          color: "#333",
+          family: "sans-serif"
+        },
+        bgcolor: "rgba(255, 255, 255, 0.85)",
+        borderpad: 4,
+        borderwidth: 0
+      };
+    }).filter((a) => a !== void 0);
+  }
+  formatHoverText(argument) {
+    const lines = [];
+    const text = escapeHtml(argument.argument || "");
+    const wrapped = wrapTextWithLimit(text, 30);
+    lines.push(wrapped);
+    const { selectedClusterId, targetLevel, filteredClusterIds, maxLevel } = this.options;
+    if (filteredClusterIds && maxLevel != null) {
+      const clusterId = this.getClusterIdAtLevel(argument.cluster_ids || [], maxLevel);
+      if (clusterId) {
+        const cluster = this.clusterById.get(clusterId);
+        if (cluster) {
+          lines.push(`<b>[${escapeHtml(cluster.label)}]</b>`);
+        }
+      }
+    } else if (selectedClusterId) {
+      const childClusters = this.childrenByParent.get(selectedClusterId) || [];
+      const childIds = new Set(childClusters.map((c) => c.id));
+      const clusterIds = argument.cluster_ids || [];
+      const childId = clusterIds.find((id) => childIds.has(id));
+      if (childId) {
+        const cluster = this.clusterById.get(childId);
+        if (cluster) {
+          lines.push(`<b>[${escapeHtml(cluster.label)}]</b>`);
+        }
+      }
+    } else {
+      const clusterIds = argument.cluster_ids || [];
+      const clusterId = this.getClusterIdAtLevel(clusterIds, targetLevel);
+      if (clusterId) {
+        const cluster = this.clusterById.get(clusterId);
+        if (cluster) {
+          lines.push(`<b>[${escapeHtml(cluster.label)}]</b>`);
+        }
+      }
+    }
+    return lines.join("<br>");
+  }
+  update(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.arguments.length === 0) {
+      return;
+    }
+    const trace = this.buildTrace();
+    const layout = this.buildLayout();
+    Plotly.react(this.container, [trace], layout);
+  }
+  destroy() {
+    Plotly.purge(this.container);
+  }
+}
+export {
+  ScatterChart as default
+};

data/js/shared/settings_dialog.js

@@ -0,0 +1,154 @@
+import { icon, escapeHtml, Dialogs } from "./decidim_core_shim";
+import { t } from "./i18n";
+class SettingsDialog {
+  constructor(options = {}) {
+    this.options = {
+      maxDensity: 0.2,
+      minValue: 5,
+      ...options
+    };
+    this.isOpen = false;
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    const { maxDensity, minValue } = this.options;
+    const dialogId = `blv-settings-${Math.random().toString(36).slice(2)}`;
+    this.element = document.createElement("div");
+    this.element.dataset.dialog = dialogId;
+    this.element.className = "blv-settings-dialog";
+    this.element.innerHTML = `
+      <div id="${escapeHtml(dialogId)}-content" class="relative w-full max-w-[400px] bg-white rounded-xl shadow-lg overflow-hidden">
+        <button type="button"
+                class="absolute top-3 right-3 flex items-center justify-center w-8 h-8 p-0 bg-transparent border-none rounded-md cursor-pointer text-gray-500 transition-all duration-150 hover:bg-gray-100 hover:text-gray-900 focus:outline-2 focus:outline-sky-600 focus:outline-offset-2 [&_svg]:w-5 [&_svg]:h-5"
+                data-dialog-close="${escapeHtml(dialogId)}"
+                data-dialog-closable
+                aria-label="${escapeHtml(t("common.close"))}">
+          ${icon("close-line")}
+        </button>
+        <div data-dialog-container class="blv-settings-dialog__container">
+          <h3 id="dialog-title-${escapeHtml(dialogId)}" data-dialog-title class="m-0 px-5 py-4 pr-12 text-base font-semibold text-gray-900 border-b border-gray-200">
+            ${escapeHtml(t("settings.title"))}
+          </h3>
+          <div id="dialog-desc-${escapeHtml(dialogId)}" class="p-5">
+            <div class="mb-6 last:mb-0 [&_label]:block [&_label]:mb-3 [&_label]:text-sm [&_label]:font-medium [&_label]:text-gray-700">
+              <label for="${escapeHtml(dialogId)}-maxDensity">${escapeHtml(t("settings.max_density_label"))}</label>
+              <div class="blv-slider">
+                <input type="range"
+                       id="${escapeHtml(dialogId)}-maxDensity"
+                       min="0.1" max="1" step="0.1"
+                       value="${escapeHtml(String(maxDensity))}"
+                       data-setting="maxDensity" />
+                <div class="flex justify-between mt-2 text-xs text-gray-500">
+                  <span>10%</span>
+                  <span data-blv="slider-value" class="font-semibold text-sky-600">${escapeHtml(String(Math.round(maxDensity * 100)))}%</span>
+                  <span>100%</span>
+                </div>
+              </div>
+            </div>
+            <div class="mb-6 last:mb-0 [&_label]:block [&_label]:mb-3 [&_label]:text-sm [&_label]:font-medium [&_label]:text-gray-700">
+              <label for="${escapeHtml(dialogId)}-minValue">${escapeHtml(t("settings.min_value_label"))}</label>
+              <div class="blv-slider">
+                <input type="range"
+                       id="${escapeHtml(dialogId)}-minValue"
+                       min="0" max="10" step="1"
+                       value="${escapeHtml(String(minValue))}"
+                       data-setting="minValue" />
+                <div class="flex justify-between mt-2 text-xs text-gray-500">
+                  <span>0</span>
+                  <span data-blv="slider-value" class="font-semibold text-sky-600">${escapeHtml(t("common.items_count", { count: minValue }))}</span>
+                  <span>10</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div data-dialog-actions class="px-5 py-4 border-t border-gray-200 flex justify-end gap-2">
+          <button type="button"
+                  class="button button__sm button__transparent-secondary"
+                  data-dialog-close="${escapeHtml(dialogId)}">
+            ${escapeHtml(t("common.cancel"))}
+          </button>
+          <button type="button"
+                  class="button button__sm button__secondary"
+                  data-action="apply">
+            ${escapeHtml(t("common.apply"))}
+          </button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(this.element);
+    this.dialog = new Dialogs(`[data-dialog="${dialogId}"]`, {
+      closingSelector: `[data-dialog-close="${dialogId}"]`,
+      backdropSelector: `[data-dialog="${dialogId}"]`,
+      labelledby: `dialog-title-${dialogId}`,
+      describedby: `dialog-desc-${dialogId}`,
+      enableAutoFocus: false,
+      onOpen: () => {
+        setTimeout(() => this.focusFirstInput(), 0);
+      },
+      onClose: () => {
+        setTimeout(() => this.handleClose(), 0);
+      }
+    });
+    this.bindEvents();
+    this.dialog.open();
+  }
+  bindEvents() {
+    if (!this.element) return;
+    this.element.querySelectorAll("input[type='range']").forEach((input) => {
+      input.addEventListener("input", (e) => {
+        const target = e.target;
+        const value = parseFloat(target.value);
+        const valueDisplay = target.parentElement.querySelector('[data-blv="slider-value"]');
+        if (target.dataset.setting === "maxDensity") {
+          valueDisplay.textContent = `${Math.round(value * 100)}%`;
+        } else {
+          valueDisplay.textContent = t("common.items_count", { count: value });
+        }
+      });
+    });
+    this.element.querySelector("[data-action='apply']").addEventListener("click", () => {
+      this.apply();
+    });
+  }
+  focusFirstInput() {
+    const firstInput = this.element?.querySelector("input[type='range']");
+    if (firstInput) {
+      firstInput.focus();
+    }
+  }
+  apply() {
+    if (!this.element) return;
+    const maxDensityInput = this.element.querySelector("[data-setting='maxDensity']");
+    const minValueInput = this.element.querySelector("[data-setting='minValue']");
+    const newSettings = {
+      maxDensity: parseFloat(maxDensityInput.value),
+      minValue: parseInt(minValueInput.value, 10)
+    };
+    this.options.onApply?.(newSettings);
+    this.dialog.close();
+  }
+  handleClose() {
+    this.destroy();
+    this.options.onClose?.();
+  }
+  close() {
+    if (!this.isOpen || !this.dialog) return;
+    this.dialog.close();
+  }
+  destroy() {
+    this.isOpen = false;
+    if (this.dialog) {
+      this.dialog.destroy();
+      this.dialog = void 0;
+    }
+    if (this.element) {
+      this.element.remove();
+      this.element = void 0;
+    }
+  }
+}
+export {
+  SettingsDialog as default
+};

data/js/shared/toolbar.js

@@ -0,0 +1,102 @@
+import { icon, escapeHtml } from "./decidim_core_shim";
+import { t } from "./i18n";
+const VIEW_MODES = {
+  SCATTER_ALL: "scatterAll",
+  SCATTER_DENSITY: "scatterDensity",
+  TREEMAP: "treemap"
+};
+class Toolbar {
+  constructor(options = {}) {
+    this.options = {
+      viewMode: VIEW_MODES.SCATTER_ALL,
+      hasDensityData: false,
+      isDenseGroupEnabled: true,
+      showSettings: true,
+      showFullscreen: true,
+      ...options
+    };
+  }
+  render() {
+    const { viewMode, hasDensityData, isDenseGroupEnabled, showSettings, showFullscreen } = this.options;
+    const densityBtnDisabled = !hasDensityData || !isDenseGroupEnabled;
+    const densityBtnTitle = densityBtnDisabled ? t("toolbar.density_disabled_title") : t("toolbar.density_title");
+    const activeClass = (mode) => viewMode === mode ? "blv-active" : "";
+    return `
+      <div class="inline-flex bg-gray-200 rounded-md p-0.5 gap-0.5">
+        <button class="blv-segment-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-[0.8125rem] font-medium text-gray-500 bg-transparent border-none rounded cursor-pointer transition-all duration-150 whitespace-nowrap disabled:text-gray-400 disabled:cursor-not-allowed disabled:opacity-60 [&_svg]:w-3.5 [&_svg]:h-3.5 [&_svg]:shrink-0 ${escapeHtml(activeClass(VIEW_MODES.SCATTER_ALL))}"
+                data-view-mode="${escapeHtml(VIEW_MODES.SCATTER_ALL)}"
+                title="${escapeHtml(t("toolbar.all_title"))}">
+          ${icon("bubble-chart-line")}
+          <span>${escapeHtml(t("toolbar.all"))}</span>
+        </button>
+        <button class="blv-segment-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-[0.8125rem] font-medium text-gray-500 bg-transparent border-none rounded cursor-pointer transition-all duration-150 whitespace-nowrap disabled:text-gray-400 disabled:cursor-not-allowed disabled:opacity-60 [&_svg]:w-3.5 [&_svg]:h-3.5 [&_svg]:shrink-0 ${escapeHtml(activeClass(VIEW_MODES.SCATTER_DENSITY))}"
+                data-view-mode="${escapeHtml(VIEW_MODES.SCATTER_DENSITY)}"
+                title="${escapeHtml(densityBtnTitle)}"
+                ${densityBtnDisabled ? "disabled" : ""}>
+          ${icon("focus-3-line")}
+          <span>${escapeHtml(t("toolbar.density"))}</span>
+        </button>
+        <button class="blv-segment-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-[0.8125rem] font-medium text-gray-500 bg-transparent border-none rounded cursor-pointer transition-all duration-150 whitespace-nowrap disabled:text-gray-400 disabled:cursor-not-allowed disabled:opacity-60 [&_svg]:w-3.5 [&_svg]:h-3.5 [&_svg]:shrink-0 ${escapeHtml(activeClass(VIEW_MODES.TREEMAP))}"
+                data-view-mode="${escapeHtml(VIEW_MODES.TREEMAP)}"
+                title="${escapeHtml(t("toolbar.treemap_title"))}">
+          ${icon("layout-grid-line")}
+          <span>${escapeHtml(t("toolbar.treemap"))}</span>
+        </button>
+      </div>
+      <div class="flex gap-2">
+        ${showSettings && hasDensityData ? `
+        <button class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-500 bg-transparent border border-transparent rounded-md cursor-pointer transition-all duration-150 hover:bg-gray-200 hover:text-gray-700 [&_svg]:w-4 [&_svg]:h-4 [&_svg]:shrink-0"
+                data-action="settings"
+                title="${escapeHtml(t("toolbar.settings_title"))}">
+          ${icon("settings-3-line")}
+          <span>${escapeHtml(t("toolbar.settings"))}</span>
+        </button>
+        ` : ""}
+        ${showFullscreen ? `
+        <button class="inline-flex items-center gap-1.5 p-2 text-sm font-medium text-gray-500 bg-transparent border border-transparent rounded-md cursor-pointer transition-all duration-150 hover:bg-gray-200 hover:text-gray-700 [&_svg]:w-4 [&_svg]:h-4 [&_svg]:shrink-0 [&_span]:hidden"
+                data-action="fullscreen"
+                title="${escapeHtml(t("toolbar.fullscreen_title"))}">
+          ${icon("fullscreen-line")}
+        </button>
+        ` : ""}
+      </div>
+    `;
+  }
+  bindEvents(container) {
+    const { onViewModeChange, onSettingsClick, onFullscreenClick } = this.options;
+    container.querySelectorAll("[data-view-mode]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        if (e.currentTarget.disabled) return;
+        const mode = e.currentTarget.dataset.viewMode;
+        if (onViewModeChange) {
+          onViewModeChange(mode);
+        }
+      });
+    });
+    const settingsBtn = container.querySelector("[data-action='settings']");
+    if (settingsBtn && onSettingsClick) {
+      settingsBtn.addEventListener("click", onSettingsClick);
+    }
+    const fullscreenBtn = container.querySelector("[data-action='fullscreen']");
+    if (fullscreenBtn && onFullscreenClick) {
+      fullscreenBtn.addEventListener("click", onFullscreenClick);
+    }
+  }
+  updateState(container, state) {
+    const { viewMode, hasDensityData, isDenseGroupEnabled } = { ...this.options, ...state };
+    container.querySelectorAll("[data-view-mode]").forEach((btn) => {
+      const isActive = btn.dataset.viewMode === viewMode;
+      btn.classList.toggle("blv-active", isActive);
+      if (btn.dataset.viewMode === VIEW_MODES.SCATTER_DENSITY) {
+        const isDisabled = !hasDensityData || !isDenseGroupEnabled;
+        btn.disabled = isDisabled;
+        btn.title = isDisabled ? t("toolbar.density_disabled_title") : t("toolbar.density_title");
+      }
+    });
+    Object.assign(this.options, state);
+  }
+}
+export {
+  VIEW_MODES,
+  Toolbar as default
+};