Skip to content

[ENG-2096] Remove the discourse context overlay from Roam canvas #1288

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

Open
sid597 wants to merge 1 commit into from
Open

[ENG-2096] Remove the discourse context overlay from Roam canvas #1288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 1 addition & 24 deletions apps/roam/src/components/canvas/DiscourseNodeUtil.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
toDomPrecision,
TLAnyShapeUtilConstructor,
} from "tldraw";
import React, { useState, useEffect, useRef, useMemo } from "react";
import React, { useEffect, useRef, useMemo } from "react";
import { useExtensionAPI } from "roamjs-components/components/ExtensionApiContext";
import isLiveBlock from "roamjs-components/queries/isLiveBlock";
import updateBlock from "roamjs-components/writes/updateBlock";
Expand All @@ -41,7 +41,6 @@ import { loadImage } from "~/utils/loadImage";
import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
import { getPersonalSetting } from "~/components/settings/utils/accessors";
import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
import { render as renderToast } from "roamjs-components/components/Toast";
import { RenderRoamBlockString } from "~/utils/roamReactComponents";
Expand Down Expand Up @@ -449,16 +448,9 @@ export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
const {
canvasSettings: { alias = "", "key-image": isKeyImage = "" } = {},
} = discourseContext.nodes[getDiscourseNodeTypeId({ shape })] || {};
// eslint-disable-next-line react-hooks/rules-of-hooks
const isOverlayEnabled = useMemo(
() => getPersonalSetting<boolean>([PERSONAL_KEYS.overlayInCanvas]),
[],
);

const isEditing = this.editor.getEditingShapeId() === shape.id;
// eslint-disable-next-line react-hooks/rules-of-hooks
const [overlayMounted, setOverlayMounted] = useState(false);
// eslint-disable-next-line react-hooks/rules-of-hooks

@sid597 sid597 Aug 10, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

overlayMounted + the onPointerEnter handler below existed solely to defer overlay mounting until hover; they go with the overlay.

const dialogRenderedRef = useRef(false);

