chrono-phylo-tree 1.0.16 → 1.1.0

package/src/components/PhTree.tsx

@@ -0,0 +1,362 @@
+import { useEffect, useState } from "react";
+import { Species } from "../classes/Species";
+
+interface MultiplePhTreesProps {
+    speciesList: Species[];
+    width?: number;
+    height?: number;
+    padding?: number;
+    stroke?: string;
+    format?: (n: number) => string;
+    chronoScale?: boolean;
+    showImages?: boolean;
+    presentTime?: number;
+    handleMouseMove?: (x: number, y: number) => void;
+    children?: (
+        species: Species | undefined,
+        showMenu: boolean,
+        toggleShowMenu: (species: Species) => void,
+        hoverSpecies: Species | undefined
+    ) => any;
+}
+
+export const MultiplePhTrees = (
+    {
+        speciesList,
+        width = 1000,
+        height = 50,
+        padding = 0,
+        stroke = "grey",
+        format = (n) => n.toString(),
+        chronoScale = true,
+        showImages = true,
+        presentTime,
+        handleMouseMove,
+        children
+    }: MultiplePhTreesProps
+) => {
+    const copies = speciesList.map(sp => sp.copy());
+    const lifeApparition = Math.min(...copies.map(sp => sp.apparition));
+    const lifeApparitionDuration = Math.max(...copies.map(sp => sp.apparition - lifeApparition));
+    const life = new Species(
+        "",
+        lifeApparition,
+        lifeApparitionDuration,
+        undefined,
+        []
+    );
+    life.display = false;
+    life.linkDescendants(copies);
+    return (
+        <PhTree
+            commonAncestor={life}
+            width={width}
+            height={height}
+            padding={padding}
+            stroke={stroke}
+            format={format}
+            chronoScale={chronoScale}
+            showImages={showImages}
+            presentTime={presentTime}
+            handleMouseMove={handleMouseMove}
+        >
+            {(species, showMenu, toggleShowMenu, hoverSpecies) => children?.(species, showMenu, toggleShowMenu, hoverSpecies)}
+        </PhTree>
+    );
+};
+
+interface PhTreeProps {
+    commonAncestor: Species;
+    width?: number;
+    height?: number;
+    padding?: number;
+    stroke?: string;
+    format?: (n: number) => string;
+    chronoScale?: boolean;
+    showImages?: boolean;
+    presentTime?: number;
+    handleMouseMove?: (x: number, y: number) => void;
+    children?: (
+        species: Species | undefined,
+        showMenu: boolean,
+        toggleShowMenu: (species: Species) => void,
+        hoverSpecies: Species | undefined
+    ) => any;
+}
+
+export const PhTree = (
+    {
+        commonAncestor,
+        width = 1000,
+        height = 50,
+        padding = 0,
+        stroke = "grey",
+        format = (n) => n.toString(),
+        chronoScale = true,
+        showImages = true,
+        presentTime,
+        handleMouseMove,
+        children
+    }: PhTreeProps
+) => {
+    const [showMenu, setShowMenu] = useState(false);
+    const [species, setSpecies] = useState<Species | undefined>(undefined);
+    const [hoverSpecies, setHoverSpecies] = useState<Species | undefined>(undefined);
+    const [showDesc, setShowDesc] = useState<Map<Species, boolean>>(commonAncestor.allDescendants().reduce((acc, desc) => acc.set(desc, true), new Map()));
+
+    useEffect(() => {
+        setShowDesc(commonAncestor.allDescendants().reduce((acc, desc) => acc.set(desc, true), new Map()));
+    }, [commonAncestor]);
+
+    const toggleShowMenu = (sp: Species) => {
+        setSpecies(showMenu ? undefined : sp);
+        setShowMenu(!showMenu);
+    };
+
+    const toggleShowDesc = (sp: Species) => {
+        const newShowDesc = new Map(showDesc);
+        newShowDesc.set(sp, !showDesc.get(sp));
+        setShowDesc(newShowDesc);
+    };
+
+    const hoverShowMenu = (sp: Species | undefined) => {
+        setHoverSpecies(sp);
+    };
+
+    const isPresentTimeDefined = presentTime !== undefined && chronoScale;
+    const heightFactor = (ad: Species[]) => showImages ? ad.map<number>(sp => sp.image ? 2 : 1).reduce((a, b) => a + b) : ad.length;
+
+    return (
+        <>
+            <svg
+                width={width * (isPresentTimeDefined ? (Math.min(presentTime, commonAncestor.absoluteExtinction()) - commonAncestor.apparition) / commonAncestor.absoluteDuration() : 1)}
+                height={height * heightFactor(isPresentTimeDefined ? commonAncestor.allDescendants().filter(desc => desc.apparition < presentTime) : commonAncestor.allDescendants())}
+                onMouseMove={(event) => {handleMouseMove?.(event.clientX, event.clientY)}}
+            >
+                <DrawTree
+                    commonAncestor={commonAncestor}
+                    species={commonAncestor}
+                    y={-1}
+                    scaleX={width / (chronoScale ? commonAncestor.absoluteDuration() : (Math.max(0, commonAncestor.stepsUntilLastDescendant()) + 1))}
+                    scaleY={height}
+                    padding={padding}
+                    stroke={stroke}
+                    format={format}
+                    chronoScale={chronoScale}
+                    showImages={showImages}
+                    presentTime={presentTime}
+                    toggleShowMenu={toggleShowMenu}
+                    hoverShowMenu={hoverShowMenu}
+                    showDesc={showDesc}
+                    changeShowDesc={toggleShowDesc}
+                />
+            </svg>
+            {children?.(species, showMenu, toggleShowMenu, hoverSpecies)}
+        </>
+    );
+};
+
+interface DrawTreeProps {
+    commonAncestor: Species;
+    species: Species;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    padding?: number;
+    stroke?: string;
+    format?: (n: number) => string;
+    chronoScale?: boolean;
+    showImages?: boolean;
+    presentTime?: number;
+    toggleShowMenu: (s: Species) => void;
+    hoverShowMenu: (s: Species | undefined) => void;
+    showDesc: Map<Species, boolean>;
+    changeShowDesc: (s: Species) => void;
+}
+
+const DrawTree = ({
+    commonAncestor,
+    species,
+    y,
+    scaleX,
+    scaleY,
+    padding = 0,
+    stroke = "grey",
+    format = (n: number) => n.toString(),
+    chronoScale = true,
+    showImages = true,
+    presentTime = undefined,
+    toggleShowMenu,
+    hoverShowMenu,
+    showDesc,
+    changeShowDesc
+}: DrawTreeProps) => {
+    const isPresentTimeDefined = presentTime !== undefined && chronoScale;
+    const all = commonAncestor.allDescendants().filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
+    const spIndex = all.indexOf(species);
+    const startX = (chronoScale ? species.apparition - commonAncestor.apparition : (commonAncestor.stepsUntil(species) ?? 0)) * scaleX;
+    const endX = startX + (chronoScale ? Math.min(showDesc.get(species) ? species.duration : species.absoluteDuration(), isPresentTimeDefined ? presentTime - species.apparition : species.absoluteDuration()) : 1) * scaleX;
+    const endY = (showImages && spIndex > 0) ? [...Array(spIndex).keys()].map(i => all[i]).map(sp => (sp.image ? 2 : 1) * scaleY).reduce((a, b) => a + b) : (spIndex * scaleY);
+    const descendants = species.descendants.filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
+    const branchX = descendants.length > 0 ? startX + (Math.min(...descendants.map(desc => desc.apparition)) - species.apparition) * scaleX : endX;
+    
+    return (
+        <g key={spIndex}>
+            {y >= 0 && (
+                <line
+                    x1={startX}
+                    y1={y}
+                    x2={startX}
+                    y2={endY}
+                    stroke={stroke}
+                />
+            )}
+            {species.display && <HorizontalLine
+                commonAncestor={commonAncestor}
+                species={species}
+                height={scaleY}
+                x1={startX}
+                x2={endX}
+                x0={branchX}
+                y={endY}
+                stroke={stroke}
+                changeShowDesc={() => changeShowDesc(species)}
+                showDesc={showDesc.get(species)}
+                padding={padding}
+                format={format}
+                chronoScale={chronoScale}
+                showImages={showImages}
+                presentTime={presentTime}
+                toggleShowMenu={toggleShowMenu}
+                hoverShowMenu={hoverShowMenu}
+            />}
+            {species.descendants.map((desc, index) => (
+                <g className={(showDesc.get(species) && descendants.includes(desc)) ? "block" : "hidden"} key={all.length + index}>
+                    <DrawTree
+                        commonAncestor={commonAncestor}
+                        species={desc}
+                        y={desc.display ? endY : -1}
+                        scaleX={scaleX}
+                        scaleY={scaleY}
+                        padding={padding}
+                        stroke={stroke}
+                        format={format}
+                        chronoScale={chronoScale}
+                        showImages={showImages}
+                        presentTime={presentTime}
+                        toggleShowMenu={toggleShowMenu}
+                        showDesc={showDesc}
+                        changeShowDesc={changeShowDesc}
+                        hoverShowMenu={hoverShowMenu}
+                    />
+                </g>
+            ))}
+        </g>
+    );
+};
+
+interface HorizontalLineProps {
+    commonAncestor: Species;
+    species: Species;
+    height: number;
+    x1: number;
+    x2: number;
+    x0?: number;
+    y: number;
+    stroke: string;
+    showDesc?: boolean;
+    changeShowDesc?: () => void;
+    padding?: number;
+    format?: (n: number) => string;
+    chronoScale?: boolean;
+    showImages?: boolean;
+    presentTime?: number;
+    toggleShowMenu: (s: Species) => void;
+    hoverShowMenu: (s: Species | undefined) => void;
+    className?: string;
+    buttonClassName?: string;
+}
+
+const HorizontalLine = ({
+    commonAncestor,
+    species,
+    height,
+    x1, x2, x0, y,
+    stroke,
+    showDesc = true,
+    changeShowDesc = () => {},
+    padding = 0,
+    format = (n) => n.toString(),
+    chronoScale = true,
+    showImages = true,
+    presentTime,
+    toggleShowMenu,
+    hoverShowMenu,
+    className,
+    buttonClassName
+}: HorizontalLineProps) => {
+    const isPresentTimeDefined = presentTime !== undefined;
+    const all = commonAncestor.allDescendants().filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
+    const index = (s: Species) => all.indexOf(s);
+    const orientation = species.ancestor ? (index(species) > index(species.ancestor) ? -3 : 1) : 1;
+    const descendants = species.descendants.filter(desc => isPresentTimeDefined ? desc.apparition < presentTime : true);
+    const lastOne = descendants.filter(desc => desc.apparition === species.extinction()).length === 0;
+    const extinction = format(Math.min(showDesc ? species.extinction() : species.absoluteExtinction(), isPresentTimeDefined ? presentTime : species.absoluteExtinction()));
+    return (
+        <g>
+            <line
+                x1={x1}
+                y1={y}
+                x2={x2}
+                y2={y}
+                stroke={stroke}
+            />
+            <foreignObject
+                x={x1 + padding}
+                y={y + (padding) * orientation}
+                width={(chronoScale ? x0 ?? x2 : x2) - x1 - 2 * padding}
+                height={height + (showImages && species.image ? height : 0)}
+            >
+                <div className={`flex flex-row justify-between w-full ${className ?? ""}`}>
+                    <div>
+                        {chronoScale ? format(species.apparition) : ""}
+                    </div>
+                    <button
+                        className={`p-0.625 justify-center flex flex-col items-center ${buttonClassName ?? ""}`}
+                        onClick={() => toggleShowMenu(species)}
+                        onMouseEnter={() => hoverShowMenu(species)}
+                        onMouseLeave={() => hoverShowMenu(undefined)}
+                    >
+                        {species.name}
+                        {species.image && showImages && (
+                            <img
+                                src={species.image}
+                                alt={species.name}
+                                style={{ height: height }}
+                            />
+                        )}
+                    </button>
+                    {descendants.length > 0 ?
+                        <button onClick={changeShowDesc} className="h-1" style={{maxWidth: 4}}>
+                            {((lastOne || !showDesc) && (!x0 || x0 === x2)) ? extinction : ""}
+                        </button> :
+                        <div>
+                            {chronoScale ? extinction : ""}
+                        </div>
+                    }
+                </div>
+            </foreignObject>
+            {chronoScale && x0 && x0 < x2 && (
+                <foreignObject
+                    x={x0 + padding}
+                    y={y + padding * orientation}
+                    width={x2 - x0 - 2 * padding}
+                    height={height}
+                >
+                    <div className="flex flex-row justify-end w-full">
+                        {(lastOne || !showDesc) && chronoScale ? extinction : ""}
+                    </div>
+                </foreignObject>)}
+        </g>
+    );
+}

