first commit.

src/features/compat-redirect/CompatRedirect.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import NotFound from "../not-found/NotFound";
+
+const CompatRedirect: React.FC = () => {
+  const { pathname } = useLocation();
+  switch (pathname) {
+    case "/index.html":
+      return <Navigate to="/" />;
+    case "/Search.html":
+      return <Navigate to="/search" />;
+    case "/Help.html":
+      return <Navigate to="/help" />;
+    case "/Help_S1.html":
+      return <Navigate to="/help/search/1" />;
+    case "/Help_S2.html":
+      return <Navigate to="/help/search/2" />;
+    case "/Help_S3.html":
+      return <Navigate to="/help/search/3" />;
+    case "/Help_S4.html":
+      return <Navigate to="/help/search/4" />;
+    case "/Help_S5.html":
+      return <Navigate to="/help/search/5" />;
+    case "/Help_Dataset.html":
+      return <Navigate to="/help/dataset" />;
+    case "/Help_Viewer.html":
+      return <Navigate to="/help/viewer" />;
+    case "/Contact.html":
+      return <Navigate to="/help/contact" />;
+    case "/cgi-bin/SearchResult.cgi":
+      return <Navigate to="/search/results" />;
+    default:
+      const match = pathname.match(/^\/DB\/TE\/(3D-)?(.+)\.html$/);
+      if (match !== null) {
+        const url = "/data/" + match[2] + (typeof match[1] !== "undefined" ? "/viewer" : "");
+        return <Navigate to={url} />;
+      }
+      break;
+  }
+  return <NotFound />;
+};
+
+export default CompatRedirect;

src/features/contact/Contact.module.css

@@ -0,0 +1,17 @@
+.contact {
+  margin: 20px;
+}
+.contact h4 {
+  margin: 5px 0 10px 0;
+}
+.contact p {
+  margin: 5px 0 15px 15px;
+}
+.notice {
+  margin: 10px 0 20px;
+  color: #ff0000;
+}
+.note {
+  margin-left: 15px;
+  font-style: italic;
+}

src/features/contact/Contact.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./Contact.module.css";
+
+const Contact: React.FC = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle("Contact Information"));
+  }, [dispatch]);
+  return (
+    <div className={styles.contact}>
+      <section className={styles.notice}>Notice: This site has been archived since May 2019 and is no longer updated.</section>
+      <h4>CelLoc-3D is managed by Teppei Ebina and Tadaharu Tsumoto</h4>
+      <p>
+        Laboratory for cortical circuit plasticity
+        <br />
+        Brain Science Institute, RIKEN
+        <br />
+        2-1, Hirosawa, Wako, Saitama, 351-0198 Japan
+      </p>
+      <h4>E-mail:</h4>
+      <p>
+        teppei-ebina (at) brain.riken.jp
+        <br />
+        <span className={styles.note}>or</span>
+        <br />
+        tsumoto (at) brain.riken.jp
+        <br />
+        <span className={styles.note}>(change (at) to @)</span>
+      </p>
+    </div>
+  );
+};
+
+export default Contact;

src/features/data-detail/DataDetail.module.css

@@ -0,0 +1,21 @@
+.detail {
+  margin: 10px 10px 20px 10px;
+}
+.title,
+.author,
+.detail figure,
+.detail dl {
+  margin: 5px 0 10px 0;
+}
+.detail figure {
+  text-align: center;
+}
+.detail figure img {
+  width: 80%;
+}
+.detail dl dt {
+  font-weight: bold;
+}
+.detail dl dd {
+  margin-left: 30px;
+}

src/features/data-detail/DataDetail.tsx

