From 7f635aa5842adec1f1487cb3964bba5fdc54c72e Mon Sep 17 00:00:00 2001 From: Joel Keyser Date: Tue, 22 Oct 2024 11:01:18 -0500 Subject: [PATCH 1/8] fix(default-font-size): size nested context menu --- .../common/components/ContextMenu/AddNodeMenuItem.tsx | 9 ++------- .../components/ContextMenu/ChangeEdgeTypeMenuItem.tsx | 9 ++------- .../components/ContextMenu/ChangeNodeTypeMenuItem.tsx | 9 ++------- 3 files changed, 6 insertions(+), 21 deletions(-) diff --git a/src/web/common/components/ContextMenu/AddNodeMenuItem.tsx b/src/web/common/components/ContextMenu/AddNodeMenuItem.tsx index 46bc72a4..bb5082ae 100644 --- a/src/web/common/components/ContextMenu/AddNodeMenuItem.tsx +++ b/src/web/common/components/ContextMenu/AddNodeMenuItem.tsx @@ -30,13 +30,8 @@ export const AddNodeMenuItem = ({ parentMenuOpen }: Props) => { {shownNodeTypes.map((type) => ( addNodeWithoutParent(type, "diagram")}> diff --git a/src/web/common/components/ContextMenu/ChangeEdgeTypeMenuItem.tsx b/src/web/common/components/ContextMenu/ChangeEdgeTypeMenuItem.tsx index d2dc218b..e1365092 100644 --- a/src/web/common/components/ContextMenu/ChangeEdgeTypeMenuItem.tsx +++ b/src/web/common/components/ContextMenu/ChangeEdgeTypeMenuItem.tsx @@ -24,13 +24,8 @@ export const ChangeEdgeTypeMenuItem = ({ edge, parentMenuOpen }: Props) => { {getSameCategoryEdgeTypes(edge.label).map((type) => ( { {getSameCategoryNodeTypes(node.type).map((type) => ( Date: Tue, 22 Oct 2024 11:01:48 -0500 Subject: [PATCH 2/8] fix(default-font-size): size indicators --- src/web/topic/components/Indicator/Indicator.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/web/topic/components/Indicator/Indicator.tsx b/src/web/topic/components/Indicator/Indicator.tsx index 303e765d..e85b15b8 100644 --- a/src/web/topic/components/Indicator/Indicator.tsx +++ b/src/web/topic/components/Indicator/Indicator.tsx @@ -45,13 +45,8 @@ export const Indicator = ({ variant="contained" color="neutralContrast" onClick={onClickHandler} - sx={{ - pointerEvents: !onClick ? "none" : undefined, - // hover color diff for black is impossible to see, so a custom hover is added to darken the gray instead - "&:hover > svg": { - color: (theme) => theme.palette.neutral.dark, - }, - }} + // hover color for black button is impossible to see, so a custom hover is added to the svg instead of the button + className={`[&_>_svg]:hover:text-neutral-dark ${!onClick ? "pointer-events-none" : ""}`} > @@ -62,11 +57,8 @@ export const Indicator = ({ variant="contained" color={filled ? color : "paper"} onClick={onClickHandler} - sx={{ - border: "1px solid", - pointerEvents: !onClick ? "none" : undefined, - fontSize: "16px", // default seems to be 14px, but 16px fits more snuggly within button size - }} + // text-base seems to fit more snuggly than the default 14px + className={`border border-solid text-base ${!onClick ? "pointer-events-none" : ""}`} > From dcd9d03bb1d29dac742c9ff5b93c612387c23385 Mon Sep 17 00:00:00 2001 From: Joel Keyser Date: Tue, 22 Oct 2024 12:03:35 -0500 Subject: [PATCH 3/8] fix(default-font-size): layout and node size includes grabbing the default font size from the root element --- src/pages/_document.page.tsx | 20 +++++++++- .../components/Node/EditableNode.styles.tsx | 37 +++++-------------- .../topic/components/Node/EditableNode.tsx | 30 ++++++++------- src/web/topic/utils/layout.ts | 13 +++++-- 4 files changed, 54 insertions(+), 46 deletions(-) diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx index 627c12f4..190219c2 100644 --- a/src/pages/_document.page.tsx +++ b/src/pages/_document.page.tsx @@ -1,6 +1,24 @@ import { Head, Html, Main, NextScript } from "next/document"; -export const htmlDefaultFontSize = 16; // if we need to manually convert rem to px in many places, we can consider grabbing this from `html` +// grab default font size from root if we're on the client +// thanks https://stackoverflow.com/a/49299352 +export const htmlDefaultFontSize = + typeof window !== "undefined" && typeof document !== "undefined" + ? Number( + window + .getComputedStyle(document.documentElement) + .getPropertyValue("font-size") + // remove "px" from the end + .slice(0, -2), + ) + : 16; // default, should only be used if we're on the server, where our value should be overridden when on the client + +/** + * i.e. there's a px value that looks good with 16px font size, but if default font size is different, we should scale the px + * + * this should only be necessary where there's no option to use rem, i.e. for the layout algorithm + */ +export const scalePxViaDefaultFontSize = (px: number) => px * (htmlDefaultFontSize / 16); export default function Document() { return ( diff --git a/src/web/topic/components/Node/EditableNode.styles.tsx b/src/web/topic/components/Node/EditableNode.styles.tsx index d15f8449..4273aab7 100644 --- a/src/web/topic/components/Node/EditableNode.styles.tsx +++ b/src/web/topic/components/Node/EditableNode.styles.tsx @@ -6,42 +6,23 @@ import { ContentIndicators } from "@/web/topic/components/Indicator/ContentIndic import { StatusIndicators } from "@/web/topic/components/Indicator/StatusIndicators"; export const nodeWidthRem = 11; +const nodeHeightRem = 4.125; export const nodeWidthPx = nodeWidthRem * htmlDefaultFontSize; -export const nodeHeightPx = 66; +export const nodeHeightPx = nodeHeightRem * htmlDefaultFontSize; -export const YEdgeBox = styled(Box)` - display: flex; - justify-content: space-between; - align-items: center; -`; +export const TopDiv = styled.div``; +export const NodeTypeDiv = styled.div``; -export const NodeTypeBox = styled(Box)` - display: flex; - height: 24px; - align-items: center; -`; - -export const NodeTypeSpan = styled.span` - font-size: 0.875rem; - line-height: 1; - padding-right: 4px; -`; +export const NodeTypeSpan = styled.span``; export const IndicatorDiv = styled.div` display: flex; `; -export const XEdgeDiv = styled.div` - width: 24px; -`; - // allow handling mouse events for whole node without mouse icon changing to input for textarea -export const MiddleDiv = styled.div` - display: flex; - flex-grow: 1; // fill out remaining space with this div because it contains the textarea - padding: 4px 4px 8px; -`; +export const MiddleDiv = styled.div``; +export const BottomDiv = styled.div``; export const StyledTextareaAutosize = styled(TextareaAutosize)` padding: 0; @@ -102,7 +83,7 @@ export const RightCornerContentIndicators = styled(ContentIndicators)` right: 0; bottom: 0; // amount that looks decent hanging over the edge of node - transform: translate(10px, 65%); + transform: translate(0.625rem, 65%); `; export const LeftCornerStatusIndicators = styled(StatusIndicators)` @@ -110,5 +91,5 @@ export const LeftCornerStatusIndicators = styled(StatusIndicators)` left: 0; bottom: 0; // amount that looks decent hanging over the edge of node - transform: translate(-10px, 65%); + transform: translate(-0.625px, 65%); `; diff --git a/src/web/topic/components/Node/EditableNode.tsx b/src/web/topic/components/Node/EditableNode.tsx index 634cd86f..6c1e575f 100644 --- a/src/web/topic/components/Node/EditableNode.tsx +++ b/src/web/topic/components/Node/EditableNode.tsx @@ -6,14 +6,15 @@ import { openContextMenu } from "@/web/common/store/contextMenuActions"; import { clearNewlyAddedNode, isNodeNewlyAdded } from "@/web/common/store/ephemeralStore"; import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicators"; import { + BottomDiv, LeftCornerStatusIndicators, MiddleDiv, NodeBox, - NodeTypeBox, + NodeTypeDiv, NodeTypeSpan, RightCornerContentIndicators, StyledTextareaAutosize, - YEdgeBox, + TopDiv, } from "@/web/topic/components/Node/EditableNode.styles"; import { WorkspaceContext } from "@/web/topic/components/TopicWorkspace/WorkspaceContext"; import { setCustomNodeType, setNodeLabel } from "@/web/topic/store/actions"; @@ -91,17 +92,17 @@ const EditableNodeBase = ({ node, className = "" }: Props) => { backgroundColor: "white", borderColor: color, - [NodeTypeBox.toString()]: { + [NodeTypeDiv.toString()]: { backgroundColor: color, // anti-aliasing between white node background and colored border/icon background creates a gray line - add colored shadow to hide this https://stackoverflow.com/a/40100710/8409296 boxShadow: `-1px -1px 0px 1px ${color}`, }, - [`&.selected ${NodeTypeBox.toString()}`]: { + [`&.selected ${NodeTypeDiv.toString()}`]: { boxShadow: "-1px -1px 0px 1px black", }, - [`&.spotlight-secondary ${NodeTypeBox.toString()}`]: { + [`&.spotlight-secondary ${NodeTypeDiv.toString()}`]: { boxShadow: `-1px -1px 0px 1px ${theme.palette.info.main}`, }, }; @@ -115,9 +116,9 @@ const EditableNodeBase = ({ node, className = "" }: Props) => { onContextMenu={(event) => openContextMenu(event, { node })} sx={nodeStyles} > - - - + + + { if (text && text !== nodeDecoration.title && text !== node.data.customType) setCustomNodeType(node, text); }} - className="nopan" + className="nopan pr-1 text-sm leading-none" > {typeText} - + - - + + {/* grow to fill out remaining space with this div because it contains the textarea */} + { readOnly={!editable} /> - + {node.type !== "rootClaim" && ( // root claim indicators don't seem very helpful <> {/* TODO?: how to make corner indicators not look bad in the table? they're cut off */} @@ -159,7 +161,7 @@ const EditableNodeBase = ({ node, className = "" }: Props) => { /> )} - + ); }; diff --git a/src/web/topic/utils/layout.ts b/src/web/topic/utils/layout.ts index 19237a9a..c0cf1d77 100644 --- a/src/web/topic/utils/layout.ts +++ b/src/web/topic/utils/layout.ts @@ -1,6 +1,7 @@ import ELK, { ElkNode, LayoutOptions } from "elkjs"; import { NodeType, nodeTypes } from "@/common/node"; +import { scalePxViaDefaultFontSize } from "@/pages/_document.page"; import { nodeHeightPx, nodeWidthPx } from "@/web/topic/components/Node/EditableNode.styles"; import { Diagram } from "@/web/topic/utils/diagram"; import { type Edge, type Node } from "@/web/topic/utils/graph"; @@ -105,13 +106,19 @@ export const layout = async ( // tried using `position` to do this but it doesn't group nodes near their source node "elk.layered.considerModelOrder.strategy": "PREFER_NODES", // these spacings are just what roughly seem to look good - "elk.layered.spacing.nodeNodeBetweenLayers": orientation === "DOWN" ? "130" : "220", - "elk.spacing.nodeNode": orientation === "DOWN" ? "20" : "50", + "elk.layered.spacing.nodeNodeBetweenLayers": + orientation === "DOWN" + ? scalePxViaDefaultFontSize(130).toString() + : scalePxViaDefaultFontSize(220).toString(), + "elk.spacing.nodeNode": + orientation === "DOWN" + ? scalePxViaDefaultFontSize(20).toString() + : scalePxViaDefaultFontSize(50).toString(), // allow nodes to be partitioned into layers by type "elk.partitioning.activate": partition ? "true" : "false", // ensure node islands don't overlap (needed for when node has 3 rows of text) // also keep node islands ("components") significantly spaced out, so they can be easily seen as separate - "elk.spacing.componentComponent": "150", // default is 20 + "elk.spacing.componentComponent": scalePxViaDefaultFontSize(150).toString(), // default is 20 // e.g. if no problem ties solutions together, still put those solutions into the same partition (if partitions are on) // want this off for cases when islands are truly unrelated, but on for when we're just hiding edges "elk.separateConnectedComponents": layerNodeIslandsTogether ? "false" : "true", From 0b644704054a47eec08eb423d064c3c5bfcb8d5b Mon Sep 17 00:00:00 2001 From: Joel Keyser Date: Tue, 22 Oct 2024 13:53:06 -0500 Subject: [PATCH 4/8] fix(default-font-size): justification section --- .../TopicPane/DetailsJustificationSection.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/web/topic/components/TopicPane/DetailsJustificationSection.tsx b/src/web/topic/components/TopicPane/DetailsJustificationSection.tsx index 21f19b59..1ef6cb37 100644 --- a/src/web/topic/components/TopicPane/DetailsJustificationSection.tsx +++ b/src/web/topic/components/TopicPane/DetailsJustificationSection.tsx @@ -1,11 +1,11 @@ import { ThumbsUpDown } from "@mui/icons-material"; -import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"; +import { Box, ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"; import { justificationNodeTypes } from "@/common/node"; import { JustificationTreeIndicator } from "@/web/topic/components/Indicator/JustificationTreeIndicator"; import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton"; import { EditableNode } from "@/web/topic/components/Node/EditableNode"; -import { nodeWidthPx } from "@/web/topic/components/Node/EditableNode.styles"; +import { nodeWidthRem } from "@/web/topic/components/Node/EditableNode.styles"; import { useTopLevelJustification } from "@/web/topic/store/graphPartHooks"; import { GraphPart, isNode } from "@/web/topic/utils/graph"; import { isJustificationEdge } from "@/web/topic/utils/justification"; @@ -67,29 +67,27 @@ export const DetailsJustificationSection = ({ graphPart }: Props) => { /> - div": { width: `${nodeWidthRem}rem` } }} > - +
{supports.length > 0 ? ( supports.map((support) => ) ) : ( No supports yet! )} - +
- +
{critiques.length > 0 ? ( critiques.map((critique) => ) ) : ( No critiques yet! )} - - +
+ ); }; From 24d7c4c04e99686b640b372d7dd479eb71ebc723 Mon Sep 17 00:00:00 2001 From: Joel Keyser Date: Tue, 22 Oct 2024 14:05:20 -0500 Subject: [PATCH 5/8] fix(default-font-size): headline --- src/web/home/Headline.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/web/home/Headline.tsx b/src/web/home/Headline.tsx index a09c1594..73b01393 100644 --- a/src/web/home/Headline.tsx +++ b/src/web/home/Headline.tsx @@ -19,8 +19,13 @@ const RotatingDescriptors = () => { with an open mind - {/* size the text space to a line's worth, while allowing the rotating words to be absolute and appear in the same spot as each other */} -
+ {/* + size the text space to the largest of the lines (a line's worth except for small screen + big font), + while allowing the rotating words to be absolute and appear in the same spot as each other + */} + + with an open mind + ); }; From a969538e21abc0bb820665f9fe62b33d82c2e3de Mon Sep 17 00:00:00 2001 From: Joel Keyser Date: Tue, 22 Oct 2024 14:37:28 -0500 Subject: [PATCH 6/8] fix(default-font-size): header & toolbar --- src/web/common/components/Header.tsx | 4 ++-- src/web/topic/components/TopicWorkspace/WorkspaceToolbar.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/web/common/components/Header.tsx b/src/web/common/components/Header.tsx index d8b28b6f..f5bdbf3c 100644 --- a/src/web/common/components/Header.tsx +++ b/src/web/common/components/Header.tsx @@ -41,9 +41,9 @@ export const Header = () => { const isLoggedIn = sessionUser != null; return ( - + -
+
setIsSiteDrawerOpen(true)} className="block p-0 sm:hidden"> diff --git a/src/web/topic/components/TopicWorkspace/WorkspaceToolbar.tsx b/src/web/topic/components/TopicWorkspace/WorkspaceToolbar.tsx index a2b9e095..406b4761 100644 --- a/src/web/topic/components/TopicWorkspace/WorkspaceToolbar.tsx +++ b/src/web/topic/components/TopicWorkspace/WorkspaceToolbar.tsx @@ -68,7 +68,7 @@ export const WorkspaceToolbar = () => { }, []); return ( - + Date: Thu, 24 Oct 2024 10:37:11 -0500 Subject: [PATCH 7/8] fix(default-font-size): landing page lots of grid -> flex with wrap, because large font-size makes it hard to predict grid-cols based on only screen size, where flex-wrap allows jumping to next row if there's any overflow. --- .../SubscribeForm/SubscribeForm.tsx | 23 +++++-------------- src/web/home/Footer.tsx | 2 +- src/web/home/ImprovingSection.tsx | 2 +- src/web/home/UseCasesSection.tsx | 6 +++-- 4 files changed, 12 insertions(+), 21 deletions(-) diff --git a/src/web/common/components/SubscribeForm/SubscribeForm.tsx b/src/web/common/components/SubscribeForm/SubscribeForm.tsx index 68c6de15..e0fcf729 100644 --- a/src/web/common/components/SubscribeForm/SubscribeForm.tsx +++ b/src/web/common/components/SubscribeForm/SubscribeForm.tsx @@ -1,5 +1,5 @@ import { Check } from "@mui/icons-material"; -import { Box, Button, InputBase, Typography, useTheme } from "@mui/material"; +import { Button, InputBase, Typography } from "@mui/material"; import { ReactNode, useState } from "react"; interface Props { @@ -10,11 +10,10 @@ interface Props { } export const SubscribeForm = ({ header, headerAnchor, action, buttonText }: Props) => { - const theme = useTheme(); const [submitted, setSubmitted] = useState(false); return ( -
+
{header} {headerAnchor} @@ -29,23 +28,13 @@ export const SubscribeForm = ({ header, headerAnchor, action, buttonText }: Prop style={{ display: "flex", justifyContent: "center" }} onSubmit={() => setSubmitted(true)} > - +
- +
{submitted && ( diff --git a/src/web/home/Footer.tsx b/src/web/home/Footer.tsx index 988b626f..ffbbab5b 100644 --- a/src/web/home/Footer.tsx +++ b/src/web/home/Footer.tsx @@ -16,7 +16,7 @@ import { export const Footer = () => { return ( -
+
Ameliorate diff --git a/src/web/home/ImprovingSection.tsx b/src/web/home/ImprovingSection.tsx index 9c45177a..83599a5b 100644 --- a/src/web/home/ImprovingSection.tsx +++ b/src/web/home/ImprovingSection.tsx @@ -25,7 +25,7 @@ export const ImprovingSection = () => {
-
+
{ return (
- Work Constructively + + Work Constructively + -
+
Date: Thu, 24 Oct 2024 11:42:33 -0500 Subject: [PATCH 8/8] refactor: make details node lists consistent also slightly increase gap to make it closer to the gap between justifcations in the justification details. --- .../TopicPane/DetailsResearchSection.tsx | 12 +++------- .../components/TopicPane/FactDetails.tsx | 24 ++++--------------- .../topic/components/TopicPane/NodeList.tsx | 14 +++++++++++ .../components/TopicPane/QuestionDetails.tsx | 13 +++------- .../components/TopicPane/SourceDetails.tsx | 24 ++++--------------- 5 files changed, 30 insertions(+), 57 deletions(-) create mode 100644 src/web/topic/components/TopicPane/NodeList.tsx diff --git a/src/web/topic/components/TopicPane/DetailsResearchSection.tsx b/src/web/topic/components/TopicPane/DetailsResearchSection.tsx index c96b997d..64674cc0 100644 --- a/src/web/topic/components/TopicPane/DetailsResearchSection.tsx +++ b/src/web/topic/components/TopicPane/DetailsResearchSection.tsx @@ -3,6 +3,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton"; import { EditableNode } from "@/web/topic/components/Node/EditableNode"; +import { NodeList } from "@/web/topic/components/TopicPane/NodeList"; import { useResearchNodes } from "@/web/topic/store/graphPartHooks"; import { Node } from "@/web/topic/utils/graph"; @@ -70,14 +71,7 @@ export const DetailsResearchSection = ({ node }: Props) => { )} - + {researchNodes.length > 0 ? ( researchNodes.map((researchNode) => ( @@ -85,7 +79,7 @@ export const DetailsResearchSection = ({ node }: Props) => { ) : ( No research nodes yet! )} - + ); }; diff --git a/src/web/topic/components/TopicPane/FactDetails.tsx b/src/web/topic/components/TopicPane/FactDetails.tsx index 786d08b3..1a46cedb 100644 --- a/src/web/topic/components/TopicPane/FactDetails.tsx +++ b/src/web/topic/components/TopicPane/FactDetails.tsx @@ -4,6 +4,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma import { StandaloneEdge } from "@/web/topic/components/Edge/StandaloneEdge"; import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton"; import { EditableNode } from "@/web/topic/components/Node/EditableNode"; +import { NodeList } from "@/web/topic/components/TopicPane/NodeList"; import { useFactDetails } from "@/web/topic/store/nodeTypeHooks"; import { Node } from "@/web/topic/utils/graph"; @@ -23,14 +24,7 @@ export const FactDetails = ({ factNode }: Props) => { - + {nodesRelevantFor.length === 0 && edgesRelevantFor.length === 0 && ( No relevant parts yet! )} @@ -38,7 +32,7 @@ export const FactDetails = ({ factNode }: Props) => { nodesRelevantFor.map((node) => )} {edgesRelevantFor.length > 0 && edgesRelevantFor.map((edge) => )} - + @@ -61,21 +55,13 @@ export const FactDetails = ({ factNode }: Props) => { /> - + {sources.length > 0 ? ( sources.map((source) => ) ) : ( No sources yet! )} - + ); }; diff --git a/src/web/topic/components/TopicPane/NodeList.tsx b/src/web/topic/components/TopicPane/NodeList.tsx new file mode 100644 index 00000000..a8a5cf45 --- /dev/null +++ b/src/web/topic/components/TopicPane/NodeList.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from "react"; + +interface Props { + className?: string; + children: ReactNode; +} + +export const NodeList = ({ className, children }: Props) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/web/topic/components/TopicPane/QuestionDetails.tsx b/src/web/topic/components/TopicPane/QuestionDetails.tsx index e1f2b745..fdfc995a 100644 --- a/src/web/topic/components/TopicPane/QuestionDetails.tsx +++ b/src/web/topic/components/TopicPane/QuestionDetails.tsx @@ -4,6 +4,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma import { StandaloneEdge } from "@/web/topic/components/Edge/StandaloneEdge"; import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton"; import { EditableNode } from "@/web/topic/components/Node/EditableNode"; +import { NodeList } from "@/web/topic/components/TopicPane/NodeList"; import { useQuestionDetails } from "@/web/topic/store/nodeTypeHooks"; import { Node, isNode } from "@/web/topic/utils/graph"; @@ -58,21 +59,13 @@ export const QuestionDetails = ({ questionNode }: Props) => { /> - + {answers.length > 0 ? ( answers.map((answer) => ) ) : ( No answers yet! )} - + ); }; diff --git a/src/web/topic/components/TopicPane/SourceDetails.tsx b/src/web/topic/components/TopicPane/SourceDetails.tsx index 530623fa..3dbba218 100644 --- a/src/web/topic/components/TopicPane/SourceDetails.tsx +++ b/src/web/topic/components/TopicPane/SourceDetails.tsx @@ -4,6 +4,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma import { StandaloneEdge } from "@/web/topic/components/Edge/StandaloneEdge"; import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton"; import { EditableNode } from "@/web/topic/components/Node/EditableNode"; +import { NodeList } from "@/web/topic/components/TopicPane/NodeList"; import { useSourceDetails } from "@/web/topic/store/nodeTypeHooks"; import { Node } from "@/web/topic/utils/graph"; @@ -24,14 +25,7 @@ export const SourceDetails = ({ sourceNode }: Props) => { - + {nodesRelevantFor.length === 0 && edgesRelevantFor.length === 0 && ( No relevant parts yet! )} @@ -39,7 +33,7 @@ export const SourceDetails = ({ sourceNode }: Props) => { nodesRelevantFor.map((node) => )} {edgesRelevantFor.length > 0 && edgesRelevantFor.map((edge) => )} - + @@ -73,21 +67,13 @@ export const SourceDetails = ({ sourceNode }: Props) => { /> - + {mentions.length > 0 ? ( mentions.map((mentioned) => ) ) : ( No mentioned facts or sources yet! )} - + ); };