package/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { Species } from "./classes/Species";
+export { PhTree, MultiplePhTrees } from "./components/PhTree";
+export { Menu } from "./components/Menu";
+export { codeText, codeTextAlt, getLanguageOptions } from "./utils/translate";

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/types.d.ts

@@ -0,0 +1,9 @@
+export interface SpeciesJSON {
+    name: string;
+    apparition?: number;
+    duration?: number;
+    description?: string;
+    descendants?: SpeciesJSON[];
+    afterApparition?: number;
+    image?: string;
+}

package/src/utils/between.tsx

@@ -0,0 +1,3 @@
+export const between = (n: number, min: number, max: number) => {
+    return n < min ? min : n > max ? max : n;
+};

package/src/utils/example.tsx

@@ -0,0 +1,73 @@
+import { Species } from "../classes/Species";
+
+export const example  = Species.fromJSON({
+    name: "Hominoidea",
+    apparition: -25e6,
+    duration: 6e6,
+    descendants: [
+        {
+            name: "Hilobates",
+            afterApparition: 6e6,
+            duration: 19e6,
+            image: "https://upload.wikimedia.org/wikipedia/commons/4/40/Hylobaes_lar_Canarias.jpg"
+        },
+        {
+            name: "Hominidae",
+            afterApparition: 6e6,
+            duration: 6e6,
+            descendants: [
+                {
+                    name: "Pongo",
+                    afterApparition: 6e6,
+                    duration: 13e6,
+                    image: "https://upload.wikimedia.org/wikipedia/commons/6/65/Pongo_tapanuliensis.jpg"
+                },
+                {
+                    name: "Homininae",
+                    afterApparition: 6e6,
+                    duration: 5e6,
+                    descendants: [
+                        {
+                            name: "Gorilla",
+                            afterApparition: 5e6,
+                            duration: 8e6,
+                            image: "https://gorillas-world.com/wp-content/uploads/anatomia.jpg"
+                        },
+                        {
+                            name: "Hominini",
+                            afterApparition: 5e6,
+                            duration: 2e6,
+                            descendants: [
+                                {
+                                    name: "Pan",
+                                    afterApparition: 2e6,
+                                    duration: 3e6,
+                                    descendants: [
+                                        {
+                                            name: "Pan Troglodytes",
+                                            afterApparition: 3e6,
+                                            duration: 3e6,
+                                            image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR-v4-d4R9AUgsHdG42VPYuYj_d4OMRHKasUQ&s"
+                                        },
+                                        {
+                                            name:"Pan Paniscus",
+                                            afterApparition : 3e6,
+                                            duration : 3e6,
+                                            image : "https://upload.wikimedia.org/wikipedia/commons/e/e2/Apeldoorn_Apenheul_zoo_Bonobo.jpg"
+                                        }
+                                    ],
+                                },
+                                {
+                                    name: "Homo",
+                                    afterApparition: 2e6,
+                                    duration: 6e6,
+                                    image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7XK_e3HG0jhOticytH1Dn3tzBEZyRyWc5Mg&s"
+                                }
+                            ],
+                        }
+                    ],
+                }
+            ]
+        }
+    ]
+});

