Improve home page

[yosefdroth]

How is this? http://datanator.info/

I still need to add the graphic summarizing the database.

[jonrkarr]

This is a good start. We need to refine/add more content and clean up the styling.

• Welcome

  • Edit text

    <h1>Datanator</h1>
    <h2>Toolkit for systematically discovering the data needed to mechanistically model and simulate cellular biochemistry</h2>
    <p><i>Datanator</i> is a toolkit for discovering the data needed to build, calibrate, and validate mechanistic models of cells. <i>Datanator</i> is composed of an integrated database of genomic and biochemical data, this web application for identifying relevant data for modeling a specific organism in a specific environmental condition, and a REST API and Python library for programmatically discovering data for large models such as whole-cell models.</p>

• Another thing we could add is a brief section on use cases

  • Cases
    • Model calibration (constrain values of missing parameters)
    • Model augmentation (FBA model --> kinetically constrained FBA model)
    • Model re-contextualization (e.g., mouse --> human)
  • Layout the cases as 3 columns
  • Each case
    • Icon
    • Calibrate: wrench
    • Augment: merge
    • Contextualize: DNA
    • Title
    • Brief description

• Add graphical summary of the types of data / sources

  • Three column layout
  • For each column
    • Icon
    • Title (e.g., Metabolite concentrations)
    • Brief description: E.g. Over XXX observations of metabolite concentrations integrated from ECMDB and YMDB. These observations can be used to build kinetic models of metabolism.

• Add statistical summary (plot) of the size of the integrated data set

• Workflow

  • Shifting to a vertical layout, would allow you to put some text next to each icon
    • Save the icons as individual .png files
    • Add 4 HTML elements for each step of the workflow
    • Include 1-2 brief sentences to the right of each icon
  • For stylistic consistency, add rounded corners to the boxes in the workflow graphic
  • The background color for the boxes seems a little off. Try a lighter shade e.g., #ffe182
  • For stylistic consistency, set the color of the icons to #1890ff

• About section

  • Rename "About Datanator"
  • Add a little more information:

    <i>Datanator</i> was developed by the <a href="https://www.karrlab.org">Karr Lab<a> at the Icahn School of Medicine at Mount Sinai.

  • Consider adding logos for Karr Lab, Center, Sinai

• "Whole Cell Modeling" section

  • Remove this. Lets not suggest that the utility is limited to whole-cell modeling. We can provide more information about the motivation on the about page. Instead, lets try to suggest that Datanator is useful for a broader range of cell modeling (including data-driven modeling)

• Style

  • Make the vertical spacing between the sections consistent (2rem)
  • Make the vertical spacing after the section headings consistent (e.g., 0.5rem)

[jonrkarr]

Remaining

• Another thing we could add is a brief section on use cases

  • Cases
    • Model calibration (constrain values of missing parameters)
    • Model augmentation (FBA model --> kinetically constrained FBA model)
    • Model re-contextualization (e.g., mouse --> human)
  • Layout the cases as 3 columns
  • Each case
    • Icon
    • Calibrate: wrench
    • Augment: merge
    • Contextualize: DNA
    • Title
    • Brief description

• Add graphical summary of the types of data / sources

  • Three column layout
  • For each column
    • Icon
    • Title (e.g., Metabolite concentrations)
    • Brief description: E.g. Over XXX observations of metabolite concentrations integrated from ECMDB and YMDB. These observations can be used to build kinetic models of metabolism.

• Add statistical summary (plot) of the size of the integrated data set

• Workflow

  • Shifting to a vertical layout, would allow you to put some text next to each icon
    • Save the icons as individual .png files
    • Add 4 HTML elements for each step of the workflow
    • Include 1-2 brief sentences to the right of each icon
  • For stylistic consistency, add rounded corners to the boxes in the workflow graphic
  • The background color for the boxes seems a little off. Try a lighter shade e.g., #ffe182
  • For stylistic consistency, set the color of the icons to #1890ff

• About section

  • Consider adding logos for Karr Lab, Center, Sinai

[jonrkarr]

Still to do

• Create icons
  • data types
  • use cases
• Set description text
  • data types and sources
  • workflow
  • use cases
• Add graph(s) which summarize size of the Datanator database
• Add Sinai icon

[lzy7071]

Icon notes:

• size: 526 x 526 (512 + 14)
• stroke width: 14; color: #FFC306
• fill color: #ffe182 (50% lighten); opacity: 1.0

[jonrkarr]

Done except inserting statistics into text. See #70.