Skip to content

Commit e4d65ee

Browse files
mdroidianmdroidian
authored
Initial steps to re-enable Roam Discourse Context Overlay (#95)
* re enable * optimize getting specification conditions * pageRefObserver fix and cleanup * no results fix * results view menu icons fix * overlay ui tweak * move overlay to personal settings * change refs to async.q * remove loading spinner * preview observer fix * rm icons from placeholder * . * .
1 parent 322006b commit e4d65ee

15 files changed

+157
-144
lines changed

‎apps/roam/src/components/DiscourseContext.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ const ContextTab = ({
273273
columns={columns}
274274
onRefresh={onRefresh}
275275
header={
276-
<>
276+
<h4 className="m-0 mb-2 flex items-center justify-between">
277277
<span>{r.label}</span>
278278
<span style={{ display: "flex", alignItems: "center" }}>
279279
<Switch
@@ -285,7 +285,7 @@ const ContextTab = ({
285285
}
286286
/>
287287
</span>
288-
</>
288+
</h4>
289289
}
290290
/>
291291
);
@@ -324,32 +324,35 @@ export const ContextContent = ({ uid, results }: Props) => {
324324
const [loading, setLoading] = useState(true);
325325
const debouncedLoading = useDebounce(loading, 150);
326326

327+
const addLabels = useCallback((result: DiscourseContextResults[number]) => {
328+
setRawQueryResults((prev) => ({
329+
...prev,
330+
[result.label]: {
331+
label: result.label,
332+
results: {
333+
...(prev[result.label]?.results || {}),
334+
...result.results,
335+
},
336+
},
337+
}));
338+
}, []);
339+
327340
const onRefresh = useCallback(() => {
328341
setRawQueryResults({});
329342
getDiscourseContextResults({
330343
uid,
331-
onResult: (result) => {
332-
setRawQueryResults((prev) => ({
333-
...prev,
334-
[result.label]: {
335-
label: result.label,
336-
results: {
337-
...(prev[result.label]?.results || {}),
338-
...result.results,
339-
},
340-
},
341-
}));
342-
},
344+
onResult: addLabels,
343345
}).finally(() => setLoading(false));
344-
}, [uid, setRawQueryResults, setLoading]);
346+
}, [uid, setRawQueryResults, setLoading, addLabels]);
345347

346348
useEffect(() => {
347349
if (!results) {
348350
onRefresh();
349351
} else {
352+
results.forEach(addLabels);
350353
setLoading(false);
351354
}
352-
}, [onRefresh, results, setLoading]);
355+
}, [onRefresh, results, setLoading, loading, addLabels]);
353356
const [tabId, setTabId] = useState(0);
354357
const [groupByTarget, setGroupByTarget] = useState(false);
355358
return queryResults.length ? (
@@ -406,7 +409,7 @@ export const ContextContent = ({ uid, results }: Props) => {
406409
/>
407410
</Tabs>
408411
) : (
409-
<div className="ml-8">No discourse relations found.</div>
412+
<div className="text-center">No discourse relations found.</div>
410413
);
411414
};
412415

