Merge pull request #52 from l0drex/beta

Coloring modes

Author: l0drex

package-lock.json

@@ -28,7 +28,7 @@
     "@types/node": "^18.6.1",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "d3": "4.13.0",
+    "d3": "7.6.1",
     "gedcomx-js": "^2.8.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

package.json

@@ -39,18 +39,18 @@ main > * {
 @media (orientation: landscape) {
   #root {
     grid-template-rows: auto 1fr auto;
-    grid-template-columns: 2fr 1fr;
-    grid-template-areas:
-      "header header"
-      "main sidebar"
-      "footer sidebar";
-  }
-
-  #root.sidebar-hidden {
     grid-template-columns: 1fr;
     grid-template-areas:
     "header"
     "main"
     "footer";
   }
+
+  #root.sidebar-visible {
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      "header header"
+      "main sidebar"
+      "footer sidebar";
+  }
 }

src/App.css

@@ -2,39 +2,30 @@ import * as React from "react";
 import './App.css';
 import {localize} from "./main";
 import config from "./config";
-import {GraphPerson} from "./backend/graph";
 import Header from "./components/Header";
 import NavigationTutorial from "./components/NavigationTutorial";
 import Notification from "./components/Notification";
-import FamilyPath from "./components/FamilyPath";
 import Uploader from "./components/Uploader";
-import InfoPanel from "./components/InfoPanel";
 import View from "./components/View";
 import {graphModel, loadData} from "./backend/ModelGraph";
 import {ReactNode} from "react";
 
 interface State {
   notifications: ReactNode[]
-  focusId: string
-  focusHidden: boolean
   dataAvailable: boolean
 }
 
 class App extends React.Component<any, State> {
   constructor(props) {
     super(props);
-
-    let url = new URL(window.location.href);
-
+    new URL(window.location.href);
     let data = sessionStorage.getItem("familyData");
     if (data) {
       loadData(JSON.parse(data));
     }
 
     this.state = {
       notifications: [],
-      focusId: url.searchParams.get("id"),
-      focusHidden: graphModel === undefined,
       dataAvailable: graphModel !== undefined
     };
   }
@@ -54,23 +45,11 @@ class App extends React.Component<any, State> {
       );
     }
 
-    let focus;
-    if (this.state.focusId) {
-      focus = graphModel.getPersonById(this.state.focusId);
-    } else {
-      focus = graphModel.persons[0];
-    }
-    if (!focus) {
-      throw new Error(`No person with id ${this.state.focusId} could be found`)
-    }
-
     return (
       <>
         <Header/>
         {this.state.notifications}
-        {!this.state.focusHidden && <InfoPanel person={focus} onRefocus={this.onRefocus.bind(this)}/>}
-        <View focus={focus} onRefocus={this.onRefocus.bind(this)} focusHidden={this.state.focusHidden}/>
-        <FamilyPath focus={focus}/>
+        <View/>
       </>
     );
   }