package/src/utils/hexToRGBA.tsx

@@ -0,0 +1,12 @@
+const hexToRGB = (hex: string) => {
+    hex = hex.replace(/^#/, '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return { r, g, b };
+};
+
+export const hexToRGBA = (hex: string, a: number) => {
+    const {r, g, b} = hexToRGB(hex);
+    return `rgba(${r}, ${g}, ${b}, ${a})`
+};

package/src/utils/scientificNotation.tsx

@@ -0,0 +1,20 @@
+export const scientificNotation = (n: number, decimals: number = 2) => {
+    if(n === 0) {
+        return "0";
+    }
+    const abs = Math.abs(n);
+    const exp = Math.floor(Math.log10(abs));
+    const mant = n / Math.pow(10, exp);
+    let mantText = mant.toFixed(decimals);
+    for(let i = mantText.length - 1; i >= 0; i--) {
+        if(mantText[i] === "0") {
+            mantText = mantText.slice(0, i);
+        } else {
+            if(mantText[i] === ".") {
+                mantText = mantText.slice(0, i);
+            }
+            break;
+        }
+    }
+    return mantText + ((abs >= 1 && abs < 10) ? "" : ("e" + exp));
+};

package/src/utils/setFromJson.tsx

@@ -0,0 +1,40 @@
+import { Species } from "../classes/Species";
+import { SpeciesJSON } from "../types";
+
+const handleFileChange = (file: File | undefined): Promise<SpeciesJSON> => {
+    return new Promise((resolve, reject) => {
+        if (file && file.type === 'application/json') {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                try {
+                    const jsonContent = JSON.parse(event.target?.result as string);
+                    resolve(jsonContent);
+                } catch (error) {
+                    reject('Error parsing JSON');
+                }
+            };
+            reader.onerror = () => {
+            reject('Error reading file');
+        };
+        reader.readAsText(file);
+        } else {
+            reject('Please select a valid JSON file.');
+        }
+    });
+};
+
+export const setFromJson = (
+    setSpecies: (species: Species | undefined) => void,
+    setScale: (scale: number) => void,
+    setPresentTime: (time: number) => void,
+    presentTimeBoolean: boolean
+) => async (file: File | undefined) => {
+    setSpecies(undefined);
+    const json = await handleFileChange(file);
+    const newSpecies = Species.fromJSON(json);
+    setSpecies(newSpecies);
+    if(presentTimeBoolean){
+      setPresentTime(newSpecies.absoluteExtinction());
+    }
+    setScale(newSpecies.absoluteDuration());
+};

