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.

Signal Marker Visualization

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.

PropTypeDefaultDescription
widthnumberThe width of the component in pixels.
heightnumberThe height of the component in pixels.
scope*stringReference data differentiator (e.g. SI22). For more details see the scope.
timespan*objectThe object represents a time interval. It has the from and to properties of type string which represent a date in ISO 8601 format (e.g. { from: '2020-01-01', to: '2020-01-31' }).
amServicesAuthTokenstringThe AM services authentication token.
signalServiceUrlstringThe (base) URL at which the endpoints for signals are (e.g. https://am-test.sinergise.com/signal/). It can include the trailing slash or not.
An error is displayed if it is not provided and the signalTypes prop contains elements with signalTypeId that do not contain word custom.
signalTypes*arrayThe array of objects with properties needed to get the data for correct signal types and if they are displayed or not, and how.
For more details see signal types API in the signal marker visualization API component.
customSignalsDataobjectFor more details see custom signals data API in the signal marker visualization API component.
An error is displayed if it is not provided and the signalTypes prop contains elements with signalTypeId that do contain word custom.
markerServiceUrlstringThe (base) URL at which the endpoints for markers are (e.g. https://am-test.sinergise.com/marker/). It can include the trailing slash or not.
It must be provided if markers prop is provided otherwise, an error is displayed.
markersarrayThe array of objects with properties needed to get the correct markers and to know if they need to be displayed or not.
For more details see markers API in the signal marker visualization API component.
onDateSelectcallback ((onDateSelectEvent: OnDateSelectEvent) => void)Callback that receives an object with a value of the selected date in ISOString format and isExternal with a boolean value (true value meaning that the event was triggered from outside by changing selectedDate prop).
selectedDatestringThe date in ISO 8601 format (e.g. YYYY-MM-DD).
selectedDateColorstring#ff0000The color of the vertical line that denotes the selected date.
Possible formats: hex, rgb(), rgba(), HTML color name/keyword.
languagestringThe selected language at the time of rendering.
Options are: sl - Slovenian, en - English.
dateFormatstringIf not present and language is present will take the default selected language format. If both are not present defaults to enUS (e.g. d. M. yyyy). For more details see the accepted format guide.

* 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.

PropertyTypeDefaultDescription
signalTypeId*stringThe fully qualified ID of a signal type.
shown*stringShows (the value is true) or hides (the value is false) the signal on component load.
foiId*stringThe fully qualified ID of a FOI (feature of interest; e.g DEMO.FOI.7025947001).
validSignalTypeIdstringThe fully qualified ID.
If provided it will be used instead of the default validSignalTypeId resolution from the signal code list.
labelstringThe alternative text for the label in the legend and tooltips.
lineColorstringThe default color for the signal line.
Possible formats: hex, rgb(), rgba(), HTML color name/keyword.
bandColorstringThe color of the mean+-stDev band around the signal line.
Possible formats: hex, rgb(), rgba(), HTML color name/keyword.
If not provided, the lineColor is used.
bandOpacitynumber0.3The opacity of the mean+-stDev band around the signal line.
Possible value: number between 0 and 1.
validColorstringThe color for the signal line between valid dates.
Possible formats: hex, rgb(), rgba(), HTML color name/keyword. If not provided, the lineColor is used.

* 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.

FieldTypeDescription
id*stringMust contain word "custom".
code*stringCustom signal type code.
namesarray It is needed if the label is not defined for the signal type in signalTypes prop.
signalClass*stringFor correct visualization - valid/invalid or mean +/- stDev.
validSignalTypeIdstringIt is needed for the visualization of valid/invalid signal data points.
If validSignalTypeId in signalTypes prop is defined for the signal type, this one is 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.

FieldTypeDescription
id*stringMust be the same as id in the element in the signalTypes array of customSignalsData prop.
code*stringMust be the same as code in the element in the signalTypes array of customSignalsData prop.
values*array List of signal values.

* 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.

FieldTypeDescription
time*stringDate of the signal.
mean*numberMean value of the signal.
stDev*numberIt is needed for the signal types that are not used for the validation of data points.
valuenumberIt is needed for the signal types that are not used for the validation of data points.
If it is not provided, the mean will be used.

* 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.

PropertyTypeDefaultDescription
inferenceId*stringThe fully qualified ID of an inference. Previously markerTypeId was used to get the marker data.
shown*stringShows (the value is true) or hides (the value is false) the marker on component load.
foiId*stringThe fully qualified ID of a FOI (feature of interest; e.g DEMO.FOI.7025947001).
labelstringThe alternative text for the label in the legend and tooltips.
colorstringPossible formats: hex, rgb(), rgba(), HTML color name / keyword.
opacitynumber0.2Possible value: number between 0 and 1.

* 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
}
]