datastore/utils/merge-selector-lab/float_layer_merges.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Merge Selector Lab</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://d3js.org/d3.v7.min.js"></script>
    </head>
    <body>
        <div class="container-fluid bg-primary text-white">
            <div class="p-3" id="metrics-container"></div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12" id="util-container"></div>
            </div>
        </div>

        <div class="container-fluid bg-primary text-white">
            <div class="p-3" id="rewind-container"></div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12" id="time-container"></div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="p-3" id="var-container"></div>
        </div>

        <script type="module">
            import { SimulationContainer } from './SimulationContainer.js';
            import { sequenceInserter } from './sequenceInserter.js';
            import { customScenario } from './customScenario.js';
            import { floatLayerMerges } from './floatLayerMerges.js';
            import { delayMs } from './util.js';

            const simContainer = new SimulationContainer();

            const insertPartSize = 10 << 20;
            const layerBases = [Math.PI, Math.E];

            const scenario = {
                inserts: [
                    sequenceInserter({
                        start_time: 0,
                        interval: 0.05,
                        parts: 1000,
                        bytes: insertPartSize,
                    }),
                ],
                selector: floatLayerMerges({insertPartSize, layerBases}),
                pool_size: 100,
            }

            async function updateMergeTree({mt}) {
                simContainer.update({mt}, true);
                await delayMs(1);
            }

            const signals = {
                // on_every_frame: updateMergeTree,
                //on_inserter_end: ({sim}) => sim.stop(),
            };

            const mt = await customScenario(scenario, signals);
            simContainer.update({mt}, true);
            simContainer.setTime(0);
            console.log(mt);
        </script>
    </body>
</html>