feat: add Heatmap widget for 2D array visualization - #139
Conversation
egguliyev
commented
May 25, 2026
egguliyev
commented
- Displays waveform/array PV data as color-mapped 2D image
- Designed for areaDetector imaging workflows
- Auto-detects array dimensions (square, or nearest aspect ratio)
- Viridis colorscale with colorbar
- Edit mode shows preview with sample gradient data
- Uses PlotlyJS consistent with GraphY and GraphXY widgets
- Single PV input (pvName) for array data
- Displays waveform/array PV data as color-mapped 2D image - Designed for areaDetector imaging workflows - Auto-detects array dimensions (square, or nearest aspect ratio) - Viridis colorscale with colorbar - Edit mode shows preview with sample gradient data - Uses PlotlyJS consistent with GraphY and GraphXY widgets - Single PV input (pvName) for array data
|
Thanks for this! For this widget I have concerns regarding performance. I am curious to see how epicsWS and React layer will behave with bigger arrays coming in. We may need to optimize data flow at some point. I will add adSim to https://github.com/weiss-controls/weiss-demo-iocs to be able to test this widget properly and get back to you. |
There was a problem hiding this comment.
Hi! Sorry for taking long on this one
I have tested this now using https://github.com/weiss-controls/weiss-demo-iocs ADSim IOC. I was able to visualize images, and it works as expected, as long as we reduce the image dimensions and sample rate.
Have you ran this on your local machine? I got a not-so-good performance on the image rendering above 7Hz, and was wondering how was the expecience for you. I tested with a 128x128 image.
This is for sure not tied to your code, but with how we transmit data here.. I kind of saw that coming. The whole epicsWS base64 conversion + JSON serialising/transmitting are probably a big overhead, which makes hard to get a good performance out of this.
I am still not sure of how I want to proceed with it. Probably may be good to take a look at how other tools like https://github.com/React-Automation-Studio/React-Automation-Studio handle that?
I'll also spend some time investigating this, but we likely will need some changes on the backend before this becomes production-grade material
| { | ||
| z, | ||
| type: "heatmap", | ||
| colorscale: "Viridis", |
There was a problem hiding this comment.
I'd prefer colorscale as a new property. Viridis is very common, but users may want a different one. Feel free to create a new property in https://github.com/weiss-controls/weiss/blob/main/src/types/widgetProperties.ts for that.
| // Try common aspect ratios, default to a reasonable width | ||
| cols = Math.ceil(Math.sqrt(len * 1.5)); | ||
| rows = Math.ceil(len / cols); | ||
| } |
There was a problem hiding this comment.
We should not just infer the size of the image. An image of 100x100 would have the same number of elements of an image of 50x200, for example, and we would wrongfully parse both the same way.
AreaDetector IOCs are expected to have PVs for size X and size Y, e.g. $(P)$(R)SizeX and $(P)$(R)SizeY.
As I see it, we should add some new properties:
- Dimensions from PVs (boolean, determines if dimensions come from PVs or are manually set)
- Size X PV
- Size Y PV
- Size X (manual setting, used if Dimension from PVs is false)
- Size Y
I think that is safer than assuming data size and accidentally plotting wrong data
| import { HeatmapComp } from "./HeatmapComp"; | ||
| import { COMMON_PROPS, PROPERTY_SCHEMAS, TEXT_PROPS } from "@src/types/widgetProperties"; | ||
| import type { WidgetDefinition } from "@src/types/widgets"; | ||
| import GridOnIcon from "@mui/icons-material/GridOn"; |
There was a problem hiding this comment.
I suggest using the "gradient" icon instead: https://mui.com/material-ui/material-icons/?query=gradient&selected=Gradient
|
I just merged some significant changes in how states are handled, see #159. This may allow performance improvement here. When you're back, please rebase the main branch into this one. It looks like there is a conflict in Widgets index.ts, but should be an easy fix |
2 participants