package/src/utils/translate.tsx

@@ -0,0 +1,68 @@
+import Papa from 'papaparse';
+import { useEffect, useState } from 'react';
+
+let data0: any[] = [];
+
+const fetchCSVData = async (filePath: string): Promise<any[]> => {
+    const response = await fetch(filePath);
+    const reader = response.body!.getReader();
+    const result = await reader.read();
+    const decoder = new TextDecoder('utf-8');
+    const CSVString = decoder.decode(result.value!);
+    const { data } = Papa.parse(CSVString, {
+        header: true,
+        dynamicTyping: true,
+        delimiter: ";",
+    });
+    return data;
+};
+
+const provisionalData = (filePath: string = "/translate.csv") => (async (filePath: string = "/translate.csv") => {
+    data0 = await fetchCSVData(filePath);
+})(filePath);
+
+export const codeText = (code: string, language: string, arg: string[] = [], filePath: string = "/translate.csv") => {
+    const [data, setData] = useState<any[]>([]);
+    useEffect(() => {
+        fetchCSVData(filePath).then(setData);
+        provisionalData(filePath);
+    }, [language]);
+    const row = data.find((row: any) => row.code === code) ?? data0.find((row: any) => row.code === code);
+    try{
+        const str = row[language];
+        const val = arg.reduce((acc, arg, i) => acc.replace(`{${i}}`, arg), str);
+        return val as string;
+    } catch {
+        return;
+    }
+};
+
+export const codeTextAlt = async (code: string, language: string, arg: string[] = [], filePath: string = "/translate.csv"): Promise<string> => {
+    const data = await fetchCSVData(filePath);
+    const row = data.find((row: any) => row.code === code);
+    try {
+        const str = row[language];
+        return arg.reduce((acc, arg, i) => acc.replace(`{${i}}`, arg), str);
+    } catch {
+        return "";
+    }
+};
+
+export const getLanguageOptions = (filePath: string = "/translate.csv") => {
+    const [languageOptions, setLanguageOptions] = useState<Map<string, string>>(new Map());
+
+    useEffect(() => {
+        const loadLanguage = async () => {
+            const data = await fetchCSVData(filePath);
+            const lan = data.find((row: any) => row.code === "lan");
+            if (lan) {
+                delete lan.code;
+                const lanMap = new Map<string, string>(Object.entries(lan));
+                setLanguageOptions(lanMap);
+            }
+        };
+
+        loadLanguage();
+    }, []);
+    return languageOptions;
+};