@@ -0,0 +1,156 @@
+import axios from "axios";
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { useAppDispatch } from "../../app/hooks";
+import DataUtils from "../data/DataUtils";
+import Loading from "../loading/Loading";
+import NotFound from "../not-found/NotFound";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./DataDetail.module.css";
+
+interface DetailDataJson {
+  title: string;
+  author: string;
+  figure: {
+    file: string;
+    caption: string;
+  };
+  download: string;
+  view: string;
+  mouseLine: string;
+  imagingArea: string;
+  cellType: string[];
+  postnatalDays: number;
+  imagingVolumeSize: string;
+  imagingDepth: string;
+  journal: string;
+  summary: string;
+  releaseDate: string;
+}
+
+interface PropsFC {
+  name: string;
+}
+
+interface Props extends PropsFC {
+  dispatch: any;
+}
+
+interface State {
+  name: string;
+  data: DetailDataJson | null;
+}
+
+class DataDetail extends Component<Props, State> {
+  isActive = false;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      name: props.name,
+      data: null,
+    };
+  }
+
+  componentDidMount() {
+    const { name } = this.state;
+    this.isActive = true;
+    if (!DataUtils.exists(name)) {
+      if (name !== "") {
+        this.setState({ name: "" });
+      }
+      return;
+    }
+    axios
+      .get(`/data/${name}.json`, { responseType: "json" })
+      .then((response) => {
+        if (this.isActive) {
+          this.props.dispatch(setTitle(`DS: ${name}`));
+          this.setState({ data: response.data as DetailDataJson });
+        }
+      })
+      .catch((error) => {
+        if (this.isActive) {
+          this.setState({ name: "" });
+        }
+      });
+  }
+
+  componentWillUnmount() {
+    this.isActive = false;
+  }
+
+  render() {
+    const { name, data } = this.state;
+    if (name === "") {
+      return <NotFound />;
+    }
+    if (!data) {
+      return <Loading />;
+    }
+    return (
+      <section className={styles.detail}>
+        <h4 className={styles.title}>{data.title}</h4>
+        <div className={styles.author}>{data.author}</div>
+        <figure>
+          <img src={data.figure.file} alt={data.figure.caption} />
+          <figcaption>{data.figure.caption}</figcaption>
+        </figure>
+        <dl>
+          <dt>Download &amp; View</dt>
+          <dd>
+            <a href={data.download}>Text download</a>
+          </dd>
+          <dd>
+            <Link to={data.view}>View 3D structure</Link>
+          </dd>
+        </dl>
+        <dl>
+          <dt>Mouse line</dt>
+          <dd>{data.mouseLine}</dd>
+        </dl>
+        <dl>
+          <dt>Imaging area</dt>
+          <dd>{data.imagingArea}</dd>
+        </dl>
+        <dl>
+          <dt>Cell type</dt>
+          {data.cellType.map((value, key) => {
+            return <dd key={key}>{value}</dd>;
+          })}
+        </dl>
+        <dl>
+          <dt>Postnatal days</dt>
+          <dd>{data.postnatalDays}</dd>
+        </dl>
+        <dl>
+          <dt>Imaging volume size</dt>
+          <dd>{data.imagingVolumeSize}</dd>
+        </dl>
+        <dl>
+          <dt>Imaging depth</dt>
+          <dd>{data.imagingDepth}</dd>
+        </dl>
+        <dl>
+          <dt>Journal</dt>
+          <dd>{data.journal}</dd>
+        </dl>
+        <dl>
+          <dt>Summary</dt>
+          <dd dangerouslySetInnerHTML={{ __html: data.summary }}></dd>
+        </dl>
+        <dl>
+          <dt>Release date</dt>
+          <dd>{data.releaseDate}</dd>
+        </dl>
+      </section>
+    );
+  }
+}
+
+const DataDetailFC: React.FC<PropsFC> = (props) => {
+  const dispatch = useAppDispatch();
+  return <DataDetail dispatch={dispatch} name={props.name} />;
+};
+
+export default DataDetailFC;

src/features/data-viewer/DataViewer.module.css

@@ -0,0 +1,12 @@
+.no_webgl {
+  margin: 10px auto;
+  text-align: center;
+}
+.back {
+  margin-bottom: 10px;
+  text-align: center;
+}
+.viewer {
+  width: 100%;
+  height: 400px;
+}

src/features/data-viewer/DataViewer.tsx

