UserScript - ER Kibana - Show/hide filter div

ER Kibana - Show-hide filters.user.js

// ==UserScript==
// @name         ER Kibana - Show/hide filter div
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  try to take over the world!
// @author       balmini@extremereach.com
// @match        http://elk.extremereach.io:5601/app/discover
// @match        http://elk.dev.extremereach.io:5601/app/discover
// @icon         https://www.google.com/s2/favicons?sz=64&domain=extremereach.io
// @grant        none
// ==/UserScript==

function addFilterToggle() {
    // Locate the filter div (id: GlobalFilterGroup)
    const filterDiv = document.getElementById("GlobalFilterGroup");

    // Locate the save query button (id: savedQueryPopover)
    const saveQueryButton = document.getElementById("savedQueryPopover");

    // Create a button to toggle the filter div before the save query button
    const toggleButton = document.createElement("button");
    toggleButton.innerHTML = "Hide Filters";
    toggleButton.style = "border-radius: 5px; background-color: rgb(255, 255, 255); cursor: pointer; font-size: 0.9em; width: 100px;";
    saveQueryButton.parentNode.insertBefore(toggleButton, saveQueryButton);

    const animateConfig = {
        duration: 300,
        easing: "ease-in-out",
        iterations: 1,
    };
    let sizeBeforeHide = 0;
    let isHidden = false;

    // use filterDiv.animate to shrink the filter div height to zero with ease-in-out
    function animateHide() {
        sizeBeforeHide = filterDiv.offsetHeight;
        filterDiv.animate({
            height: [sizeBeforeHide + "px", "0px"],
            opacity: [100, 0],
        }, animateConfig);
        toggleButton.innerHTML = "Show Filters";
        setTimeout(() => {
            filterDiv.style.display = "none";
        }, animateConfig.duration - 10); // beat race condition
    }

    // use filterDiv.animate to grow the filter div height to its original height with ease-in-out
    function animateShow() {
        filterDiv.style.display = "block";
        filterDiv.animate({
            height: ["0px", sizeBeforeHide + "px"],
            opacity: [0, 100],
        }, animateConfig)
        toggleButton.innerHTML = "Hide Filters";
    }

    function toggleFilters() {
        if (isHidden) {
            animateShow();
            isHidden = false;
            return;
        }
        animateHide();
        isHidden = true;
    }

    // Add a click event listener to the button
    toggleButton.addEventListener("click", toggleFilters);

    // Hide on load
    setTimeout(toggleFilters, 1000);
}

(function() {
    'use strict';
    // Loop, waiting for the filter div to appear
    const interval = setInterval(() => {
        if (document.getElementById("GlobalFilterGroup")) {
            console.log("found filter div");
            clearInterval(interval);
            addFilterToggle();
            return;
        }
        console.log("waiting for filter div");
    }, 500);
})();