Heredo-familial history

​

Overview

• Document vital status and age of family members
• Assign pathologies from the catalog using drag-and-drop
• Add custom pathologies not in the catalog
• Track hereditary disease patterns
• Generate family health reports

​

Family member structure

​

Drag-and-drop interface

​

Pathologies available section

• Grip icon (⋮⋮) indicating it can be dragged
• Pathology name
• Count badge showing total available pathologies
• Settings icon linking to the pathology catalog

​

Assigning pathologies

​

Sex-based validation

• Cannot receive male-specific pathologies
• Error message: “La patología ‘[name]’ es específica de sexo Masculino y no puede ser asignada a [member].”

• Cannot receive female-specific pathologies
• Error message: “La patología ‘[name]’ es específica de sexo Femenino y no puede ser asignada a [member].”

• Can receive any pathology since the group can be mixed gender

​

Family member fields

​

Vital status (Estado Vital)

• Vivo/Viva (Alive)
• Fallecido/Fallecida (Deceased)
• Desconocido (Unknown)

​

Age (Edad)

• Current age (if alive)
• Age at death (if deceased)

​

Pathologies (Patologías)

• Shows placeholder text: “Arrastre patologías aquí”
• Highlights blue when dragging over: “Suelte aquí la patología”
• Displays assigned pathologies as removable tags
• Prevents duplicate pathology assignments

​

Observations (Observaciones)

• Additional context about conditions
• Family member’s medical history notes
• Age at diagnosis
• Disease progression details

​

Pathology catalog integration

const { data: activePatologiesData, isLoading, error } = useQuery<AppPatology[]>({
  queryKey: ['activePatologies'],
  queryFn: () => api.patologies.getAllActive(),
  staleTime: 5 * 60 * 1000, // Data fresh for 5 minutes
});

​

Managing the catalog

• Navigate to Settings → Pathology Catalog
• Add new pathologies with sex classification
• Activate/deactivate pathologies
• Edit existing entries

​

Drag-and-drop implementation

​

Mouse and touch support

• MouseSensor: Requires 8px movement before drag starts (prevents accidental drags)
• TouchSensor: 200ms delay with 5px tolerance (optimized for mobile)

​

Visual feedback

• DragOverlay: Shows semi-transparent pathology tag while dragging
• Drop zone highlight: Blue background with ring border
• Cursor changes: From grab (⊕) to grabbing (⊙) during drag

​

Data structure

{
  id: string,                    // Database ID (if saved)
  miembro_fam_key: string,       // Family member identifier
  estado_vital: string,          // Vital status
  edad: number,                  // Age
  patologias: [                  // Array of conditions
    {
      nPatologia: string         // Pathology name
    }
  ],
  observaciones: string          // Notes
}

​

Saving the family history

• Save all family member data in one operation
• Create or update records for each family member
• Only save members with relevant data (vital status or pathologies)

​

Generate report

• Complete family health history
• Organized by family member
• Pathologies listed for each relative
• Print-friendly format
• Patient identification header

​

Instructions panel

1. Arrastre desde “Patologías Disponibles” al familiar correspondiente
2. Al soltarlas, se asignarán automáticamente
3. Complete estado vital, edad y observaciones de cada familiar
4. Presione “Guardar” para confirmar cambios

​

Identifying hereditary patterns

​

Common hereditary conditions

• Breast cancer in multiple female relatives (BRCA genes)
• Colon cancer in multiple generations (Lynch syndrome)
• Multiple cancer types in family (Li-Fraumeni)

• Early heart attacks (<55 men, <65 women)
• Familial hypercholesterolemia
• Hypertension across generations

• Diabetes Type 2 in multiple relatives
• Thyroid disease patterns
• Obesity across family

• Depression, anxiety, bipolar disorder
• Alzheimer’s and dementia
• Schizophrenia

​

Clinical workflow

​

During patient interview

1. Start with first-degree relatives: Parents, siblings
2. Ask about vital status: Confirm if alive or deceased
3. Document ages: Current age or age at death
4. Inquire about diagnoses: Known health conditions
5. Note age at diagnosis: Important for risk assessment
6. Move to second-degree: Grandparents
7. Ask about patterns: Multiple relatives with same condition

​

Risk assessment

• Identify high-risk patients for screening
• Recommend preventive measures
• Consider genetic testing when appropriate
• Adjust screening schedules (earlier/more frequent)
• Provide patient education about risks

​

Best practices

​

Effective data collection

• Use pedigree symbols: Consider drawing a traditional pedigree alongside digital entry
• Verify information: Ask patient to confirm with relatives when uncertain
• Update regularly: Family history changes as relatives age or develop conditions
• Document unknowns: Record when patient doesn’t know family history

​

Genetic counseling indicators

​

Source code reference

• /workspace/source/src/pages/HeredoFamHistory.tsx (930 lines)
• Uses @dnd-kit/core for drag-and-drop functionality
• React Hook Form with Zod validation
• React Query for pathology catalog loading

• DraggablePathologyTag: Individual pathology with drag handle
• DroppableFamilyRow: Family member row accepting drops
• DragOverlay: Visual feedback during drag

• api.heredoFamilialHistory.getAllByPatientId()
• api.heredoFamilialHistory.createOrUpdate()
• api.patologies.getAllActive()

export const FIXED_FAMILY_MEMBERS = [
  { key: 'Madre', label: 'Madre' },
  { key: 'Abuela (Materna)', label: 'Abuela Materna' },
  // ... 7 total members
];