// Detect discourse node tags in block text for blck-node shapes
Expand Down Expand Up @@ -613,7 +605,6 @@ export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
maxHeight: shape.props.h,
boxSizing: "border-box",
}}
onPointerEnter={() => setOverlayMounted(true)}
>
<div
className="relative flex h-full min-h-0 w-full min-w-0 flex-col"
Expand Down Expand Up @@ -750,20 +741,6 @@ export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
fontSize: FONT_SIZES[shape.props.size],
}}
>
{overlayMounted && isOverlayEnabled && (
<div
className="roamjs-discourse-context-overlay-container absolute right-1 top-1"
onPointerDown={(e) => e.stopPropagation()}
>
<DiscourseContextOverlay
uid={shape.props.uid}
id={`${shape.id}-overlay`}
opacity="50"
textColor={textColor}
iconColor={textColor}
/>
</div>
)}
{showEmbeddedRoamBlock ? (
<div className="w-full min-w-0">
<RenderRoamBlockString
Expand Down
13 changes: 0 additions & 13 deletions apps/roam/src/components/settings/HomePersonalSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
import {
DISCOURSE_TOOL_SHORTCUT_KEY,
AUTO_CANVAS_RELATIONS_KEY,
DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
STREAMLINE_STYLING_KEY,
DISALLOW_DIAGNOSTICS,
USE_STORED_RELATIONS,
Expand Down Expand Up @@ -239,18 +238,6 @@ const HomePersonalSettings = ({
}}
/>

<PersonalFlagPanel
title="(BETA) Overlay in canvas"
description={withDocsLink(
"Whether or not to overlay discourse context information over canvas nodes.",
ROAM_DOCS.discourseContextOverlay,
)}
settingKeys={[PERSONAL_KEYS.overlayInCanvas]}
initialValue={personalSettings[PERSONAL_KEYS.overlayInCanvas]}
onChange={(checked) => {
void setSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, checked);
}}
/>
<PersonalFlagPanel
title="Streamline styling"
description="Apply streamlined styling to your personal graph for a cleaner appearance."
Expand Down
4 changes: 0 additions & 4 deletions apps/roam/src/components/settings/utils/accessors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,10 +220,6 @@ const PERSONAL_SCHEMA_PATH_TO_LEGACY_KEY = new Map<string, string>([
[pathKey([PERSONAL_KEYS.disableSidebarOpen]), "disable-sidebar-open"],
[pathKey([PERSONAL_KEYS.hideFeedbackButton]), "hide-feedback-button"],
[pathKey([PERSONAL_KEYS.autoCanvasRelations]), "auto-canvas-relations"],
[

@sid597 sid597 Aug 10, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Legacy migration iterates Object.values(PERSONAL_KEYS), so with the key gone this map entry is never looked up — old graphs simply skip migrating the dead setting.

pathKey([PERSONAL_KEYS.overlayInCanvas]),
"discourse-context-overlay-in-canvas",
],
[pathKey([PERSONAL_KEYS.streamlineStyling]), "streamline-styling"],
[pathKey([PERSONAL_KEYS.disableProductDiagnostics]), "disallow-diagnostics"],
[pathKey([PERSONAL_KEYS.discourseToolShortcut]), "discourse-tool-shortcut"],
Expand Down
1 change: 0 additions & 1 deletion apps/roam/src/components/settings/utils/settingKeys.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export const PERSONAL_KEYS = {
disableSidebarOpen: "Disable sidebar open",
hideFeedbackButton: "Hide feedback button",
autoCanvasRelations: "Auto canvas relations",
overlayInCanvas: "Overlay in canvas",
streamlineStyling: "Streamline styling",
disableProductDiagnostics: "Disable product diagnostics",
discourseToolShortcut: "Discourse tool shortcut",
Expand Down
2 changes: 0 additions & 2 deletions apps/roam/src/components/settings/utils/zodSchema.example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,6 @@ const personalSettings: PersonalSettings = {
"Node search menu trigger": "//",
"Discourse tool shortcut": { modifiers: 0, key: "d" },
"Discourse context overlay": true,
"Overlay in canvas": false,
"Text selection popup": true,
"Disable sidebar open": false,
"Hide feedback button": false,
Expand Down Expand Up @@ -395,7 +394,6 @@ const defaultPersonalSettings: PersonalSettings = {
"Node search menu trigger": "",
"Discourse tool shortcut": { modifiers: 0, key: "" },
"Discourse context overlay": false,
"Overlay in canvas": false,
"Text selection popup": true,
"Disable sidebar open": false,
"Hide feedback button": false,
Expand Down
1 change: 0 additions & 1 deletion apps/roam/src/components/settings/utils/zodSchema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,6 @@ export const PersonalSettingsSchema = z.object({
.default({ modifiers: 0, key: "" }),
"Discourse context overlay": z.boolean().default(false),
"Reified relation triples": z.boolean().default(true),
"Overlay in canvas": z.boolean().default(false),

@sid597 sid597 Aug 10, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PersonalSettingsSchema is a non-strict z.object, so a persisted "Overlay in canvas" prop is stripped on parse. Writes path-patch rather than rewrite the object, so the stale boolean stays in old users' block props — harmless residue, not worth a cleanup migration.

"Text selection popup": z.boolean().default(true),
"Disable sidebar open": z.boolean().default(false),
"Hide feedback button": z.boolean().default(false),
Expand Down
2 changes: 0 additions & 2 deletions apps/roam/src/data/userSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ export const QUERY_BUILDER_SETTINGS_KEY = "query-builder-settings";
export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations";
export const DISCOURSE_TOOL_SHORTCUT_KEY = "discourse-tool-shortcut";
export const CANVAS_NODE_SHORTCUTS_KEY = "canvas-node-shortcuts";
export const DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY =
"discourse-context-overlay-in-canvas";
export const STREAMLINE_STYLING_KEY = "streamline-styling";
export const DISALLOW_DIAGNOSTICS = "disallow-diagnostics";
export const USE_STORED_RELATIONS = "use-reified-relations"; // "use-reified-relations" is legacy terminology, but we keep it for backwards compatibility