Source: utils/template/functions/custom/lto.js

import Plotly from 'plotly.js-dist';

import { Search } from "../../../../search/Search.js";
import { SearchRequest } from "../../../../search/SearchRequest.js";

const excluded = [
    "underway cruise track measurements",
    "latitude",
    "longitude",
    "date/time"
];

/**
 * A function for doing a search request in the elasticsearch index
 * 
 * @param {string} lat 
 * @param {string} lng 
 * @returns {HTMLElement} container for search results
 */
export function lto(lat, lng) {
    lat = parseFloat(lat);
    lng = parseFloat(lng);

    const bbox = encodeURIComponent(`${lng + 0.5},${lat + 0.5},${lng - 0.5},${lat - 0.5}`);

    const target = document.createElement("div");

    const searchInstance = new Search("https://o2a-data.de/index/rest/search/");
    searchInstance.on("finished", e => {
        target.innerHTML += `<div style='margin-bottom:10px;'>Total Hits: <b>${e.totalHits}</b> <a target='_blank' href='https://marine-data.de?site=data&qf=organisations.provider.name%2FPANGAEA - Data Publisher for Earth and Environmental Science&bbox=${bbox}'>Find Data</a></div>`
        for (let facet of e.facets) {
            const div = document.createElement("div");
            div.classList.add("vef-plot");
            div.style.width = "410px";
            target.insertAdjacentHTML("beforeend", "<h3>" + facet.label.replace(".name", "") + "</h3>")
            target.appendChild(div);
            for (let i = facet.children.length - 1; i >= 0; --i) {
                const child = facet.children[i];
                if (excluded.includes(child.label.toLowerCase())) {
                    facet.children.splice(i, 1);
                }
            }
            const data = [
                {
                    x: facet.children.map(child => child.value),
                    y: facet.children.map(child => child.label),
                    text: facet.children.map(child => child.value.toString()),
                    type: 'bar',
                    orientation: 'h',
                    textposition: 'auto',
                    hoverinfo: 'none',
                    font: {
                        family: 'Arial',
                        size: 12
                    },
                    marker: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
                    },
                }
            ];
            Plotly.newPlot(div, data, {
                margin: {
                    l: 130,
                    r: 10,
                    b: 40,
                    t: 20,
                    pad: 5
                },
                barmode: 'stack'
            }, {
                displayModeBar: false,
                displaylogo: false,
                responsive: true
            });
        }
    });

    const request = new SearchRequest("harvest");
    request.excludes = ['metadata', 'keywords.region*', 'keywords.vmap*'];
    request.hits = 0;
    request.facets = [
        "platforms.name:20",
        "persons.author.fullname:20",
        "devices.name:20",
        "expeditions:20",
        "parameters.name:20"
    ]
    request.query = "organisations.provider.abbreviation:(PANGAEA)";
    request.queryGeometries.geometry = [{
        coordinates: [[
            [lng - 0.5, lat - 0.5],
            [lng - 0.5, lat + 0.5],
            [lng + 0.5, lat + 0.5],
            [lng + 0.5, lat - 0.5],
            [lng - 0.5, lat - 0.5]
        ]],
        type: "Polygon"
    }];

    searchInstance.request(request);

    return target;
}