style: restyling and ready to print

src/components/App.tsx

@@ -29,6 +29,7 @@ function App(props: AppProps) {
 
   const [split, setSplitValue] = useCache('split', !!props.split);
   const [hidePersonCode, setHideCode] = useCache('hideCode', false);
+  const [hidePersonIg, setHideIg] = useCache('hideCode', false);
   const [editMode, setEditModeValue] = useState(false);
 
   const [modalPerson, setModalPerson] = useState(null as Person | null);
@@ -123,6 +124,7 @@ function App(props: AppProps) {
         split,
         editMode,
         hidePersonCode,
+        hidePersonIg,
         treeMap,
         setTreesValue,
         upsertPerson,
@@ -145,12 +147,23 @@ function App(props: AppProps) {
           <FormGroup switch>
             <Input
               type="switch"
-              checked={hidePersonCode}
+              checked={!hidePersonCode}
               id="hidePersonCode-switch"
               onChange={() => setHideCode(!hidePersonCode)}
             />
             <Label for="hidePersonCode-switch" check>
-              Hide Code
+              Show Code
+            </Label>
+          </FormGroup>
+          <FormGroup switch>
+            <Input
+              type="switch"
+              checked={!hidePersonIg}
+              id="hidePersonIg-switch"
+              onChange={() => setHideIg(!hidePersonIg)}
+            />
+            <Label for="hidePersonIg-switch" check>
+              Show Instagram
             </Label>
           </FormGroup>
           <FormGroup switch className="mb-3">

src/components/AppContext.tsx

@@ -5,6 +5,7 @@ interface AppContextValue {
   split: boolean;
   editMode: boolean;
   hidePersonCode: boolean;
+  hidePersonIg: boolean;
   setTreesValue: (ps: Person[]) => void;
   upsertPerson: (p: Person) => void;
   deletePerson: (p: Person) => void;
@@ -15,6 +16,7 @@ const AppContext = createContext<AppContextValue>({
   split: false,
   editMode: false,
   hidePersonCode: false,
+  hidePersonIg: false,
   setTreesValue: () => {},
   upsertPerson: () => {},
   deletePerson: () => {},

src/components/Family.tsx

@@ -3,7 +3,7 @@ import { Person } from '../family.interface';
 import AppContext from './AppContext';
 import FamilyGrid from './FamilyGrid';
 import FamilyDiagram from './FamilyDiagram';
-import { explodeTrees } from '../family.util';
+import { explodeTrees, idAsNickName } from '../family.util';
 
 interface FamilyProps {
   trees: Person[];
@@ -24,7 +24,9 @@ function SplitFamilies({ trees, ...props }: FamilyProps) {
       {people.map(tree => (
         <Fragment key={tree.id}>
           <hr className="d-print-none" />
-          <h3 className="text-center">{tree.name ?? tree.id} Family</h3>
+          <h3 className="text-center">
+            {tree.name ?? idAsNickName(tree.id)} Family
+          </h3>
           <FamilyDiagram trees={[tree]} depth={2} />
           <FamilyGrid {...props} trees={[tree]} />
         </Fragment>

src/components/FamilyDiagram.tsx

@@ -5,6 +5,13 @@ import * as go from 'gojs';
 import { isEqual, cloneDeep } from 'lodash';
 import GenogramLayout from '../GenogramLayout';
 
+const SLASH_COLOR = '#d4071c'; // red
+const MALE_COLOR = '#c5ecff'; // Aesthetic Pastel non photo blue
+const FEMALE_COLOR = '#fee6ff'; // Aesthetic Pastel pink lavender
+const SHAPE_LINE_COLOR = '#a1a1a1';
+const MARRIAGE_LINE_COLOR = '#5d8cc1'; // blue
+const CHILD_LINE_COLOR = '#919191';
+
 interface FamilyDiagramProps {
   trees: Person[];
   depth?: number;
@@ -70,7 +77,7 @@ class DiagramUtil {
 
     // determine the color for each attribute shape
     function attrFill(a: String) {
-      if (a === 'S') return '#d4071c'; // red
+      if (a === 'S') return SLASH_COLOR; // red
       return 'transparent';
     }
 
@@ -90,17 +97,16 @@ class DiagramUtil {
           locationSpot: go.Spot.Center,
           locationObjectName: 'ICON',
           selectionObjectName: 'ICON',
+          selectable: false,
         },
-        new go.Binding('opacity', 'hide', h => (h ? 0 : 1)),
-        new go.Binding('pickable', 'hide', h => !h),
         $(go.Panel,
           { name: 'ICON' },
           $(go.Shape, 'Square', {
             width: 40,
             height: 40,
             strokeWidth: 2,
-            fill: 'white',
-            stroke: '#919191',
+            fill: MALE_COLOR,
+            stroke: SHAPE_LINE_COLOR,
             portId: '',
           }),
           $(go.Panel,
@@ -121,7 +127,6 @@ class DiagramUtil {
           {
             textAlign: 'center',
             maxSize: new go.Size(80, NaN),
-            background: 'rgba(255,255,255,0.5)',
           },
           new go.Binding('text', 'name')
         )
@@ -135,17 +140,16 @@ class DiagramUtil {
           locationSpot: go.Spot.Center,
           locationObjectName: 'ICON',
           selectionObjectName: 'ICON',
+          selectable: false,
         },
-        new go.Binding('opacity', 'hide', h => (h ? 0 : 1)),
-        new go.Binding('pickable', 'hide', h => !h),
         $(go.Panel,
           { name: 'ICON' },
           $(go.Shape, 'Circle', {
             width: 40,
             height: 40,
             strokeWidth: 2,
-            fill: 'white',
-            stroke: '#a1a1a1',
+            fill: FEMALE_COLOR,
+            stroke: SHAPE_LINE_COLOR,
             portId: '',
           }),
           $(go.Panel,
@@ -166,7 +170,6 @@ class DiagramUtil {
           {
             textAlign: 'center',
             maxSize: new go.Size(80, NaN),
-            background: 'rgba(255,255,255,0.5)',
           },
           new go.Binding('text', 'name')
         )
@@ -192,7 +195,7 @@ class DiagramUtil {
           layerName: 'Background',
           selectable: false,
         },
-        $(go.Shape, { stroke: 'gray', strokeWidth: 2 })
+        $(go.Shape, { stroke: CHILD_LINE_COLOR, strokeWidth: 2 })
       );
 
     myDiagram.linkTemplateMap.add(
@@ -208,7 +211,7 @@ class DiagramUtil {
           isTreeLink: false,
           layerName: 'Background',
         },
-        $(go.Shape, { strokeWidth: 2.5, stroke: '#5d8cc1' /* blue */ })
+        $(go.Shape, { strokeWidth: 2.5, stroke: MARRIAGE_LINE_COLOR })
       )
     );
 

src/components/FamilyGrid.tsx

@@ -1,15 +1,15 @@
 import { ChangeEvent, useContext } from 'react';
 import { Input, Table } from 'reactstrap';
 import { Person } from '../family.interface';
-import { explodeTrees } from '../family.util';
+import { explodeTrees, idAsNickName } from '../family.util';
 import AppContext from './AppContext';
 
 interface FamilyGridProps {
   trees: Person[];
 }
 
 export default function FamilyGrid({ trees }: FamilyGridProps) {
-  const { hidePersonCode } = useContext(AppContext);
+  const { hidePersonCode, hidePersonIg } = useContext(AppContext);
 
   return (
     <Table size="sm" bordered hover responsive>
@@ -23,7 +23,9 @@ export default function FamilyGrid({ trees }: FamilyGridProps) {
           <th style={{ width: '7em' }}>Birthdate</th>
           <th style={{ width: '8.5em' }}>Phone</th>
           <th style={{ width: '18.5em' }}>Address</th>
-          <th style={{ width: '8.5em' }}>IG</th>
+          <th style={{ width: '8.5em' }} hidden={hidePersonIg}>
+            IG
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -58,8 +60,10 @@ function FamilyRows({ person, ...props }: PersonRowProps) {
 }
 
 function PersonRow({ person }: PersonRowProps) {
-  const { editMode, hidePersonCode, upsertPerson } = useContext(AppContext);
-  const name = person.name || person.id;
+  const { editMode, hidePersonCode, hidePersonIg, upsertPerson } =
+    useContext(AppContext);
+  const nickName = idAsNickName(person.id);
+  const name = person.name || nickName;
 
   const updatePerson = function (e: ChangeEvent<any>, key: string) {
     upsertPerson({ ...person, [key]: e.target.value });
@@ -87,7 +91,7 @@ function PersonRow({ person }: PersonRowProps) {
         />
         <span className={spanClass}>
           {name}
-          {person.name && <small className="fw-light"> ({person.id})</small>}
+          {person.name && <small className="fw-light"> ({nickName})</small>}
         </span>
       </td>
       <td>
@@ -126,7 +130,7 @@ function PersonRow({ person }: PersonRowProps) {
         />
         <span className={spanClass}>{person.address}</span>
       </td>
-      <td>
+      <td hidden={hidePersonIg}>
         <Input
           bsSize="sm"
           className={inputClass}

src/family.util.test.tsx

@@ -2,6 +2,7 @@ import {
   deletePerson,
   enrichTreeData,
   explodeTrees,
+  idAsNickName,
   treesToPersonNode,
   treesToRecord,
   unrichTreeData,
@@ -305,24 +306,24 @@ describe('treesToPersonNode', () => {
   test('without depth', () => {
     const nodes = treesToPersonNode(trees);
     expect(nodes).toEqual([
-      { key: 'satyr', name: 'satyr', s: 'M', attributes: [], spouses: ['surtr', 'nala'] },
-      { key: 'surtr', name: 'surtr', s: 'F', attributes: ['S'], spouses: [] },
-      { key: 'hound', name: 'hound', s: 'M', attributes: [], spouses: ['alpha'], father: 'satyr', mother: 'surtr' },
-      { key: 'alpha', name: 'alpha', s: 'F', attributes: [], spouses: [] },
-      { key: 'ryora', name: 'ryora', s: 'M', attributes: [], spouses: [], father: 'hound', mother: 'alpha' },
-      { key: 'nala', name: 'nala', s: 'F', attributes: [], spouses: [] },
-      { key: 'mufasa', name: 'mufasa', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'nala' },
+      { key: 'satyr', name: 'Satyr', s: 'M', attributes: [], spouses: ['surtr', 'nala'] },
+      { key: 'surtr', name: 'Surtr', s: 'F', attributes: ['S'], spouses: [] },
+      { key: 'hound', name: 'Hound', s: 'M', attributes: [], spouses: ['alpha'], father: 'satyr', mother: 'surtr' },
+      { key: 'alpha', name: 'Alpha', s: 'F', attributes: [], spouses: [] },
+      { key: 'ryora', name: 'Ryora', s: 'M', attributes: [], spouses: [], father: 'hound', mother: 'alpha' },
+      { key: 'nala', name: 'Nala', s: 'F', attributes: [], spouses: [] },
+      { key: 'mufasa', name: 'Mufasa', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'nala' },
     ]);
   });
 
   test('with depth 2', () => {
     const nodes = treesToPersonNode(trees, 2);
     expect(nodes).toEqual([
-      { key: 'satyr', name: 'satyr', s: 'M', attributes: [], spouses: ['surtr', 'nala'] },
-      { key: 'surtr', name: 'surtr', s: 'F', attributes: ['S'], spouses: [] },
-      { key: 'hound', name: 'hound', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'surtr' },
-      { key: 'nala', name: 'nala', s: 'F', attributes: [], spouses: [] },
-      { key: 'mufasa', name: 'mufasa', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'nala' },
+      { key: 'satyr', name: 'Satyr', s: 'M', attributes: [], spouses: ['surtr', 'nala'] },
+      { key: 'surtr', name: 'Surtr', s: 'F', attributes: ['S'], spouses: [] },
+      { key: 'hound', name: 'Hound', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'surtr' },
+      { key: 'nala', name: 'Nala', s: 'F', attributes: [], spouses: [] },
+      { key: 'mufasa', name: 'Mufasa', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'nala' },
     ]);
   });
 
@@ -331,15 +332,15 @@ describe('treesToPersonNode', () => {
       const trees = enrichTreeData(doubleFamilyData.trees, enrichingPeople);
       const nodes = treesToPersonNode(trees);
       expect(nodes).toEqual([
-        { key: 'satyr', name: 'satyr', s: 'M', attributes: [], spouses: ['surtr', 'nala'] },
-        { key: 'surtr', name: 'surtr', s: 'F', attributes: ['S'], spouses: [] },
-        { key: 'hound', name: 'hound', s: 'M', attributes: [], spouses: ['alpha'], father: 'satyr', mother: 'surtr' },
-        { key: 'alpha', name: 'alpha', s: 'F', attributes: [], spouses: [], father: 'saber', mother: 'angela' },
-        { key: 'ryora', name: 'ryora', s: 'M', attributes: [], spouses: [], father: 'hound', mother: 'alpha' },
-        { key: 'nala', name: 'nala', s: 'F', attributes: [], spouses: [] },
-        { key: 'mufasa', name: 'mufasa', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'nala' },
-        { key: 'angela', name: 'angela', s: 'F', attributes: [], spouses: ['saber'] },
-        { key: 'saber', name: 'saber', s: 'M', attributes: [], spouses: [] },
+        { key: 'satyr', name: 'Satyr', s: 'M', attributes: [], spouses: ['surtr', 'nala'] },
+        { key: 'surtr', name: 'Surtr', s: 'F', attributes: ['S'], spouses: [] },
+        { key: 'hound', name: 'Hound', s: 'M', attributes: [], spouses: ['alpha'], father: 'satyr', mother: 'surtr' },
+        { key: 'alpha', name: 'Alpha', s: 'F', attributes: [], spouses: [], father: 'saber', mother: 'angela' },
+        { key: 'ryora', name: 'Ryora', s: 'M', attributes: [], spouses: [], father: 'hound', mother: 'alpha' },
+        { key: 'nala', name: 'Nala', s: 'F', attributes: [], spouses: [] },
+        { key: 'mufasa', name: 'Mufasa', s: 'M', attributes: [], spouses: [], father: 'satyr', mother: 'nala' },
+        { key: 'angela', name: 'Angela', s: 'F', attributes: [], spouses: ['saber'] },
+        { key: 'saber', name: 'Saber', s: 'M', attributes: [], spouses: [] },
       ]);
     });
   });
@@ -445,3 +446,12 @@ describe('deletePerson', () => {
     }]);
   });
 });
+
+describe('idAsNickName', () => {
+  test('convert correctly', () => {
+    expect(idAsNickName('satyr')).toEqual('Satyr');
+    expect(idAsNickName(' satyr123 ')).toEqual('Satyr');
+    expect(idAsNickName('sat123yr')).toEqual('Satyr');
+    expect(idAsNickName('m..satyr')).toEqual('M Satyr');
+  });
+});

src/family.util.tsx

@@ -190,7 +190,7 @@ export function treesToPersonNode(
     if (!nodes[person.id]) {
       nodes[person.id] = {
         key: person.id,
-        name: person.id,
+        name: idAsNickName(person.id),
         s: person.sex ?? 'M',
         attributes: [],
         spouses: [],
@@ -231,3 +231,12 @@ export function treesToPersonNode(
 
   return Object.values(nodes);
 }
+
+// remove number and capitalize first letter
+export function idAsNickName(id: string): string {
+  return id
+    .trim()
+    .replace(/\d/g, '')
+    .replace(/[-_. ]+/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}