copyMemoUid(memo.uid)}>
- {memo.uid.slice(0, 8)}
+ {memo.uid.slice(0, 6)}
diff --git a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
index df8dfc55..55ee26e5 100644
--- a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
+++ b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
@@ -8,7 +8,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover
import { memoServiceClient } from "@/grpcweb";
import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
import useCurrentUser from "@/hooks/useCurrentUser";
-import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
+import { MemoRelation_Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
import { Memo, MemoView } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n";
import { EditorRefActions } from "../Editor";
@@ -34,7 +34,7 @@ const AddMemoRelationPopover = (props: Props) => {
(memo) =>
!selectedMemos.includes(memo) &&
memo.name !== context.memoName &&
- !context.relationList.some((relation) => relation.relatedMemo === memo.name),
+ !context.relationList.some((relation) => relation.relatedMemo?.name === memo.name),
);
useDebounce(
@@ -112,8 +112,8 @@ const AddMemoRelationPopover = (props: Props) => {
uniqBy(
[
...selectedMemos.map((memo) => ({
- memo: context.memoName || "",
- relatedMemo: memo.name,
+ memo: MemoRelation_Memo.fromPartial({ name: memo.name }),
+ relatedMemo: MemoRelation_Memo.fromPartial({ name: memo.name }),
type: MemoRelation_Type.REFERENCE,
})),
...context.relationList,
diff --git a/web/src/components/MemoEditor/RelationListView.tsx b/web/src/components/MemoEditor/RelationListView.tsx
index cfa6f43e..a67f73ce 100644
--- a/web/src/components/MemoEditor/RelationListView.tsx
+++ b/web/src/components/MemoEditor/RelationListView.tsx
@@ -19,7 +19,7 @@ const RelationListView = (props: Props) => {
const requests = relationList
.filter((relation) => relation.type === MemoRelation_Type.REFERENCE)
.map(async (relation) => {
- return await memoStore.getOrFetchMemoByName(relation.relatedMemo, { skipStore: true });
+ return await memoStore.getOrFetchMemoByName(relation.relatedMemo!.name, { skipStore: true });
});
const list = await Promise.all(requests);
setReferencingMemoList(list);
@@ -27,7 +27,7 @@ const RelationListView = (props: Props) => {
}, [relationList]);
const handleDeleteRelation = async (memo: Memo) => {
- setRelationList(relationList.filter((relation) => relation.relatedMemo !== memo.name));
+ setRelationList(relationList.filter((relation) => relation.relatedMemo?.name !== memo.name));
};
return (
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index e1c6b2db..5e38239a 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -80,7 +80,8 @@ const MemoEditor = (props: Props) => {
const [contentCache, setContentCache] = useLocalStorage
(contentCacheKey, "");
const referenceRelations = memoName
? state.relationList.filter(
- (relation) => relation.memo === memoName && relation.relatedMemo !== memoName && relation.type === MemoRelation_Type.REFERENCE,
+ (relation) =>
+ relation.memo?.name === memoName && relation.relatedMemo?.name !== memoName && relation.type === MemoRelation_Type.REFERENCE,
)
: state.relationList.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
const workspaceMemoRelatedSetting =
diff --git a/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx b/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
index 6004dc59..62c207cb 100644
--- a/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
+++ b/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
@@ -1,9 +1,10 @@
import { useColorScheme } from "@mui/joy";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
-import ForceGraph2D from "react-force-graph-2d";
+import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d";
+import useNavigateTo from "@/hooks/useNavigateTo";
import { Memo } from "@/types/proto/api/v1/memo_service";
-import { FGMethods } from "./types";
+import { LinkType, NodeType } from "./types";
import { convertMemoRelationsToGraphData } from "./utils";
interface Props {
@@ -15,9 +16,10 @@ const MAIN_NODE_COLOR = "#14b8a6";
const DEFAULT_NODE_COLOR = "#a1a1aa";
const MemoRelationForceGraph = ({ className, memo }: Props) => {
+ const navigateTo = useNavigateTo();
const { mode } = useColorScheme();
const containerRef = useRef(null);
- const graphRef = useRef(undefined);
+ const graphRef = useRef, LinkObject> | undefined>(undefined);
const [graphSize, setGraphSize] = useState({ width: 0, height: 0 });
useEffect(() => {
@@ -25,8 +27,9 @@ const MemoRelationForceGraph = ({ className, memo }: Props) => {
setGraphSize(containerRef.current.getBoundingClientRect());
}, []);
- const onNodeClick = () => {
- // TODO: Handle node click event
+ const onNodeClick = (node: NodeObject) => {
+ if (node.memo.uid === memo.uid) return;
+ navigateTo(`/m/${node.memo.uid}`);
};
return (
@@ -37,11 +40,15 @@ const MemoRelationForceGraph = ({ className, memo }: Props) => {
height={graphSize.height}
enableZoomInteraction
cooldownTicks={0}
- nodeColor={(node) => (node.name === memo.name ? MAIN_NODE_COLOR : DEFAULT_NODE_COLOR)}
+ nodeColor={(node) => (node.id === memo.name ? MAIN_NODE_COLOR : DEFAULT_NODE_COLOR)}
nodeRelSize={3}
- linkColor={() => (mode === "light" ? "" : "#525252")}
+ nodeLabel={(node) => node.memo.uid.slice(0, 6).toLowerCase()}
+ linkColor={() => (mode === "light" ? "#e4e4e7" : "#3f3f46")}
graphData={convertMemoRelationsToGraphData(memo.relations)}
onNodeClick={onNodeClick}
+ linkDirectionalArrowLength={3}
+ linkDirectionalArrowRelPos={1}
+ linkCurvature={0.25}
/>
);
diff --git a/web/src/components/MemoRelationForceGraph/types.ts b/web/src/components/MemoRelationForceGraph/types.ts
index 178500d1..83bedb65 100644
--- a/web/src/components/MemoRelationForceGraph/types.ts
+++ b/web/src/components/MemoRelationForceGraph/types.ts
@@ -1,11 +1,9 @@
-import { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d";
+import { MemoRelation_Memo } from "@/types/proto/api/v1/memo_relation_service";
export interface NodeType {
- name: string;
+ memo: MemoRelation_Memo;
}
export interface LinkType {
// ...add more additional properties relevant to the link here.
}
-
-export interface FGMethods extends ForceGraphMethods