‎apps/roam/src/components/DiscourseContextOverlay.tsx‎

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Popover, Position, Tooltip } from "@blueprintjs/core";
1+
import { Button, Icon, Popover, Position, Tooltip } from "@blueprintjs/core";
22
import React, { useCallback, useEffect, useMemo, useState } from "react";
33
import ReactDOM from "react-dom";
44
import { ContextContent } from "./DiscourseContext";
@@ -38,6 +38,7 @@ const getOverlayInfo = (tag: string, id: string): Promise<DiscourseData> => {
3838
if (cache[tag]) return Promise.resolve(cache[tag]);
3939
const relations = getDiscourseRelations();
4040
const nodes = getDiscourseNodes(relations);
41+
4142
return new Promise((resolve) => {
4243
const triggerNow = overlayQueue.length === 0;
4344
overlayQueue.push({
@@ -46,9 +47,16 @@ const getOverlayInfo = (tag: string, id: string): Promise<DiscourseData> => {
4647
end: 0,
4748
mid: 0,
4849
queued: new Date().valueOf(),
49-
callback() {
50+
async callback() {
5051
const self = this;
5152
const start = (self.start = new Date().valueOf());
53+
// @ts-ignore
54+
const queryResult = await window.roamAlphaAPI.data.async.q(
55+
`[:find ?a :where [?b :node/title "${normalizePageTitle(
56+
tag,
57+
)}"] [?a :block/refs ?b]]`,
58+
);
59+
const refs = queryResult.length;
5260
return getDiscourseContextResults({
5361
uid: getPageUidByPageTitle(tag),
5462
nodes,
@@ -57,11 +65,8 @@ const getOverlayInfo = (tag: string, id: string): Promise<DiscourseData> => {
5765
self.mid = new Date().valueOf();
5866
const output = (cache[tag] = {
5967
results,
60-
refs: window.roamAlphaAPI.data.fast.q(
61-
`[:find ?a :where [?b :node/title "${normalizePageTitle(
62-
tag,
63-
)}"] [?a :block/refs ?b]]`,
64-
).length,
68+
69+
refs,
6570
});
6671
const runTime = (self.end = new Date().valueOf() - start);
6772
setTimeout(() => {
@@ -161,38 +166,33 @@ const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
161166
autoFocus={false}
162167
content={
163168
<div
164-
className="roamjs-discourse-context-popover"
165-
style={{
166-
padding: 16,
167-
maxWidth: 720,
168-
position: "relative",
169-
}}
169+
className={`roamjs-discourse-context-popover relative max-w-3xl p-4 ${
170+
results.length === 0 ? "flex items-center justify-center" : ""
171+
}`}
170172
>
171173
<ContextContent uid={tagUid} results={results} />
172-
<span style={{ position: "absolute", bottom: "8px", left: "8px" }}>
173-
<Tooltip content={"Refresh Overlay"}>
174-
<Button
175-
icon={"refresh"}
176-
minimal
177-
onClick={() => {
178-
delete cache[tag];
179-
refresh();
180-
}}
181-
/>
182-
</Tooltip>
183-
</span>
184174
</div>
185175
}
186176
target={
187177
<Button
178+
small
188179
id={id}
189180
className={"roamjs-discourse-context-overlay"}
181+
style={{
182+
minHeight: "initial",
183+
paddingTop: ".25rem",
184+
paddingBottom: ".25rem",
185+
}}
190186
minimal
191-
text={`${score} | ${refs}`}
192-
icon={"diagram-tree"}
193-
rightIcon={"link"}
194187
disabled={loading}
195-
/>
188+
>
189+
<div className="flex items-center gap-1.5">
190+
<Icon icon={"diagram-tree"} />
191+
<span className="mr-1 leading-none">{score}</span>
192+
<Icon icon={"link"} />
193+
<span className="leading-none">{refs}</span>
194+
</div>
195+
</Button>
196196
}
197197
position={Position.BOTTOM}
198198
/>
@@ -211,14 +211,19 @@ const Wrapper = ({ parent, tag }: { parent: HTMLElement; tag: string }) => {
211211
<DiscourseContextOverlay tag={tag} id={id} />
212212
) : (
213213
<Button
214+
small
214215
id={id}
215216
minimal
216-
text={`0 | 0`}
217-
icon={"diagram-tree"}
218-
rightIcon={"link"}
219217
className={"roamjs-discourse-context-overlay"}
220218
disabled={true}
221-
/>
219+
>
220+
<div className="flex items-center gap-1.5">
221+
<Icon icon={"diagram-tree"} />
222+
<span className="mr-1">0</span>
223+
<Icon icon={"link"} />
224+
<span>0</span>
225+
</div>
226+
</Button>
222227
);
223228
};
224229

‎apps/roam/src/components/QueryDrawer.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,18 @@ const SavedQuery = ({
8787
}}
8888
>
8989
<ResultsView
90+
hideMenu={minimized}
9091
exportIsOpen={isExportOpen}
9192
toggleExport={toggleExport}
9293
parentUid={uid}
9394
onRefresh={refresh}
9495
header={
9596
error ? (
96-
<div className="mb-4 text-red-700">{error}</div>
97+
<h4 className="m-0 flex items-center justify-between">
98+
<div className="mb-4 text-red-700">{error}</div>
99+
</h4>
97100
) : (
98-
<>
101+
<h4 className="m-0 flex items-center justify-between">
99102
{isEditingLabel ? (
100103
<InputGroup
101104
value={label}
@@ -123,7 +126,7 @@ const SavedQuery = ({
123126
{label}
124127
</span>
125128
)}
126-
<div className="mr-16 mt-2">
129+
<div>
127130
{!isSavedToPage && (
128131
<>
129132
<Tooltip content={"Insert Results"}>
@@ -185,7 +188,7 @@ const SavedQuery = ({
185188
</>
186189
)}
187190
</div>
188-
</>
191+
</h4>
189192
)
190193
}
191194
onDeleteQuery={onDelete}

‎apps/roam/src/components/results-view/ResultsView.tsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ type ResultsViewComponent = (props: {
226226
header?: React.ReactNode;
227227
results: Result[];
228228
hideResults?: boolean;
229+
hideMenu?: boolean;
229230
preventSavingSettings?: boolean;
230231
onEdit?: () => void;
231232
onDeleteQuery?: () => void;
@@ -267,6 +268,7 @@ const ResultsView: ResultsViewComponent = ({
267268
header,
268269
results,
269270
hideResults = false,
271+
hideMenu = false,
270272
preventSavingSettings = false,
271273
onEdit,
272274
onDeleteQuery,
@@ -315,7 +317,8 @@ const ResultsView: ResultsViewComponent = ({
315317
const [columnFilters, setColumnFilters] = useState(settings.columnFilters);
316318
const [searchFilter, setSearchFilter] = useState(settings.searchFilter);
317319
const [showInterface, setShowInterface] = useState(settings.showInterface);
318-
const [showMenuIcons, setShowMenuIcons] = useState(false);
320+
const [revealMenuIcons, setRevealMenuIcons] = useState(false);
321+
const hideMenuIcons = hideMenu || (!revealMenuIcons && !showInterface);
319322

320323
const { allProcessedResults, paginatedResults } = useMemo(() => {
321324
return postProcessResults(results, {
@@ -410,8 +413,8 @@ const ResultsView: ResultsViewComponent = ({
410413
<div
411414
className={`roamjs-query-results-view relative w-full mode-${layout.mode}`}
412415
ref={containerRef}
413-
onMouseEnter={() => setShowMenuIcons(true)}
414-
onMouseLeave={() => setShowMenuIcons(false)}
416+
onMouseEnter={() => setRevealMenuIcons(true)}
417+
onMouseLeave={() => setRevealMenuIcons(false)}
415418
>
416419
{isEditSearchFilter && (
417420
<div
@@ -460,9 +463,10 @@ const ResultsView: ResultsViewComponent = ({
460463
results={allProcessedResults}
461464
columns={columns}
462465
/>
466+
{header}
463467
<div className="relative">
464468
<div
465-
style={!showMenuIcons && !showInterface ? { display: "none" } : {}}
469+
style={hideMenuIcons ? { display: "none" } : {}}
466470
className="absolute right-0 z-10 p-1"
467471
>
468472
{onRefresh && (
@@ -1134,18 +1138,7 @@ const ResultsView: ResultsViewComponent = ({
11341138
}
11351139
/>
11361140
</div>
1137-
{header && (
1138-
<h4
1139-
style={{
1140-
display: "flex",
1141-
justifyContent: "space-between",
1142-
alignItems: "center",
1143-
margin: 4,
1144-
}}
1145-
>
1146-
{header}
1147-
</h4>
1148-
)}
1141+
11491142
{!hideResults && (
11501143
<>
11511144
{results.length !== 0 ? (

‎apps/roam/src/components/settings/GeneralSettings.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useMemo } from "react";
22
import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
33
import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
44
import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
5+
import { onPageRefObserverChange } from "~/utils/pageRefObserverHandlers";
6+
import { previewPageRefHandler } from "~/utils/pageRefObserverHandlers";
57
import refreshConfigTree from "~/utils/refreshConfigTree";
68

79
const DiscourseGraphHome = () => {
@@ -28,16 +30,9 @@ const DiscourseGraphHome = () => {
2830
uid={settings.preview.uid}
2931
parentUid={settings.settingsUid}
3032
value={settings.preview.value || false}
31-
/>
32-
<FlagPanel
33-
title="overlay"
34-
// description="Whether or not to overlay discourse context information over node references"
35-
description="Currently disabled. Being reworked."
36-
order={3}
37-
uid={settings.overlay.uid}
38-
parentUid={settings.grammarUid}
39-
value={settings.overlay.value || false}
40-
disabled={true}
33+
options={{
34+
onChange: onPageRefObserverChange(previewPageRefHandler),
35+
}}
4136
/>
4237
</div>
4338
<TextPanel

0 commit comments

Comments
 (0)