plotting.js

export function plotHeatmap(sim, xLabels, yLabels) {
    const data = [{ z: sim, type: "heatmap", colorscale: "Viridis", zmin: 0.7, zmax: 1, x: xLabels, y: yLabels }];
    Plotly.newPlot("plot-heatmap", data, {
        xaxis: { title: "Group" },
        yaxis: { title: "Group" },
        width: 500,
        height: 500,
        margin: { t: 40, l: 200, r: 10, b: 200 },
        title: "Group Similarity Heatmap"
    });
}

export function plotScatter(traces, k) {
    Plotly.newPlot("plot-scatter", traces, {
        xaxis: { title: "UMAP-1", scaleanchor: "y", scaleratio: 1 },
        yaxis: { title: "UMAP-2" },
        width: 1000,
        height: 500,
        margin: { t: 40, l: 40, r: 10, b: 40 },
        title: `K-Means Clustering (k=${k})`,
        legend: { x: 1.05, y: 0.5, orientation: "v", xanchor: "left", yanchor: "middle" }
    });
}

export function updateScatter(traces, k) {
    Plotly.react("plot-scatter", traces, {
        xaxis: { title: "UMAP-1", scaleanchor: "y", scaleratio: 1 },
        yaxis: { title: "UMAP-2" },
        width: 1000,
        height: 500,
        margin: { t: 40, l: 40, r: 10, b: 40 },
        title: `K-Means Clustering (k=${k})`,
        legend: { x: 1.05, y: 0.5, orientation: "v", xanchor: "left", yanchor: "middle" }
    });
}