@@ -0,0 +1,207 @@
+import axios from "axios";
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import * as THREE from "three";
+import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
+import { useAppDispatch } from "../../app/hooks";
+import DataUtils from "../data/DataUtils";
+import Loading from "../loading/Loading";
+import NotFound from "../not-found/NotFound";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./DataViewer.module.css";
+
+class Viewer3D {
+  private mount: HTMLDivElement;
+  private frameId: number | null = null;
+  private scene: THREE.Scene | null = null;
+  private camera: THREE.PerspectiveCamera | null = null;
+  private controls: TrackballControls | null = null;
+  private renderer: THREE.WebGLRenderer | null = null;
+
+  constructor(mount: HTMLDivElement) {
+    this.mount = mount;
+    this.start = this.start.bind(this);
+    this.stop = this.stop.bind(this);
+    this.animate = this.animate.bind(this);
+  }
+
+  init(data: string) {
+    const lines = data.split("\n");
+    const head = lines
+      .shift()
+      ?.trim()
+      .split("\t")
+      .map((line, k) => {
+        return parseInt(line.replace(/^#/g, ""), 10) || 0;
+      });
+    if (typeof head === "undefined" || head.length !== 3 || head.includes(0)) {
+      return false;
+    }
+    const width = this.mount.clientWidth;
+    const height = this.mount.clientHeight;
+    const fov = 7.5 + (head[0] * 2.5) / 100.0;
+    this.camera = new THREE.PerspectiveCamera(fov, width / height, 1, 10000);
+    this.camera.position.x = 1300;
+    this.camera.position.y = 1300;
+    this.camera.position.z = 1100;
+    this.camera.up.set(0, 0, 1);
+    this.controls = new TrackballControls(this.camera, this.mount);
+    const obj3d = new THREE.Object3D();
+    this.scene = new THREE.Scene();
+    this.scene.add(obj3d);
+    const DrawCube = (width: number, height: number, depth: number) => {
+      const mesh = new THREE.Mesh(new THREE.BoxGeometry(width, height, depth * 2), new THREE.MeshBasicMaterial());
+      const cube = new THREE.BoxHelper(mesh, 0x000000);
+      return cube;
+    };
+    obj3d.add(DrawCube(head[0], head[1], head[2]));
+    const material = {
+      e: new THREE.MeshBasicMaterial({ color: 0x0000ff }),
+      i: new THREE.MeshBasicMaterial({ color: 0xff0000 }),
+      g: new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
+      p: new THREE.MeshBasicMaterial({ color: 0xffff00 }),
+      s: new THREE.MeshBasicMaterial({ color: 0xff00ff }),
+      ps: new THREE.MeshBasicMaterial({ color: 0x00ffff }),
+    };
+    const geometory = new THREE.SphereGeometry(4, 10, 10);
+    lines.forEach((line) => {
+      const point = line.trim().split("\t");
+      if (point.length === 4 && material.hasOwnProperty(point[0])) {
+        const particle = new THREE.Mesh(geometory, material[point[0] as "e" | "i" | "g" | "p" | "s" | "ps"]);
+        particle.position.x = parseFloat(point[1]) - head[0] / 2.0;
+        particle.position.y = parseFloat(point[2]) - head[1] / 2.0;
+        particle.position.z = head[2] - parseFloat(point[3]) * 2.0;
+        obj3d.add(particle);
+      }
+    });
+    try {
+      this.renderer = new THREE.WebGLRenderer({ antialias: true });
+      this.renderer.setSize(width, height);
+      this.renderer.setClearColor(0xffffff);
+      this.mount.appendChild(this.renderer.domElement);
+    } catch (error) {
+      return false;
+    }
+    return true;
+  }
+
+  start() {
+    this.frameId = requestAnimationFrame(this.animate);
+  }
+
+  stop() {
+    this.frameId && cancelAnimationFrame(this.frameId);
+    this.renderer && this.mount.removeChild(this.renderer.domElement);
+  }
+
+  animate() {
+    this.controls && this.controls.update();
+    this.renderer && this.renderer.clear();
+    this.renderer && this.scene && this.camera && this.renderer.render(this.scene, this.camera);
+    this.frameId = requestAnimationFrame(this.animate);
+  }
+}
+
+interface PropsFC {
+  name: string;
+}
+
+interface Props extends PropsFC {
+  dispatch: any;
+}
+
+interface State {
+  name: string;
+  data: string;
+}
+
+class DataViewer extends Component<Props, State> {
+  private isActive = false;
+  private mount: HTMLDivElement | null = null;
+  private viewer: Viewer3D | null = null;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      name: this.props.name,
+      data: "",
+    };
+  }
+
+  componentDidMount() {
+    const { name } = this.state;
+    this.isActive = true;
+    if (!DataUtils.exists(name)) {
+      if (name !== "") {
+        this.setState({ name: "" });
+      }
+      return;
+    }
+    axios
+      .get(`/data/${name}.dat`, { responseType: "text" })
+      .then((response) => {
+        if (this.isActive) {
+          this.props.dispatch(setTitle(`View 3D: ${name}`));
+          this.setState({ data: response.data });
+        }
+      })
+      .catch((error) => {
+        if (this.isActive) {
+          this.setState({ name: "" });
+        }
+      });
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (this.mount && this.state.data !== "" && !this.viewer) {
+      const viewer = new Viewer3D(this.mount);
+      if (viewer.init(this.state.data)) {
+        this.viewer = viewer;
+        this.viewer.start();
+      } else {
+        this.setState({ name: "@@NOWEBGL@@" });
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.isActive = false;
+    if (this.viewer) {
+      this.viewer.stop();
+      this.viewer = null;
+    }
+  }
+
+  render() {
+    const { name, data } = this.state;
+    switch (name) {
+      case "":
+        return <NotFound />;
+      case "@@NOWEBGL@@":
+        return <div className={styles.no_webgl}>It does not appear your computer supports WebGL.</div>;
+    }
+    if (data === "") {
+      return <Loading />;
+    }
+    return (
+      <section>
+        <div className={styles.back}>
+          <Link to={`/data/${name}`}>Back to {name}</Link>
+        </div>
+        <div
+          className={styles.viewer}
+          ref={(mount) => {
+            this.mount = mount;
+          }}
+        />
+      </section>
+    );
+  }
+}
+
+const DataViewerFC: React.FC<PropsFC> = (props) => {
+  const dispatch = useAppDispatch();
+  return <DataViewer dispatch={dispatch} name={props.name} />;
+};
+
+export default DataViewerFC;

src/features/data/Data.module.css

@@ -0,0 +1,3 @@
+.data {
+  margin: 10px;
+}

src/features/data/Data.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Route, Routes, useParams } from "react-router-dom";
+import DataDetail from "../data-detail/DataDetail";
+import DataViewer from "../data-viewer/DataViewer";
+import NotFound from "../not-found/NotFound";
+import styles from "./Data.module.css";
+import DataUtils from "./DataUtils";
+
+const Data: React.FC = () => {
+  const { name } = useParams<"name">();
+  if (typeof name === "undefined" || !DataUtils.exists(name)) {
+    return <NotFound />;
+  }
+  return (
+    <div className={styles.data}>
+      <Routes>
+        <Route index element={<DataDetail name={name} />} />
+        <Route path="viewer" element={<DataViewer name={name} />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default Data;

src/features/data/DataUtils.ts

@@ -0,0 +1,89 @@
+import JsonData_ from "../../assets/data.json";
+
+const cellTypes = ["E", "I", "G", "P", "S"] as const;
+type TCellType = typeof cellTypes[number];
+
+interface JsonDataItem {
+  pd: number;
+  recordingVolume: {
+    width: number;
+    height: number;
+    depth: number;
+  };
+  imagingDepth: {
+    from: number;
+    to: number;
+  };
+  cellType: string[]; // TCellType[] or ("E"|"I"|"G"|"P"|"S")[];
+  area: string;
+  cellNum: number;
+  expDate: string;
+  releaseDate: string;
+  geneType: string;
+  remark: string;
+}
+
+interface JsonData {
+  [name: string]: JsonDataItem;
+}
+
+export interface SearchParams {
+  pdStart: number;
+  pdEnd: number;
+  widthMin: number;
+  widthMax: number;
+  depthMin: number;
+  depthMax: number;
+  cellType: string;
+  area: string;
+  geneType: string;
+  keyword: string;
+}
+
+interface SearchResult {
+  name: string;
+  item: JsonDataItem;
+}
+export type SearchResults = SearchResult[];
+
+const jsonData: JsonData = JsonData_;
+
+class DataUtils {
+  static exists(name: string): boolean {
+    return jsonData.hasOwnProperty(name);
+  }
+
+  static search(params: SearchParams): SearchResults {
+    const results: SearchResults = [];
+    for (let name in jsonData) {
+      const item = jsonData[name];
+      if (item.pd < params.pdStart || params.pdEnd < item.pd) {
+        continue;
+      }
+      if (item.recordingVolume.width < params.widthMin || params.widthMax < item.recordingVolume.width) {
+        continue;
+      }
+      if (item.imagingDepth.from < params.depthMin || params.depthMax < item.imagingDepth.to) {
+        continue;
+      }
+      if (params.cellType !== "any") {
+        if (!item.cellType.includes(params.cellType as TCellType)) {
+          continue;
+        }
+      }
+      if (params.area !== "all" && item.area !== params.area) {
+        continue;
+      }
+      if (params.geneType !== "all" && item.geneType !== params.geneType) {
+        continue;
+      }
+      if (params.keyword.length !== 0 && !item.remark.includes(params.keyword)) {
+        continue;
+      }
+      results.push({ name, item });
+    }
+    return results;
+  }
+}
+
+export default DataUtils;

src/features/help/Help.module.css

@@ -0,0 +1,52 @@
+.help {
+  margin: 10px;
+}
+.help p {
+  margin: 5px 15px 5px 15px;
+}
+.index {
+  margin: 0 0 16px 0;
+  padding-left: 30px;
+}
+.index li {
+  margin-bottom: 15px;
+}
+.search_links {
+  margin: 0 10px;
+  font-size: 75%;
+  text-align: right;
+}
+.search_links:after {
+  content: ".";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+.search_links li {
+  display: inline-block;
+}
+.search_links li a {
+  display: block;
+  padding: 0 10px;
+  outline: none;
+  text-decoration: none;
+}
+.title {
+  font-weight: bold;
+  font-size: 100%;
+  margin: 5px;
+}
+.legend {
+  font-weight: bold;
+  margin-right: 5px;
+}
+.figure {
+  width: 100%;
+  margin: 15px 0;
+  text-align: center;
+}
+.figure img {
+  width: 320px;
+}

src/features/help/Help.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect } from "react";
+import { Link, Route, Routes } from "react-router-dom";
+import { useAppDispatch } from "../../app/hooks";
+import NotFound from "../not-found/NotFound";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./Help.module.css";
+
+const HelpIndex = () => {
+  const title = "Help";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <ul className={styles.index}>
+      <li>
+        <Link to="/help/search/1">Search datasets on your browser</Link>
+      </li>
+      <li>
+        <Link to="/help/dataset">Downloadable dataset format</Link>
+      </li>
+      <li>
+        <Link to="/help/viewer">3D Viewer Mannual</Link>
+      </li>
+    </ul>
+  );
+};
+
+const HelpSearchLinks = (
+  <div className={styles.search_links}>
+    <ul>
+      <li>
+        <Link to="/help/search/1">Step 1</Link>
+      </li>
+      <li>
+        <Link to="/help/search/2">Step 2</Link>
+      </li>
+      <li>
+        <Link to="/help/search/3">Step 3</Link>
+      </li>
+      <li>
+        <Link to="/help/search/4">Step 4</Link>
+      </li>
+      <li>
+        <Link to="/help/search/5">Step 5</Link>
+      </li>
+    </ul>
+  </div>
+);
+
+const HelpSearch1 = () => {
+  const title = "Help - Search dataset - Step 1";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <div>
+      {HelpSearchLinks}
+      <div className={styles.title}>Step 1</div>
+      <p>Click the "Search" link above.</p>
+      <div className={styles.figure}>
+        <img src="/images/help-search1.jpg" alt={title} />
+      </div>
+    </div>
+  );
+};
+
+const HelpSearch2 = () => {
+  const title = "Help - Search dataset - Step 2";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <div>
+      {HelpSearchLinks}
+      <div className={styles.title}>Step 2</div>
+      <p>Set parameter value and/or chose options.</p>
+      <div className={styles.figure}>
+        <img src="/images/help-search2.jpg" alt={title} />
+      </div>
+    </div>
+  );
+};
+
+const HelpSearch3 = () => {
+  const title = "Help - Search dataset - Step 3";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <div>
+      {HelpSearchLinks}
+      <div className={styles.title}>Step 3</div>
+      <p>Click the "Search" button.</p>
+      <div className={styles.figure}>
+        <img src="/images/help-search3.jpg" alt={title} />
+      </div>
+    </div>
+  );
+};
+
+const HelpSearch4 = () => {
+  const title = "Help - Search dataset - Step 4";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <div>
+      {HelpSearchLinks}
+      <div className={styles.title}>Step 4</div>
+      <p>Chose datasets that you want to download. Click dataset ID.</p>
+      <div className={styles.figure}>
+        <img src="/images/help-search4.jpg" alt={title} />
+      </div>
+    </div>
+  );
+};
+
+const HelpSearch5 = () => {
+  const title = "Help - Search dataset - Step 5";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <div>
+      {HelpSearchLinks}
+      <div className={styles.title}>Step 5</div>
+      <p>
+        The result page consists of details of the dataset.
+        <br />
+        Click the links in the "Download &amp; View" section to download the dataset and/or view 3D model on your browser.{" "}
+      </p>
+      <div className={styles.figure}>
+        <img src="/images/help-search5.jpg" alt={title} />
+      </div>
+    </div>
+  );
+};
+
+const HelpDataset = () => {
+  const title = "Help - Downloadable dataset format";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <section>
+      <div className={styles.title}>Dataset Format</div>
+      <div className={styles.figure}>
+        <img src="/images/help-dataset.jpg" alt={title} />
+      </div>
+      <p>
+        <span className={styles.legend}>First row:</span> The first row of the data file indicates the size of the imaging volume. The first, second and third column represent the width, height and depth of the volume, respectively.
+      </p>
+      <p>
+        <span className={styles.legend}>Other rows:</span> Each row consists of the type (first column) and the position (second to fourth columns for x, y and z position) of the cell.
+      </p>
+    </section>
+  );
+};
+
+const HelpViewer = () => {
+  const title = "Help - 3D Viewer Manual";
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle(title));
+  }, [dispatch, title]);
+  return (
+    <section>
+      <div className={styles.title}>3D Viewer Manual</div>
+      <div className={styles.figure}>
+        <img src="/images/help-viewer.jpg" alt={title} />
+      </div>
+      <p>
+        <span className={styles.legend}>Rotate:</span> Left click and drag.
+      </p>
+      <p>
+        <span className={styles.legend}>Move:</span> Right click and drag.
+      </p>
+      <p>
+        <span className={styles.legend}>Zoom In/Out:</span> Use mouse wheel.
+      </p>
+    </section>
+  );
+};
+
+const Help: React.FC = () => {
+  return (
+    <div className={styles.help}>
+      <Routes>
+        <Route index element={<HelpIndex />} />
+        <Route path="search/1" element={<HelpSearch1 />} />
+        <Route path="search/2" element={<HelpSearch2 />} />
+        <Route path="search/3" element={<HelpSearch3 />} />
+        <Route path="search/4" element={<HelpSearch4 />} />
+        <Route path="search/5" element={<HelpSearch5 />} />
+        <Route path="dataset" element={<HelpDataset />} />
+        <Route path="viewer" element={<HelpViewer />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default Help;

src/features/loading/Loading.module.css

@@ -0,0 +1,4 @@
+.loading {
+  margin: 120px 0;
+  text-align: center;
+}

src/features/loading/Loading.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./Loading.module.css";
+
+const Loading: React.FC = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle("Loading now..."));
+  }, [dispatch]);
+
+  return <div className={styles.loading}>Loading now...</div>;
+};
+
+export default Loading;

