<commit_before>import { registerPlugin } from "@finos/perspective-viewer/dist/esm/utils.js";
import L from "leaflet"
import { feature } from "topojson-client"
import "../../../assets/stylesheets/comp-perspective-viewer-map.css"

// default geoJSON column name
const geomColumn = "geometry"

function createMapNode(element, div) {
  /*Create a different ID to avoid errors when we show more than one map on the same page, for example: summary tab.*/
  const seed = Math.random().toString(36).substring(7)
  const idMap = `map-${seed}`;
  if (document.getElementById(idMap)) {
    document.getElementById(idMap).remove()
  }
  // Attach the container div to the DOM
  const mapElement = document.createElement("div");
  mapElement.id = idMap
  div.innerHTML = ""
  div.appendChild(document.createElement("slot"))
  element.appendChild(mapElement);

  // Initialize Leaflet
  const map = L.map(idMap);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  // Add Topojson handlers
  L.TopoJSON = L.GeoJSON.extend({
    addData: function (jsonData) {
      if (jsonData.type === 'Topology') {
        for (let key in jsonData.objects) {
          L.GeoJSON.prototype.addData.call(this, feature(jsonData, jsonData.objects[key]));
        }
      } else {
        L.GeoJSON.prototype.addData.call(this, jsonData);
      }
    },
  });
  L.topoJSON = function (data, options) {
    return new L.TopoJSON(data, options);
  };

  return map;
}

function createLegend({ grades = [], getColor = d => d, fmt = d => d.toLocaleString() }) {
  const legend = L.control({ position: 'bottomleft' });

  legend.onAdd = function () {
      const div = L.DomUtil.create('div', 'perspective-map-legend')

      // loop through our density intervals and generate a label with a colored square for each interval
      for (var i = 0; i < grades.length; i++) {
          div.innerHTML +=
              '<i style="background:' + getColor(grades[i]) + '"></i> ' +
              fmt(grades[i]) + (grades[i + 1] ? '&ndash;' + fmt(grades[i + 1]) + '<br>' : '+');
      }

      return div;
  };

  return legend;
}

function createTooltip() {
  const info = L.control();

  info.onAdd = function () {
      this._div = L.DomUtil.create('div', 'perspective-map-tooltip');
      this.update();
      return this._div;
  };

  // method that we will use to update the control based on feature properties passed
  info.update = function (props = {}) {
      this._div.innerHTML = Object.entries(props).map(([key, value]) => `<div><b>${key}</b>: ${value}</div>`).join("");
  };

  return info;
}

export class MapPlugin {
  // static name = "Map"

  static async create(div, view) {
    try {
      const columns = JSON.parse(this.getAttribute("columns"))
<commit_msg>remove children maps<commit_after>import { registerPlugin } from "@finos/perspective-viewer/dist/esm/utils.js";
import L from "leaflet"
import { feature } from "topojson-client"
import "../../../assets/stylesheets/comp-perspective-viewer-map.css"

// default geoJSON column name
const geomColumn = "geometry"

function createMapNode(element, div) {
  const { children } = element
  /*Create a different ID to avoid errors when we show more than one map on the same page, for example: summary tab.*/
  const seed = Math.random().toString(36).substring(7)
  const idMap = `map-${seed}`;
  let childrenMaps = [...children];
  childrenMaps.map(({ id }) => document.getElementById(id).remove())

  // Attach the container div to the DOM
  const mapElement = document.createElement("div");
  mapElement.id = idMap
  div.innerHTML = ""
  div.appendChild(document.createElement("slot"))
  element.appendChild(mapElement);

  // Initialize Leaflet
  const map = L.map(idMap, {
    center: [0, 0],
    zoom: 1
  });
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  // Add Topojson handlers
  L.TopoJSON = L.GeoJSON.extend({
    addData: function(jsonData) {
      if (jsonData.type === 'Topology') {
        for (let key in jsonData.objects) {
          L.GeoJSON.prototype.addData.call(this, feature(jsonData, jsonData.objects[key]));
        }
      } else {
        L.GeoJSON.prototype.addData.call(this, jsonData);
      }
    },
  });
  L.topoJSON = function(data, options) {
    return new L.TopoJSON(data, options);
  };

  return map;
}

function createLegend({ grades = [], getColor = d => d, fmt = d => d.toLocaleString() }) {
  const legend = L.control({ position: 'bottomleft' });

  legend.onAdd = function() {
    const div = L.DomUtil.create('div', 'perspective-map-legend')

    // loop through our density intervals and generate a label with a colored square for each interval
    for (var i = 0; i < grades.length; i++) {
      div.innerHTML +=
        '<i style="background:' + getColor(grades[i]) + '"></i> ' +
        fmt(grades[i]) + (grades[i + 1] ? '&ndash;' + fmt(grades[i + 1]) + '<br>' : '+');
    }

    return div;
  };

  return legend;
}

function createTooltip() {
  const info = L.control();

  info.onAdd = function() {
    this._div = L.DomUtil.create('div', 'perspective-map-tooltip');
    this.update();
    return this._div;
  };

  // method that we will use to update the control based on feature properties passed
  info.update = function(props = {}) {
    this._div.innerHTML = Object.entries(props).map(([key, value]) => `<div><b>${key}</b>: ${value}</div>`).join("");
  };

  return info;
}

export class MapPlugin {

  static async create(div, view) {
    try {
      const columns = JSON.parse(this.getAttribute("columns"))

{'fraction_non_alphanumeric': 0.16456352636127916, 'fraction_numerical': 0.0025929127052722557, 'mean_word_length': 3.2544117647058823, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 28, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3395106', 'n_tokens_mistral': 1875, 'n_tokens_neox': 1832, 'n_words': 455}