[Feature] - new component idea - SI numeric input

[carl-dawson]

I've been hacking together a new component for a project that I'm working on, and I thought it might be a good addition to the Dash Daq repository. It's a composite component with a numeric input and a drop-down list. The drop down list is populated with a user supplied base scientific unit (e.g Hz, Wb, T, K, etc.) prepended with the standard SI prefixes (e.g. μ, m, k, M, G, etc.), each corresponding to an order of magnitude (e.g. -6, -3, 3, 6, 9, etc.). The numeric input is the significand. The component value is [significand * 10^magnitude]

If this is something you'd be interested in including, I could use some guidance regarding React best practices here. My current implementation feels pretty hacky.

[alexcjohnson]

For sure, good idea, and it would be a great fit for this package! (leaving aside the ambiguity of the specific example you show here - does km³ mean k(m³) or (km)³? 😈 )

We have a bit of a guide for making dash components in https://dash.plotly.com/react-for-python-developers - might be more basic than you had in mind though, otherwise I'd say just take a look at how the other dash-daq and dash-core-components components are written, you may find some inspiration. And, feel free to make a PR at any time and we can discuss specific places you're looking for help.

[carl-dawson]

Ha, I was wondering if you'd catch that. I got around that problem by adding a user defined parameter called unitMagnitude. So in the above example it is (km)^3, which is what I needed for my application. Still slightly hacky and ambiguous though. I'll keep digging around for something similar. Can you think of any existing components off the top of your head that might implement a similar composite design pattern?

[alexcjohnson]

Nothing comes to mind - we've talked about adding a potentially editable text display to dcc.Slider but we haven't gotten around to it. You'll probably want to look at dcc.Input for how it handles up & down arrows, and updates on every keypress vs only on blur, but then the units dropdown will add its own complexity.

One tricky thing may be the 2-way binding between these props. I assume (in addition to the configuration props which will be write-only), you'll have three input/output props, I guess value, significand, and magnitude (though I might vote for exponent over magnitude but that's a separate discussion). The user interacting with the component will set significand and magnitude, and value will be the output; but you'll also want app developers to be able to simply specify value and have significand and magnitude determined automatically WITHOUT then causing value to be set again with a change in its 15th digit; or an app developer should be able to set value and magnitude, only leaving significand to be calculated.