src/features/news/News.module.css

@@ -0,0 +1,24 @@
+.news {
+  margin: 10px;
+}
+.item {
+  margin: 0 10px 10px 10px;
+}
+.item:after {
+  content: ".";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+.date {
+  width: 25%;
+  float: left;
+  text-align: left;
+}
+.desc {
+  width: 70%;
+  float: right;
+  text-align: left;
+}

src/features/news/News.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import JsonNews_ from "../../assets/news.json";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./News.module.css";
+const nl2br = require("react-nl2br");
+
+interface IJsonNewsItem {
+  date: string;
+  desc: string;
+}
+
+type IJsonNews = IJsonNewsItem[];
+
+const JsonNews: IJsonNews = JsonNews_;
+
+const News: React.FC = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle("What's new"));
+  }, [dispatch]);
+
+  return (
+    <div className={styles.news}>
+      {JsonNews.map((item, key) => {
+        return (
+          <div className={styles.item} key={key}>
+            <div className={styles.date}>{item.date}</div>
+            <div className={styles.desc}>{nl2br(item.desc)}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default News;

src/features/not-found/NotFound.module.css

@@ -0,0 +1,4 @@
+.notFound {
+  margin: 120px 0;
+  text-align: center;
+}

src/features/not-found/NotFound.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./NotFound.module.css";
+
+const NotFound: React.FC = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle("Page Not Found"));
+  }, [dispatch]);
+
+  return <div className={styles.notFound}>Page not found.</div>;
+};
+
+export default NotFound;

src/features/page-title/PageTitle.module.css

@@ -0,0 +1,6 @@
+.pageTitle {
+  width: 100%;
+  height: 30px;
+  font-size: 150%;
+  margin-bottom: 10px;
+}

src/features/page-title/PageTitle.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Helmet } from "react-helmet-async";
+import { useAppSelector } from "../../app/hooks";
+import styles from "./PageTitle.module.css";
+import { selectPageTitle } from "./pageTitleSlice";
+
+const PageTitle: React.FC = () => {
+  const title = useAppSelector(selectPageTitle);
+  return (
+    <>
+      <Helmet>
+        <title>{title} - CelLoc3D Server</title>
+      </Helmet>
+      <div className={styles.pageTitle}>{title}</div>
+    </>
+  );
+};
+
+export default PageTitle;

