YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-23 14:47:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: update relation graph checks

Browse Source
This commit is contained in:
johnnyjoy 2024-10-19 20:53:53 +08:00
parent 04d6329d0f
commit 435bd5c44f
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
View File

@ -1,6 +1,7 @@
import clsx from "clsx"; import clsx from "clsx";
import { isEqual } from "lodash-es"; import { isEqual } from "lodash-es";
import { CheckCircleIcon, Code2Icon, HashIcon, LinkIcon } from "lucide-react"; import { CheckCircleIcon, Code2Icon, HashIcon, LinkIcon } from "lucide-react";
import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
import { Memo, MemoProperty } from "@/types/proto/api/v1/memo_service"; import { Memo, MemoProperty } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import MemoRelationForceGraph from "../MemoRelationForceGraph"; import MemoRelationForceGraph from "../MemoRelationForceGraph";
@ -14,6 +15,7 @@ const MemoDetailSidebar = ({ memo, className }: Props) => {
const t = useTranslate(); const t = useTranslate();
const property = MemoProperty.fromPartial(memo.property || {}); const property = MemoProperty.fromPartial(memo.property || {});
const hasSpecialProperty = property.hasLink || property.hasTaskList || property.hasCode || property.hasIncompleteTasks; const hasSpecialProperty = property.hasLink || property.hasTaskList || property.hasCode || property.hasIncompleteTasks;
const shouldShowRelationGraph = memo.relations.filter((r) => r.type === MemoRelation_Type.REFERENCE).length > 0;
return ( return (
<aside <aside
@ -23,7 +25,7 @@ const MemoDetailSidebar = ({ memo, className }: Props) => {
)} )}
> >
<div className="flex flex-col justify-start items-start w-full px-1 gap-2 h-auto shrink-0 flex-nowrap hide-scrollbar"> <div className="flex flex-col justify-start items-start w-full px-1 gap-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
{memo.relations.length > 0 && ( {shouldShowRelationGraph && (
<div className="relative w-full h-36 border rounded-lg bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800"> <div className="relative w-full h-36 border rounded-lg bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
<MemoRelationForceGraph className="w-full h-full" memo={memo} /> <MemoRelationForceGraph className="w-full h-full" memo={memo} />
<span className="absolute top-1 left-2 text-xs opacity-60 font-mono">Relations</span> <span className="absolute top-1 left-2 text-xs opacity-60 font-mono">Relations</span>

3
web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
View File

@ -3,6 +3,7 @@ import clsx from "clsx";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d"; import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d";
import useNavigateTo from "@/hooks/useNavigateTo"; import useNavigateTo from "@/hooks/useNavigateTo";
import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
import { Memo } from "@/types/proto/api/v1/memo_service"; import { Memo } from "@/types/proto/api/v1/memo_service";
import { LinkType, NodeType } from "./types"; import { LinkType, NodeType } from "./types";
import { convertMemoRelationsToGraphData } from "./utils"; import { convertMemoRelationsToGraphData } from "./utils";
@ -44,7 +45,7 @@ const MemoRelationForceGraph = ({ className, memo }: Props) => {
nodeRelSize={3} nodeRelSize={3}
nodeLabel={(node) => node.memo.uid.slice(0, 6).toLowerCase()} nodeLabel={(node) => node.memo.uid.slice(0, 6).toLowerCase()}
linkColor={() => (mode === "light" ? "#e4e4e7" : "#3f3f46")} linkColor={() => (mode === "light" ? "#e4e4e7" : "#3f3f46")}
graphData={convertMemoRelationsToGraphData(memo.relations)} graphData={convertMemoRelationsToGraphData(memo.relations.filter((r) => r.type === MemoRelation_Type.REFERENCE))}
onNodeClick={onNodeClick} onNodeClick={onNodeClick}
linkDirectionalArrowLength={3} linkDirectionalArrowLength={3}
linkDirectionalArrowRelPos={1} linkDirectionalArrowRelPos={1}