Signal Marker Visualization

The Signal Marker Visualization React component is used to represent the graphs of all available and selected signals and markers for the selected FOI and the marker context in the selected period.

User Interactions

If the user hovers a mouse over the graph, a tooltip displays details about the data points that are closer to the mouse position.

Legend

The Legend is below the graph, showing which signals and markers are available.

Show on graph

Left clicking on a label will toggle on and off shown items on the graph. Indicated by a colored square if the item is shown on the graph. The selection will persist between instances.

Include in tooltip

Ctrl/cmd + Left clicking on a label will toggle on and off included items in the tooltip. Indicated by bold text if the item is included in the tooltip. The selection will persist between instances.

Settings

Settings are available by clicking on the cog icon in the bottom right.

Tooltip position

Here you can chose between several options of where the tooltip should be. The selection will persist between instances.

Signal marker visualization API

Usage

<SignalMarkerVisualization
  width={800}
  height={600}
  timespan={{ from: '2019-01-01', to: '2019-03-31' }}
  scope="SI19"
  amServicesAuthToken={AMServicesAuthToken}
  signalServiceUrl="https://am-test.sinergise.com/signal/"
  signalTypes={[
    {
      signalTypeId: 'SI19.CL_SIGNAL_TYPE.S2L1C_NDVI',
      label: 'S2 L1C NDVI',
      shown: 'true',
      foiId: 'SI19.FOI.CROP_4106574',
      validSignalTypeId: 'SI19.CL_SIGNAL_TYPE.S2L1C_CLOUDLESS',
      lineColor: 'lightseagreen', // default line color
      validColor: 'darkgreen', // color of the line for valid dates
    },
    {
      signalTypeId: 'SI19.CL_SIGNAL_TYPE.S2L1C_NDVI_NB_10_1km',
      label: 'S2 L1C NB 1km',
      shown: 'false',
      foiId: 'SI19.FOI.CROP_4106574',
      lineColor: 'yellowgreen', // default line color
      bandColor: 'yellowgreen', // color of the mean+-stDev band
      bandOpacity: 0.6, // color of the mean+-stDev band
    }
  ]}
  markerServiceUrl="https://am-test.sinergise.com/marker/"
  markers={[
    {
      label: 'Inference 26 LABEL',
      inferenceId: 'SI19.INFERENCE.26',
      shown: 'true',
      foiId: 'SI19.FOI.CROP_4106574'
    }
  ]}
  onDateSelect={(date) => console.log('external onDateClick function:', date)}
  selectedDateColor={'orange'}
/>

Component name

The component name SignalMarkerVisualization should be used when providing the props.

Props

The props of the Signal Marker Visualization React component are described in the table below.

* indicates mandatory props

Signal types API in the signal marker visualization API component

The signalTypes prop contains an array of objects with properties needed to get the data for correct signal types and if they are displayed or not, and how.

It can contain elements for signal types from:

• signal service (provided by signalServiceUrl parameter)
• customSignalsData parameter

The properties of an object in the array are listed in the table below.

* indicates mandatory properties

When multiple signals of the same signalTypeGroup are provided, the first one from the array will be used to remember the selection between different instances/sessions.

Custom signals data API in the signal marker visualization API component

The customSignalsData prop contains signalTypes and signals arrays.

The signalTypes array must be formatted similarly to the response from the signal service (provided by signalServiceUrl parameter).

Every element in the signalTypes array must contain the fields listed in the table below. Other fields in the element are ignored.

* indicates mandatory fields

The signals array must be formatted similarly to the response from the signal service (provided by signalServiceUrl parameter).

Every element in the signals array must contain the fields listed in the table below. Other fields in the element are ignored.

* indicates mandatory fields

Every element in the values array must contain the fields listed in the table below. Other fields in the element are ignored.

* indicates mandatory fields

Markers API in the signal marker visualization API component

The markers prop contains an array of objects with properties needed to get the correct markers and to know if they need to be displayed or not.

The properties of an object in the array are listed in the table below.

* indicates mandatory properties

If there is no object defined for a marker type, the component will choose a random color.

When multiple markers of the same markerTypeGroup are provided, the first one from the array will be used to remember the selection between different instances/sessions.

Example:

[
  {
    label: 'Inference 26 LABEL', // mandatory
    inferenceId: 'SI19.INFERENCE.26', // mandatory
    foiId: 'SI19.FOI.CROP_4106574', // mandatory
    shown: 'true', // mandatory
    color: '#396478', // optional
    opacity: 0.4, // optional
  }
]