src/features/page-title/pageTitleSlice.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../app/store";
+
+export interface PageTitleState {
+  value: string;
+}
+
+const initialState: PageTitleState = {
+  value: "",
+};
+
+const pageTitleSlice = createSlice({
+  name: "pageTitle",
+  initialState,
+  reducers: {
+    setTitle: (state, action: PayloadAction<string>) => {
+      state.value = action.payload;
+    },
+  },
+});
+
+export const { setTitle } = pageTitleSlice.actions;
+export const selectPageTitle = (state: RootState) => state.pageTitle.value;
+
+export default pageTitleSlice.reducer;

src/features/search-form/SearchForm.module.css

@@ -0,0 +1,41 @@
+.formGroup {
+  margin: 0 10px;
+  height: 40px;
+}
+.formGroup:after {
+  content: ".";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+.formGroup label {
+  width: 55%;
+  float: left;
+}
+.value {
+  float: right;
+  text-align: right;
+}
+.range {
+  margin: 0 10px;
+}
+.txtParam {
+  width: 50px;
+}
+.txtParamStr {
+  width: 100px;
+}
+.txtKeyword {
+  width: 150px;
+}
+.selParam {
+  width: 150px;
+}
+.submit {
+  text-align: center;
+}
+.submit input {
+  padding: 5px 15px;
+}

src/features/search-form/SearchForm.tsx

@@ -0,0 +1,198 @@
+import React, { Component } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAppDispatch } from "../../app/hooks";
+import DataUtils, { SearchResults } from "../data/DataUtils";
+import { setTitle } from "../page-title/pageTitleSlice";
+import { setResults } from "../search-results/searchResultsSlice";
+import styles from "./SearchForm.module.css";
+
+interface FCProps {}
+
+interface Props extends FCProps {
+  navigate: any;
+  dispatch: any;
+}
+
+interface State {
+  pdStart: string;
+  pdEnd: string;
+  widthMin: string;
+  widthMax: string;
+  depthMin: string;
+  depthMax: string;
+  cellType: string;
+  area: string;
+  geneType: string;
+  keyword: string;
+}
+
+class SearchForm extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      pdStart: "44",
+      pdEnd: "100",
+      widthMin: "317",
+      widthMax: "512",
+      depthMin: "90",
+      depthMax: "230",
+      cellType: "any",
+      area: "all",
+      geneType: "all",
+      keyword: "",
+    };
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSelectChange = this.handleSelectChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.dispatch(setTitle("Database Search"));
+  }
+
+  doSearch(): SearchResults {
+    const toNumber = (v: string): number => parseInt(v.trim(), 10);
+    const params = {
+      pdStart: toNumber(this.state.pdStart),
+      pdEnd: toNumber(this.state.pdEnd),
+      widthMin: toNumber(this.state.widthMin),
+      widthMax: toNumber(this.state.widthMax),
+      depthMin: toNumber(this.state.depthMin),
+      depthMax: toNumber(this.state.depthMax),
+      cellType: this.state.cellType.trim(),
+      area: this.state.area.trim(),
+      geneType: this.state.geneType.trim(),
+      keyword: this.state.keyword.trim(),
+    };
+    return DataUtils.search(params);
+  }
+
+  handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    switch (name) {
+      case "pdStart":
+        this.setState({ pdStart: value });
+        break;
+      case "pdEnd":
+        this.setState({ pdStart: value });
+        break;
+      case "widthMin":
+        this.setState({ widthMin: value });
+        break;
+      case "widthMax":
+        this.setState({ widthMax: value });
+        break;
+      case "depthMin":
+        this.setState({ depthMin: value });
+        break;
+      case "depthMax":
+        this.setState({ depthMax: value });
+        break;
+      case "cellType":
+        this.setState({ cellType: value });
+        break;
+      case "keyword":
+        this.setState({ keyword: value });
+        break;
+    }
+  };
+
+  handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    switch (name) {
+      case "area":
+        this.setState({ area: value });
+        break;
+      case "geneType":
+        this.setState({ geneType: value });
+        break;
+    }
+  };
+
+  handleSubmit: React.FormEventHandler<HTMLFormElement> = (event: React.FormEvent) => {
+    event.preventDefault();
+    const results = this.doSearch();
+    this.props.dispatch(setResults(results));
+    this.props.navigate("/search/results");
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className={styles.formGroup}>
+          <label htmlFor="pdStart">Postnatal Days</label>
+          <div className={styles.value}>
+            <input type="number" name="pdStart" className={styles.txtParam} value={this.state.pdStart} onChange={this.handleInputChange} />
+            <span className={styles.range}>-</span>
+            <input type="number" name="pdEnd" className={styles.txtParam} value={this.state.pdEnd} onChange={this.handleInputChange} />
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="widthMin">Recording volume width (height)</label>
+          <div className={styles.value}>
+            <input type="number" name="widthMin" className={styles.txtParam} value={this.state.widthMin} onChange={this.handleInputChange} />
+            <span className={styles.range}>-</span>
+            <input type="number" name="widthMax" className={styles.txtParam} value={this.state.widthMax} onChange={this.handleInputChange} />
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="depthMin">Recording volume depth</label>
+          <div className={styles.value}>
+            <input type="number" name="depthMin" className={styles.txtParam} value={this.state.depthMin} onChange={this.handleInputChange} />
+            <span className={styles.range}>-</span>
+            <input type="number" name="depthMax" className={styles.txtParam} value={this.state.depthMax} onChange={this.handleInputChange} />
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="cellType">Cell type (E, I, G, P, S, or "any")</label>
+          <div className={styles.value}>
+            <input type="text" name="cellType" className={styles.txtParamStr} value={this.state.cellType} onChange={this.handleInputChange} />
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="area">Target area</label>
+          <div className={styles.value}>
+            <select name="area" className={styles.selParam} value={this.state.area} onChange={this.handleSelectChange}>
+              <option value="all">All</option>
+              <option value="L2/3, V1">L2/3 in the visual cortex</option>
+            </select>
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="geneType">Mouse line</label>
+          <div className={styles.value}>
+            <select name="geneType" className={styles.selParam} value={this.state.geneType} onChange={this.handleSelectChange}>
+              <option value="all">All</option>
+              <option value="VGAT-Venus">VGAT-Venus</option>
+              <option value="PV/myrGFP-LDLRct">PV/myrGFP-LDLRct</option>
+              <option value="Dlx5/6-GCaMP3">Dlx5/6-GCaMP3</option>
+            </select>
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="keyword">Keyword Search</label>
+          <div className={styles.value}>
+            <input type="text" name="keyword" className={styles.txtKeyword} value={this.state.keyword} onChange={this.handleInputChange} />
+          </div>
+        </div>
+        <div className={styles.formGroup}>
+          <div className={styles.submit}>
+            <input type="submit" value="Search" />
+          </div>
+        </div>
+      </form>
+    );
+  }
+}
+
+const SearchFormFC: React.FC<FCProps> = (props: FCProps) => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+  return <SearchForm navigate={navigate} dispatch={dispatch} />;
+};
+
+export default SearchFormFC;

