import React, { memo } from "react";
import { createPortal } from "react-dom";
import { getAttributes } from "../utils/transformDataAttributes";
import { ChartWithLoader } from "./chart-with-loader";
import { DisableOutOfView } from "./disable-out-of-view";
import { SnapshotLoaderContainer } from "./snapshot-loader";
const getNodesArray = () => Array.from(document.querySelectorAll("[data-netdata]"));
export const Portals = memo(() => {
    const nodes = getNodesArray();
    return (React.createElement(React.Fragment, null, nodes.map((node, index) => {
        const attributesMapped = getAttributes(node);
        const chartId = `${attributesMapped.id}-${index}`;
        return (createPortal(React.createElement(React.Fragment, null,
            React.createElement(DisableOutOfView, { attributes: attributesMapped, chartUuid: chartId, portalNode: node },
                React.createElement(ChartWithLoader, { attributes: attributesMapped, 
                    // todo change to uuid generator (when we disconnect dashboard.js)
                    chartUuid: chartId, portalNode: node })),
            React.createElement(SnapshotLoaderContainer, { attributes: attributesMapped, chartUuid: chartId })), node));
    })));
});
//# sourceMappingURL=portals.js.map