JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mink overview<p>Note that mink all seem to be self-coloured. ASIP gene isn't active in them. They do have MC1R locus, but I'm not sure what role it plays.</p>
<div id='overview_table'></div>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}

table td {
    border: 1px solid silver;
    padding: 5px;
}

JavaScript

const tableLoci = [
    {
        name: "Aleutian", code: "A",
        gene: "LYST",
        alleles: [
            {code: "A+", info: "Wildtype."},
            {code: "a", info: "Aleutian, Gunmetal, Aleutian Blue, Waris Blue. Associated with Chédiak–Higashi syndrome."}
        ]
    },{
        name: "Pastel", code: "B",
        gene: "TYRP1",
        alleles: [
            {code: "B+", info: "Wildtype."},
            {code: "b^p", info: "American Palomino. Sometimes written as <b>k</b>, as if on a separate locus, because it wasn't yet known to be an allele on this one."},
            {code: "b", info: "Royal Pastel, Marten, Chocolate, Blond, Brown-Eyed Pastel."}
        ]
    },{
        name: "Colour", code: "C",
        gene: "TYR",
        alleles: [
            {code: "C+", info: "Wildtype."},
            {code: "c^h", info: "Himalayan. Previously called Marble."},
            {code: "c", info: "Albino. White with red eyes."}
        ]
    },{
        name: "Ebony", code: "E",
        alleles: [
            {code: "E", info: "(Inc dom, or lethal?) Can't find any info."},
            {code: "e+", info: "Wildtype"}
        ]
    },{
        name: "Finn-Black", code: "F",
        alleles: [
            {code: "F", info: "..."},
            {code: "f+", info: "Wildtype."}
        ]
    },{
        name: "Green-Eyed Pastel", code: "G",
        alleles: [
            {code: "G+", info: "Wildtype."},
            {code: "g", info: "..."}
        ]
    },{
        name: "Hedlund White", code: "H",
        gene: "MITF",
        alleles: [
            {code: "H+", info: "Wildtype."},
            {code: "h^s", info: "Roshchinskaya"},
            {code: "h", info: "Heterozygotes are pied. Homozygotes are solid white with pigmented eyes, and deaf."}
        ]
    },{
        name: "Moyle", code: "M",
        gene: "RAB38",
        alleles: [
            {code: "M+", info: "Wildtype."},
            {code: "m^c", info: "Cameo, sometimes called Hedlund Dilution?"},
        ...