thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-12-13 18:02:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add rewinder buttons for steps

Browse Source
This commit is contained in:
serxa 2024-11-25 20:27:58 +00:00
parent 5028c4121c
commit f2b4f9184e
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
utils/merge-selector-lab/MergeTreeRewinder.js
View File

@ -3,6 +3,23 @@ import { MergeTreeUtilityVisualizer, MergeTreeTimeVisualizer } from './MergeTree
// Component that renders a scroll bar for MergeTree that rewinds time and controls // Component that renders a scroll bar for MergeTree that rewinds time and controls
// MergeTreeVisualizer(s) // MergeTreeVisualizer(s)
export class MergeTreeRewinder { export class MergeTreeRewinder {
stepBackward() {
if (this.isPlaying) {
this.togglePlay(); // Stop playback if playing
}
this.time = Math.max(this.time - this.speed, this.minTime);
this.onTimeSet(this.time);
this.container.select("input").property("value", this.time);
}
stepForward() {
if (this.isPlaying) {
this.togglePlay(); // Stop playback if playing
}
this.time = Math.min(this.time + this.speed, this.maxTime);
this.onTimeSet(this.time);
this.container.select("input").property("value", this.time);
}
toggleSpeed() { toggleSpeed() {
this.currentSpeedIndex = (this.currentSpeedIndex + 1) % this.speedMultipliers.length; this.currentSpeedIndex = (this.currentSpeedIndex + 1) % this.speedMultipliers.length;
this.speedButton.text(`x${this.speedMultipliers[this.currentSpeedIndex]}`); this.speedButton.text(`x${this.speedMultipliers[this.currentSpeedIndex]}`);
@ -29,7 +46,10 @@ export class MergeTreeRewinder {
} }
} }
updateLabel() { updateLabel() {
this.label.text(`Time: ${this.time.toFixed(1)}`); const minutes = Math.floor(this.time / 60);
const seconds = Math.floor(this.time % 60).toString().padStart(2, '0');
const fraction = (this.time % 1).toFixed(2).substring(2);
this.label.text(`${minutes}:${seconds}.${fraction}`);
} }
constructor(mt, visualizers, container) { constructor(mt, visualizers, container) {
this.mt = mt; this.mt = mt;
@ -59,6 +79,16 @@ export class MergeTreeRewinder {
.text(`x${this.speedMultipliers[this.currentSpeedIndex]}`) .text(`x${this.speedMultipliers[this.currentSpeedIndex]}`)
.on("click", () => this.toggleSpeed()); .on("click", () => this.toggleSpeed());
// Create step backward button
this.stepBackButton = this.container.append("button")
.attr("class", "btn btn-sm mr-1")
.style("padding", "0")
.style("background", "transparent")
.style("border", "none")
.style("color", "inherit")
.text("⏪")
.on("click", () => this.stepBackward());
// Create play/pause button // Create play/pause button
this.isPlaying = false; this.isPlaying = false;
this.speed = 0.1; this.speed = 0.1;
@ -71,6 +101,16 @@ export class MergeTreeRewinder {
.text("▶️") .text("▶️")
.on("click", () => this.togglePlay()); .on("click", () => this.togglePlay());
// Create step forward button
this.stepForwardButton = this.container.append("button")
.attr("class", "btn btn-sm mr-1")
.style("padding", "0")
.style("background", "transparent")
.style("border", "none")
.style("color", "inherit")
.text("⏩")
.on("click", () => this.stepForward());
// Create slider input // Create slider input
const slider = this.container.append("input") const slider = this.container.append("input")
.attr("type", "range") .attr("type", "range")