ما در حال طراحی و توسعه یک پلتفرم شجره‌نامه خانوادگی هستیم. من بخش اصلی ان را طراحی کردم
تصحیح شجره‌نامه تعاملی (SVG/JS)
شامل موارد زیر
مشکلات موجود در pedigree visualization
- ❌ هم‌پوشانی خطوط اتصال والدین و فرزندان
برخی خطوط عمودی یا افقی از والد به فرزند روی هم افتاده‌اند یا با خطوط دیگر برخورد دارند.
مثال: سمت راست تصویر چندین خط روی هم آمده‌اند و ترتیب گراف در هم ریخته است.
- ❌ چیدمان غیراستاندارد خواهر و برادرها
فرزندان یک زوج به‌صورت غیر متقارن یا با فاصله‌های نامساوی رسم شده‌اند.
این باعث می‌شود نمودار از نظر ژنتیکی سخت‌تر خوانده شود.
- ❌ فاصله‌ی ناکافی بین نسل‌ها (نسل پایین به بالا خیلی نزدیک شده)
برخی خطوط فرزندان به والدین تقریباً به هم چسبیده‌اند.
این ممکن است ناشی از تنظیم نادرست y در drawParentConnections() یا عدم رعایت vertical spacing باشد.
- ❌ بزرگ بودن بیش از حد نمودار در عرض و نیاز به اسکرول افقی زیاد
نمودار در جهت افقی خیلی گسترده شده است.
به نظر می‌رسد sibling spacing یا x-offset بدون کنترل است.
❌ نبود خط ازدواج بین برخی والدین
برخی زوج‌ها فقط با یک خط مستقیم به فرزند وصل شده‌اند و خط بین زن و مرد دیده نمی‌شود (احتمالاً skip شده).
❌ شکل‌های بدون اطلاعات (ممکن است اشکال بدون نام یا ID ایجاد شده باشند)
در بعضی گره‌ها به نظر می‌رسد label با ID یا name خالی رسم شده یا متن overlap شده.
❌ فونت یا کاراکترهای عجیب در جنسیت
در لیست اعضا، علامت جنسیت به‌صورت کاراکتر اشتباه نمایش داده می‌شود (مثلاً: ♀ بجای ♀)
✳️ قابلیت‌های کلینیکی و ژنتیکی پیشرفته
افزودن فیلد برای جهش ژنتیکی (مثلاً: BRCA1 c.5266dupC)
فیلد “سن در زمان تشخیص” و “سن فوت”
نمایش افراد حامل (carrier) با نماد خاص (مثلاً نیمه پر یا هاشور)
نمایش وضعیت آزمایش ژنتیکی: Positive / Negative / Unknown
پشتیبانی از مدل‌های وراثت (نمایش بصری اتوزوم غالب، مغلوب، X-linked)
💾 ویژگی‌های مدیریت فایل
امکان ویرایش عضو موجود (با کلیک یا modal)
امکان حذف عضو و بازسازی نمودار
ذخیره و بارگذاری خودکار از LocalStorage یا cloud
Export به PNG یا PDF واقعی (با html2canvas یا jsPDF)
| دسته | قابل
🟧 نوع همکاری مورد انتظار:
در ابتدا: همکاری پروژه‌ای کوچک در پیاده‌سازی یک ماژول شجره‌نامه
⏱️ زمان‌بندی:
شروع فوری پس از انتخاب
کد شامل زیر است در HTML
<!DOCTYPE html>
<html lang=“en“>
<head>
<meta charset=“UTF-8“ />
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ />
<title>Progeny - Family Pedigree Visualization</title>
<link href=“https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap“ rel=“stylesheet“>
<style>
:root {
--primary: #4a6fa5;
--secondary: #6b8cae;
--accent: #ff7e5f;
--light: #f8f9fa;
--dark: #343a40;
--success: #28a745;
--danger: #dc3545;
--warning: #ffc107;
}
body {
font-family: 'Poppins', sans-serif;
background: #f0f2f5;
padding: 20px;
color: var(--dark);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
h1 {
color: var(--primary);
margin: 0;
font-size: 2.2rem;
}
.subtitle {
color: var(--secondary);
font-weight: 300;
margin-top: 5px;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
.panel {
background: white;
border-radius: 10px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
h2 {
color: var(--primary);
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: var(--dark);
}
input, select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
}
button {
background-color: var(--primary);
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
font-size: 1rem;
transition: background-color 0.3s;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #3a5a8a;
}
.btn-secondary {
background-color: var(--secondary);
}
.btn-secondary:hover {
background-color: #5a7c9e;
}
pedigreeSvg {
border: 1px solid #ddd;
background: #f9fafc;
width: 100%