src/features/search-results/SearchResults.module.css

@@ -0,0 +1,17 @@
+.empty,
+.error {
+  margin: 120px 0;
+  text-align: center;
+}
+.error {
+  color: red;
+}
+.result {
+  margin: 10px 10px 20px 10px;
+}
+.title {
+  font-size: 105%;
+}
+.remark {
+  margin: 5px 5px 0 10px;
+}

src/features/search-results/SearchResults.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { setTitle } from "../page-title/pageTitleSlice";
+import styles from "./SearchResults.module.css";
+import { selectSearchResults } from "./searchResultsSlice";
+
+const SearchResults: React.FC = () => {
+  const results = useAppSelector(selectSearchResults);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setTitle("Search Results"));
+  }, [dispatch]);
+
+  return (
+    <div>
+      {results.length === 0 ? (
+        <div className={styles.empty}>No search results found.</div>
+      ) : (
+        results.map((result, key) => {
+          return (
+            <div className={styles.result} key={key}>
+              <div className={styles.title}>
+                <Link to={`/data/${result.name}`}>
+                  {key + 1}. {result.name}
+                </Link>
+              </div>
+              <div className={styles.remark}>{result.item.remark}</div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
+
+export default SearchResults;

src/features/search-results/searchResultsSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../app/store";
+import { SearchResults } from "../data/DataUtils";
+
+export interface SearchResultsState {
+  value: SearchResults;
+}
+
+const initialState: SearchResultsState = {
+  value: [],
+};
+
+const searchResultsSlice = createSlice({
+  name: "searchResults",
+  initialState,
+  reducers: {
+    setResults: (state, action: PayloadAction<SearchResults>) => {
+      state.value = action.payload;
+    },
+  },
+});
+
+export const { setResults } = searchResultsSlice.actions;
+export const selectSearchResults = (state: RootState) => state.searchResults.value;
+
+export default searchResultsSlice.reducer;

src/features/search/Search.module.css

@@ -0,0 +1,3 @@
+.search {
+  margin: 10px;
+}

src/features/search/Search.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+import NotFound from "../not-found/NotFound";
+import SearchForm from "../search-form/SearchForm";
+import SearchResults from "../search-results/SearchResults";
+import styles from "./Search.module.css";
+
+const Search: React.FC = () => {
+  return (
+    <div className={styles.search}>
+      <Routes>
+        <Route index element={<SearchForm />} />
+        <Route path="results" element={<SearchResults />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default Search;