JSFiddle - React, Tailwind, and code Playground

by endeepak

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/simufast.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"></script>

<script>
    simufast.run((player) => {
        const moduloHash = new simufast.routing.ModuloHash(player, {maxNodes: 4});
        const simulation = new simufast.cache.MultiNodeCacheSimulation(moduloHash, {
            nodes: ["S0", "S1", "S2"]
        });
        const keys = simufast.utils.randStringArray(100);
        const commands = [];
        for (let i = 1; i <= 100; i++) {
            const key = simufast.utils.getRandomValueFromArray(keys);
            commands.push(() => simulation.getOrFetch(key, () => `${key}'s value from data source`));
        }
        commands.push(() => simulation.addNode("S3"));
        for (let i = 1; i <= 100; i++) {
            const key = simufast.utils.getRandomValueFromArray(keys);
            commands.push(() => simulation.getOrFetch(key, () => `${key}'s value from data source`));
        }
        commands.push(() => simulation.removeNode("S1"));
        for (let i = 1; i <= 100; i++) {
            const key = simufast.utils.getRandomValueFromArray(keys);
            commands.push(() => simulation.getOrFetch(key, () => `${key}'s value from data source`));
        }
        player.experiment({
            name: 'Modulo Hashing: Elastic nodes',
            drawable: simulation,
            commands: commands
        });
    }, {
        statsExpanded: true
    });
</script>