Settings sidebar issues

I’ve been implementing the settings sidebar in the 3d panel and overall it looks great! Here are the issues I’ve encountered:

• 3D panel drops many frames when panning the camera (updating the sidebar) with all topic settings implemented
• The default sidebar width is not wide enough for almost any of the topic settings labels. they are cut off with ellipses
• Settings nodes need an option to display as rolled up by default (3D panel settings is overwhelming with everything unrolled)
• "gradient" isn’t usable yet, value should have type [string, string] and the control be a two-step gradient picker, not a color map dropdown
• "number" would be much easier to implement with min, max
• "number" could have better UX if the arrow buttons and arrow keys worked when there is only a placeholder value (parse as a number or fall back to 0)
• "number" shows too many digits of precision
• "select" setting value: "" doesn’t select the option entry with value set to ""
• Need a visibility toggle control and some field or event for visibility changes
• The single "color" is confusing, i need separate "rgb" and "rgba" input types
• "color" could benefit from a placeholder color option
• We might need a validation step and error highlighting (color input red?). example: type only e in a number input
• Need step on vec3 input

Roman’s stuff:

Working on input for custom map tile layers. I’d like to inform the user when they enter an invalid input into a field:

Ideally the URL input field is in an error state and I can show the user a message on what is wrong.

[foxymiles]

I can bake that in if you think that’s going to be adequate for everybody’s use case.

[jhurliman]

The problem with catching it in my action handler is the current action handler is very generic, just using produce() and set() to blindly update the tree. I can’t figure out how to say “oh this is a point cloud point size numeric field update, limit that to integer values. this is a camera target offset y value, limit that to 3 digits of precision” without making that code significantly more complex.

This is what copilot suggested:

function limitPrecision(x: number, digits = 3): number {
  const factor = Math.pow(10, digits);
  return Math.round(x * factor) / factor;
}