divan/DivanRazor/Pages/Partials/DivanPage/_PersonGraphPartial.cshtml
Anas Rashid 532d005cdb Rename Ganjoor -> Divan throughout the code
Projects (GanjooRazor -> DivanRazor, GanjoorService.sln -> DivanService.sln), files,
folders, classes, namespaces, settings, API routes (/api/divan) and DB tables (Divan*).
External addresses (ganjoor.net, github.com/ganjoor) unchanged. Migrations renamed
consistently (no pending model changes); requires a fresh database.
Upstream RUNNING_LOCALLY/SEMANTIC_SEARCH docs archived unmodified under docs/.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 23:49:01 +02:00

65 lines
3.6 KiB
Plaintext

@model DivanRazor.Pages._PersonGraphPartialModel
@if (Model.Graph == null || Model.Graph.Nodes == null || Model.Graph.Nodes.Count == 0)
{
<p>برای این بخش هنوز نامبرده‌ای برچسب‌گذاری نشده است.</p>
}
else
{
<div id="pg-cat-section">
<p class="up-hint"><small>
روی هر گره کلیک کنید تا فقط ارتباط‌های همان شخص برجسته شود (کلیک دوباره برای بازگشت)؛ برای جابه‌جایی یک گره آن را بکشید (برای رها کردنش دوبار کلیک کنید).
برای پیمایش نمودار آن را با ماوس بکشید و با غلتک ماوس بزرگ/کوچک کنید.
@if (Model.HasSecondaryNodes)
{
<text> گره‌های نقطه‌چین/کم‌رنگ، خویشاوندان یا وابستگانی هستند که در متن این بخش نامشان نیامده، اما برای آشنایی بیشتر با داستان نشان داده شده‌اند.</text>
}
</small></p>
<div style="margin-bottom:10px;">
<input type="text" id="pg-cat-search" placeholder="جستجوی نام نامبرده..." style="width:240px;" />
<a role="button" id="pg-cat-reset" class="up-btn up-btn--ghost up-btn--sm">نمایش همه</a>
<a role="button" href="javascript:void(0)" onclick="PeopleExplorer.open()" class="up-btn up-btn--ghost up-btn--sm">نمایش شبکهٔ کامل نامبردگان</a>
</div>
<div id="pg-cat-legend" class="pg-legend"></div>
<div id="pg-cat-container" style="position:relative;width:100%;height:55vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
<svg id="pg-cat-svg" width="100%" height="100%"></svg>
</div>
<div class="spacer">&nbsp;</div>
<div style="max-height:30vh;overflow:auto;">
<table class="up-table">
<thead>
<tr>
<th>شخص اول</th>
<th>نوع ارتباط</th>
<th>شخص دوم</th>
<th>یادداشت</th>
</tr>
</thead>
<tbody id="pg-cat-table-body"></tbody>
</table>
</div>
<style>
.pg-circle { fill: #fdf6e6; stroke: #8b6b4a; stroke-width: 1.5; }
.pg-circle-tree { fill: #f3e2b8; stroke: #7a4a2a; stroke-width: 2; }
.pg-circle-secondary { stroke-dasharray: 3,2; opacity: 0.7; }
.pg-label { font-size: 11px; fill: #4a3520; font-family: inherit; }
.pg-label-secondary { opacity: 0.7; font-style: italic; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pg-legend-item { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.pg-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
</style>
@* not an executable script - just a data holder, parsed and rendered explicitly by
loadPersonGraph() in bk.js once this fragment has been appended to the page, same
convention used for the JSON blob is deliberately not the ajax response's inline <script>
since script tags injected via $(data).appendTo(...) don't reliably auto-execute *@
<script type="application/json" id="pg-cat-data">@Html.Raw(Model.GraphDataJson)</script>
</div>
}