From 737d85bf8b6af3a983d5c88846a9fb9ca62f7732 Mon Sep 17 00:00:00 2001 From: Joel Keyser Date: Thu, 24 Oct 2024 11:42:33 -0500 Subject: [PATCH] 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! )} - + ); };