Overview

1. A visualization consists of three components: a schema, a specification and a plot so you ether need to create all three or use already existing ones (right now only the creation of specification and plots is supported)
2. Each component consists of a ReactComponent which is connected with a corresponding Redux store
3. A visualization is build by this three steps:
   1. a new model is created if it doesn't exist jet
   2. a specification is created
   3. the plot is created

NOTE: Right now there are 2 points where a new visualization can be created for the Redux store: ListModal and PlotMenu

Model

Specifications

Purpose

A specification is the interface between a model and a visualization. E.g. for a standardplot the specification the dimensions like x-axis and y-axis are brough in a context with the visualization parameters.

How to create a new specification component

EXAMPLE: The specification for the Multiplot: Multispecification

• Create a folder in camelcase named like the specification under LumenReact/src/components
• Create your specification (the only input is the specification id which can be used to get more information from the React store about the specification)
• Create a specification type to distinguish the specification from the other specificationTypes
• include the new specification under specification by the specification type
• for drag & drop add the "add to your specification" and "delete from your specification" cases to the FieldItemContainer

How to integrate the new specification component into the LumenReact store

EXAMPLE: The specification for the Multiplot: Multispecification

• Create a folder in all lowercase named like the specification under LumenReact/src/states
• Add actions, constants, and reducer like required in the files with the appropriate name

NOTE: Usually you want to create an object which stores and handles the specifications by their uuid which is given by the specification store. This object has at least the methods: createNewXXXSpecification, removeXXXSpecification, addToXXXSpecification and deleteFromXXXSpecification

• Add tests
• Integrate the new created store into project
  • The different specifications are handled by the specifications store. Add a constant which defines your case and add a case to the file (this is the same as when creating a new specification component, so it should already be done)
  • Usually you use a specification with a matching plot, so if you did not already change it, change all specifications that they recognize when your corresponding plot is called. Right now the only place is here: PlotMenu

Plots

Purpose

Builds the main unit of the system and shows a specific bit of information about a model which is wanted to be visualized by the user

How to create a new plot

How to integrate a new plot into the LumenReact store