Hyein/HM-Program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify search path highlighting

Browse Source
This commit is contained in:
김혜인
2026-06-25 16:30:02 +09:00
parent 3771971f3e
commit 79cda65da9
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.jsx
View File

@@ -2414,7 +2414,7 @@ function RelationTreePanel({
<path d="M 0 0 L 7 3.5 L 0 7 z" fill="#f97316" />
</marker>
<marker id="sidebar-relation-arrow-search" markerWidth="7" markerHeight="7" refX="6.5" refY="3.5" orient="auto" markerUnits="strokeWidth">
<path d="M 0 0 L 7 3.5 L 0 7 z" fill="#0ea5e9" />
<path d="M 0 0 L 7 3.5 L 0 7 z" fill="#eab308" />
</marker>
</defs>
{relations.map((relation) => {
@@ -2482,7 +2482,7 @@ function RelationTreePanel({
<path
d={pathD}
fill="none"
stroke={isSelectedRelation ? '#fed7aa' : '#bae6fd'}
stroke={isSelectedRelation ? '#fed7aa' : '#fef08a'}
strokeWidth={isSelectedRelation ? '5.5' : '6'}
strokeLinecap="round"
opacity={isSelectedRelation ? '0.65' : '0.8'}
@@ -2492,7 +2492,7 @@ function RelationTreePanel({
<path
d={pathD}
fill="none"
stroke={isSelectedRelation ? '#f97316' : isSearchedRelation ? '#0ea5e9' : isSkipEdge ? '#7c3aed' : '#2563eb'}
stroke={isSelectedRelation ? '#f97316' : isSearchedRelation ? '#eab308' : isSkipEdge ? '#7c3aed' : '#2563eb'}
strokeWidth={isSelectedRelation ? '2.9' : isSearchedRelation ? '3.2' : isSkipEdge ? '2.2' : '2'}
strokeDasharray={isSkipEdge ? '6 5' : undefined}
opacity={isSelectedRelation || isSearchedRelation ? '1' : isSkipEdge ? '0.82' : '1'}
@@ -2562,15 +2562,15 @@ function RelationTreePanel({
<div className="mt-3 space-y-2">
{stepSearchResult?.programPath?.length ? (
<>
<div className="rounded-2xl bg-sky-50/70 px-3 py-2 ring-1 ring-sky-100">
<div className="rounded-2xl bg-yellow-50/70 px-3 py-2 ring-1 ring-yellow-100">
<div className="flex flex-wrap items-center gap-1.5">
{stepSearchResult.programPath.map((program, index) => (
<React.Fragment key={program.id}>
<span className={`rounded-full px-2.5 py-1 text-[11px] font-black ring-1 ${index === stepSearchResult.programPath.length - 1 ? 'bg-sky-100 text-sky-800 ring-sky-200' : 'bg-white text-slate-700 ring-slate-200'}`}>
<span className={`rounded-full px-2.5 py-1 text-[11px] font-black ring-1 ${index === stepSearchResult.programPath.length - 1 ? 'bg-yellow-100 text-yellow-800 ring-yellow-200' : 'bg-white text-slate-700 ring-slate-200'}`}>
{program.name}
</span>
{index < stepSearchResult.programPath.length - 1 && (
<ArrowRight className="h-3.5 w-3.5 text-sky-500" />
<ArrowRight className="h-3.5 w-3.5 text-yellow-500" />
)}
</React.Fragment>
))}