index.tsx

import * as React from "react";
import { createRoot } from 'react-dom/client';
import { Main } from "./src/main";
import "@fontsource/overpass/200.css";
import "@fontsource/overpass/500.css";
import { createGlobalStyle } from "styled-components";
import { loremIpsum } from "react-lorem-ipsum";

const fakeText = (p) => {
  const random = true;
  return loremIpsum({ p, random }).join("\n\n");
};


const configWaypoints = [
  {
    "UUID": "test-a",
    "State": {
      "Expanded": true
    },
    "Properties": {
      "Name": "Metadata Template",
      "Content": "### Demographics  \n**Species:** Human  \n**Vital Status:** [Alive/deceased]  \n**Cause of death:** [if deceased]  \n**Sex:** (Female, Male, Intersex)   \n**Race:** [White, American Indian or Alaska Native, Black or African American, Asian, Native Hawaiian or Pacific Islander, Other]  \n**Ethnicity:** [Hispanic or Latino, Not Hispanic or Latino]  \n\n### Diagnosis  \n**Age at Diagnosis:** [years]  \n**Primary Diagnosis:**  \n**Site of Resection or Biopsy:**  \n**Tumor Grade:**  \n**Stage (AJCC 8th Edition):**  \n\n### Therapy  \n**Pre-operative:**  \n**Post-operative:**  \n**Initial Disease Status:**  \n\n### Follow Up  \n**Progression:**  \n**Last Known Disease Status:**   \n**Age at Follow Up:**  \n**Days to Progression## Metadata about this sample  \n\n"
    }
  },
  {
    "UUID": "test-b",
    "State": {
      "Expanded": true
    },
    "Properties": {
      "Name": "Data Aquisition",
      "Content": "Tissue cyclic immunofluorescence (t-CyCIF) was used to generate the fluorescence images.\n\nThe RareCyte CyteFinder microscope was used with a 40X/0.6NA objective.\n\nThe images were artifact corrected using the BaSiC tool, stitched and registered using the ASHLAR algorithm, \nand segmented using ilastik software and MATLAB. Single-cell features were then extracted from these images using HistoCAT software.\n\n![image](https://www.cycif.org/assets/img/du-lin-rashid-nat-protoc-2019/Fig1_Rashid_SciData.JPG)"
    }
  },
  {
    "UUID": "test-c",
    "State": {
      "Expanded": true
    },
    "Properties": {
      "Name": "Cell Segmentation",
      "Content": "Cells in the image were segmented using an object detection method. Here, we used the Ilastik software\nto train a model that classifies pixels into three classes (nucleus, cytoplasm, and background). \nProbability masks generated by the model were used to perform morphological manipulations and \nwatershed in MATLAB to identify cells. \n\nWhile ~90% of the cells in this tissue are segmented accurately, there are some errors including \nfusions (undersegmented cells) and fissions (over segmented cells) as shown here.\nCell segmentation is a critical component of extracting quality single-cell data and \ncan affect the quality of downstream analysis; segmentation is thus an active area of development\nin the image analysis community.\n\nPan around the image and toggle the segmentation mask, or \"data layer\" below, to inspect the accuracy.\n"
    }
  },
  {
    "UUID": "test-d",
    "State": {
      "Expanded": false
    },
    "Properties": {
      "Name": "Immune Populations",
      "Content": "Many immune populations are present in this lung cancer and are often \nenriched in the tumor region.\n\nWhen the subset of CD45 positive cells was clustered based on expression \nof CD45, CD3D, CD8A, CD4, CD20, PD1, and FOXP3 using k-means, \nseven distinct immune cell populations emerged.\n\nThe populations are shown in the heat map below, where each row represents \na cluster and each column represents an immune marker. \nThe color represents the expression level of each marker.\n"
    }
  }
]; 