@@ -79,41 +58,12 @@ class App extends React.Component<any, State> {
     sessionStorage.setItem("familyData", fileContent);
     loadData(JSON.parse(fileContent));
     this.setState({
-      dataAvailable: true,
-      focusHidden: false
-    });
-  }
-
-  onRefocus(newFocus: GraphPerson) {
-    if (newFocus.data.getId() === this.state.focusId) {
-      this.setState({
-        focusHidden: !this.state.focusHidden
-      })
-      return;
-    }
-    this.setState({
-      focusHidden: false,
-      focusId: newFocus.data.getId()
+      dataAvailable: true
     });
   }
 
   componentDidMount() {
     localize(config.browserLang);
-    let root = document.querySelector<HTMLDivElement>("#root");
-    if (this.state.focusHidden) {
-      root.classList.add("sidebar-hidden");
-    } else {
-      root.classList.remove("sidebar-hidden");
-    }
-  }
-
-  componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<State>, snapshot?: any) {
-    let root = document.querySelector<HTMLDivElement>("#root");
-    if (this.state.focusHidden) {
-      root.classList.add("sidebar-hidden");
-    } else {
-      root.classList.remove("sidebar-hidden");
-    }
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {

src/App.tsx

@@ -1,9 +1,8 @@
-import {Date as GDate} from "gedcomx-js";
+import GedcomX from "./gedcomx-extensions";
 import config from "../config";
-require("./gedcomx-extensions")
 
 test("toDateObject works", () => {
-  let gDate = new GDate();
+  let gDate = new GedcomX.Date();
   let date = gDate.toDateObject();
   expect(date).toBeUndefined();
 
@@ -50,7 +49,7 @@ test("toDateObject works", () => {
 test("toString works", () => {
   config.browserLang = "en";
 
-  let date = new GDate();
+  let date = new GedcomX.Date();
   expect(date.toString()).toBe("")
 
   date.setFormal("+2022")

src/backend/Date.test.ts

@@ -1,12 +1,12 @@
-import {Date, Fact} from "gedcomx-js";
-import {PersonFactTypes} from "./gedcomx-extensions";
+import GedcomX from "./gedcomx-extensions";
 import config from "../config";
+import {PersonFactTypes} from "./gedcomx-enums";
 
 test("toString works", () => {
   config.browserLang = "en";
-  let fact = new Fact().setType(PersonFactTypes.Birth);
+  let fact = new GedcomX.Fact().setType(PersonFactTypes.Birth);
   expect(fact.toString()).toBe("born")
 
-  fact.setDate(new Date().setFormal("+2022-01-25T06:55"))
+  fact.setDate(new GedcomX.Date().setFormal("+2022-01-25T06:55"))
   expect(fact.toString()).toBe("born on 01/25/2022 at 06:55 AM")
 })

src/backend/Fact.test.ts

@@ -1,13 +1,44 @@
 import {graphModel, loadData} from "./ModelGraph";
 import * as data from "./test-data.json";
-import {RelationshipTypes} from "./gedcomx-extensions";
+import {ViewMode} from "./ViewGraph";
+import {RelationshipTypes} from "./gedcomx-enums";
 
 test("loads data", () => {
   // load the data
   loadData(data);
-  expect(graphModel.getPersons().length).toBe(16+1);
-  expect(graphModel.getRelationships().length).toBe(26);
-  expect(graphModel.getRelationships().filter(r => r.getType() === RelationshipTypes.Couple).length).toBe(6);
+
+  expect(graphModel.getPersons().length)
+    .toBe(16 + 1);  // persons + unknown persons
+  expect(graphModel.getRelationships().length)
+    .toBe(26);
+  expect(graphModel.getRelationships().filter(r => r.getType() === RelationshipTypes.Couple).length)
+    .toBe(6);
   expect(graphModel.getRelationships().filter(r => r.getType() === RelationshipTypes.ParentChild).length)
     .toBe(20);
 })
+
+test.each([
+  [ViewMode.DEFAULT,
+    2 + 2 + 2 + 2 + 2 + 1,  // persons + couples
+    2 * 2 + 5 + 1],  // 2 * couples + parent-child / 2
+  [ViewMode.ALL, 17 + 6, 2 * 6 + 20 / 2],
+  [ViewMode.DESCENDANTS, 4+2, 5],
+  [ViewMode.ANCESTORS, 12+6, 17]
+])("Builds view graph: %s", (viewMode: ViewMode, nodes: number, links: number) => {
+  loadData(data);
+  let viewGraph = graphModel.buildViewGraph("1", viewMode);
+  expect(viewGraph.nodes.length).toBe(nodes);
+  expect(viewGraph.links.length).toBe(links);
+})
+
+test.each([
+  [ViewMode.DEFAULT, "15", 4+2, 5],
+  [ViewMode.DEFAULT, "7", 4+2, 5],
+  [ViewMode.ANCESTORS, "15", 2, 1],
+  [ViewMode.DESCENDANTS, "7", 2, 1]
+])("Build in edge case: %s", (viewMode: ViewMode, id: string, nodes: number, links: number) => {
+  loadData(data);
+  let viewGraph = graphModel.buildViewGraph(id, viewMode);
+  expect(viewGraph.nodes.length).toBe(nodes);
+  expect(viewGraph.links.length).toBe(links);
+})