Plotly = require("plotly.js-dist-min@2.35.2")
import {DOMAIN_LIST, buildMapTraces, mapLayout} from "./assets/helpers.js"
scores = FileAttachment("data/scores.csv").csv({typed: true})
inclusion = FileAttachment("data/inclusion.csv").csv({typed: true})

viewof domain = Inputs.select(new Map(DOMAIN_LIST), {label: "Ranking Category:", value: "all_domain"})

viewof showExcluded = Inputs.toggle({label: "Show excluded regions?", value: false})

mapDiv = {
  const div = html`<div style="width:100%;aspect-ratio:2.4/1"></div>`;
  yield div;
  const traces = buildMapTraces(scores, inclusion, domain, showExcluded);
  await Plotly.newPlot(div, traces, mapLayout(domain), {responsive: true, displaylogo: false});
  div.on("plotly_click", ev => {
    const p = ev.points[0];
    if (p.curveNumber > 1) return;               // excluded regions have no data page
    const row = scores.find(r => r.iso === p.location);
    if (row) window.location.href = `region-data.html#${encodeURIComponent(row.region)}`;
  });
}

Click a region to see its data.