Skip to content

ENG-1927 Debounce canvas color writes and flush pending writes on unmount #1144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdroidian merged 4 commits into from
Jun 22, 2026
+107 −67
Merged

ENG-1927 Debounce canvas color writes and flush pending writes on unmount #1144

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90d5792
Refine color debounce cleanup
mdroidian Jun 22, 2026
598c04e
Flush node color writes before settings refresh
mdroidian Jun 22, 2026
7c0e378
Refactor color setting logic in NodeConfig component; update debounce…
mdroidian Jun 22, 2026
2cfa982
Update debounce timing for color writes in NodeConfig component from …
mdroidian Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 107 additions & 67 deletions apps/roam/src/components/settings/NodeConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useCallback, useEffect } from "react";
import React, { useState, useCallback, useEffect, useRef } from "react";
import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
import { getSubTree } from "roamjs-components/util";
Expand Down Expand Up @@ -45,6 +45,106 @@ export const getCleanTagText = (tag: string): string => {
return tag.replace(/^#+/, "").trim().toUpperCase();
};

const COLOR_WRITE_DEBOUNCE_MS = 150;

type DiscourseNodeColorSettingProps = {
canvasUid: string;
nodeType: string;
initialColor?: string;
tagValue: string;
};

const DiscourseNodeColorSetting = ({
canvasUid,
nodeType,
initialColor,
tagValue,
}: DiscourseNodeColorSettingProps): React.ReactElement => {
const [color, setColor] = useState<string>(() =>
formatHexColor(initialColor ?? ""),
);
const colorWriteTimeoutRef = useRef<number | null>(null);

const persistColorValue = useCallback(
(colorValue: string): void => {
void setInputSetting({
blockUid: canvasUid,
key: "color",
value: colorValue,
});
setDiscourseNodeSetting(
nodeType,
[DISCOURSE_NODE_KEYS.canvasSettings, CANVAS_KEYS.color],
colorValue,
);
},
[canvasUid, nodeType],
);

useEffect(() => {
return () => {
if (!colorWriteTimeoutRef.current) return;

window.clearTimeout(colorWriteTimeoutRef.current);
};
Comment thread
mdroidian marked this conversation as resolved.
}, []);
Comment thread
mdroidian marked this conversation as resolved.

const persistColorAfterPause = (colorValue: string): void => {
if (colorWriteTimeoutRef.current) {
window.clearTimeout(colorWriteTimeoutRef.current);
colorWriteTimeoutRef.current = null;
}
colorWriteTimeoutRef.current = window.setTimeout(() => {
persistColorValue(colorValue);
colorWriteTimeoutRef.current = null;
}, COLOR_WRITE_DEBOUNCE_MS);
};

return (
<>
{tagValue && (
<div className="flex items-center gap-1.5 pl-1">
<span className="text-xs italic text-gray-400">Preview:</span>
<span style={color ? getNodeTagStyles(color) : undefined}>
#{tagValue.replace(/^#/, "")}
</span>
</div>
)}
<Label>
Color
<Description description="Changes the color of tags and canvas nodes" />
<ControlGroup>
<InputGroup
style={{ width: 120 }}
type={"color"}
value={color}
onChange={(e) => {
const nextColor = e.target.value;
const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
setColor(nextColor);
persistColorAfterPause(colorValue);
}}
/>
<Tooltip content={color ? "Unset" : "Color not set"}>
<Icon
className={"ml-2 align-middle opacity-80"}
icon={color ? "delete" : "info-sign"}
onClick={() => {
if (colorWriteTimeoutRef.current) {
window.clearTimeout(colorWriteTimeoutRef.current);
colorWriteTimeoutRef.current = null;
}
setColor("");
persistColorValue("");
}}
/>
</Tooltip>
</ControlGroup>
</Label>
</>
);
};

const generateTagPlaceholder = (node: DiscourseNode): string => {
// Extract first reference from format like [[CLM]], [[QUE]], [[EVD]]
const referenceMatch = node.format.match(/\[\[([A-Z]+)\]\]/);
Expand Down Expand Up @@ -86,10 +186,6 @@ const NodeConfig = ({
key: "Attributes",
});

const [color, setColor] = useState<string>(() =>
formatHexColor(node.canvasSettings?.color ?? ""),
);

const [selectedTabId, setSelectedTabId] = useState<TabId>("general");
const [tagError, setTagError] = useState("");
const [formatError, setFormatError] = useState("");
Expand Down Expand Up @@ -253,69 +349,13 @@ const NodeConfig = ({
parentUid={node.type}
uid={tagUid}
/>
{tagValue && (
<div className="flex items-center gap-1.5 pl-1">
<span className="text-xs italic text-gray-400">
Preview:
</span>
<span style={color ? getNodeTagStyles(color) : undefined}>
#{tagValue.replace(/^#/, "")}
</span>
</div>
)}
</div>
<>
<Label>
Color
<Description description="Changes the color of tags and canvas nodes" />
<ControlGroup>
<InputGroup
style={{ width: 120 }}
type={"color"}
value={color}
onChange={(e) => {
const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link
setColor(e.target.value);
void setInputSetting({
blockUid: canvasUid,
key: "color",
value: colorValue,
});
setDiscourseNodeSetting(
node.type,
[
DISCOURSE_NODE_KEYS.canvasSettings,
CANVAS_KEYS.color,
],
colorValue,
);
}}
/>
<Tooltip content={color ? "Unset" : "Color not set"}>
<Icon
className={"ml-2 align-middle opacity-80"}
icon={color ? "delete" : "info-sign"}
onClick={() => {
setColor("");
void setInputSetting({
blockUid: canvasUid,
key: "color",
value: "",
});
setDiscourseNodeSetting(
node.type,
[
DISCOURSE_NODE_KEYS.canvasSettings,
CANVAS_KEYS.color,
],
"",
);
}}
/>
</Tooltip>
</ControlGroup>
</Label>
</>
<DiscourseNodeColorSetting
canvasUid={canvasUid}
nodeType={node.type}
initialColor={node.canvasSettings?.color}
tagValue={tagValue}
/>
</div>
}
/>
Expand Down