const exhibit_config = {
  "Header": "",
  "Rotation": 0,
  "Layout": {
    "Grid": [
      [
        "i0"
      ]
    ]
  },
  "Stories": [
    {
      "Name": "",
      "Waypoints": [
        {
          "Name": "Waypoint ( TODO remove )",
          "Group": "Structural Components",
          "Audio": "",
          "Description": "",
          "Zoom": 0.5,
          "Pan": [0.5, 0.5],
          "Overlays": [],
          "Arrows": [],
          "Polygon": "Q",
        },
      ],
    },
  ],
  "Groups": [
    {
      "Name": "Structural Components",
      "Colors": [
        "0000FF",
        "FFFFFF",
        "FF0000",
        "00FF00",
        "00FFFF"
      ],
      "Channels": [
        "DNA_1",
        "Keratin",
        "α-SMA",
        "CD45",
        "IBA1"
      ]
    },
    {
      "Name": "PD-L1 Expression",
      "Colors": [
        "0000FF",
        "FFFFFF",
        "FF0000",
        "00FFFF"
      ],
      "Channels": [
        "DNA_1",
        "Keratin",
        "PD-L1",
        "IBA1"
      ]
    },
    {
      "Name": "Lymphocytes",
      "Colors": [
        "0000FF",
        "FF0000",
        "FFFFFF"
      ],
      "Channels": [
        "DNA_1",
        "CD3D",
        "CD20"
      ]
    },
    {
      "Name": "Regulatory T-Cells",
      "Colors": [
        "0000FF",
        "FF0000",
        "00FF00",
        "FFFFFF"
      ],
      "Channels": [
        "DNA_1",
        "CD3D",
        "CD4",
        "FOXP3"
      ]
    },
    {
      "Name": "Cytotoxic T-Cells",
      "Colors": [
        "0000FF",
        "FF0000",
        "00FF00"
      ],
      "Channels": [
        "DNA_1",
        "CD3D",
        "CD8A"
      ]
    },
    {
      "Name": "Inhibitory T-Cells",
      "Colors": [
        "0000FF",
        "FF0000",
        "00FF00",
        "FFFFFF"
      ],
      "Channels": [
        "DNA_1",
        "CD3D",
        "PD1",
        "FOXP3"
      ]
    },
    {
      "Name": "CD8+/FOXP3+ T Cells",
      "Colors": [
        "0000FF",
        "00FF00",
        "FF0000",
        "FFFFFF"
      ],
      "Channels": [
        "DNA_1",
        "CD4",
        "CD8A",
        "FOXP3"
      ]
    },
    {
      "Name": "PD1+/LAG3+ T Cells",
      "Colors": [
        "0000FF",
        "00FF00",
        "FF0000",
        "00FFFF",
        "FFFFFF"
      ],
      "Channels": [
        "DNA_1",
        "CD4",
        "CD8A",
        "PD1",
        "LAG3"
      ]
    },
    {
      "Name": "Macrophages",
      "Colors": [
        "00FF00",
        "FF0000",
        "0000FF"
      ],
      "Channels": [
        "IBA1",
        "CD163",
        "DNA_1"
      ]
    },
    {
      "Name": "Macrophages (cont.)",
      "Colors": [
        "0000FF",
        "00FF00",
        "FFFFFF",
        "FF0000"
      ],
      "Channels": [
        "DNA_1",
        "CD68",
        "CD11B",
        "CD14"
      ]
    }
  ],
  "Masks": []
};
// TODO Warning: hard-coded for LUNG-3-PR_40X.ome.tif
const marker_names = ["DNA_1","AF488","AF555","AF647","DNA_2","A488 background","A555 background","A647 background","DNA_3","A488 background","LAG3","ARL13B","DNA_4","KI67","Keratin","PD1","DNA_5","CD45RB","CD3D","PD-L1","DNA_6","CD4","CD45","CD8A","DNA_7","CD163","CD68","CD14","DNA_8","CD11B","FOXP3","CD21","DNA_9","IBA1","α-SMA","CD20","DNA_10","CD19","GFAP","GTUBULIN","DNA_11","LAMINAC","BANF1","LAMINB"];

const color = "black";
const fontColor = "eeeeee";
const id = "react-output";
const MainStyle = createGlobalStyle`
  #${id} {
    background-color: ${color};
    font-family: "Overpass";
    font-weight: 200;
    color: #${fontColor};
    height: 100%;
  }
`;

const rootElement = document.getElementById(id);
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Main 
      exhibit_config={exhibit_config} handleKeys={["ome-dir-1"]}
      marker_names={marker_names} configWaypoints={configWaypoints}
    />
    <MainStyle />
  </React.StrictMode>
);