Fix input widget inconsistencies by ArturoManzoli · Pull Request #2256 · bluerobotics/cockpit

ArturoManzoli · 2025-11-26T21:38:23Z

Added a customizable AlertIcon animated component that can be used to call user's attention on specific parts of the system (tooltip when hovering it not captured by the screen recorder);
Fixed the input-widgets that didn't receive pointer events even if they were linked to a data-lake variable;
Fixed the SideConfigPanel that was with the wrong height calculation inside EditMenu

Screenshare.-.2025-11-26.6_28_28.PM.mp4

close #2255
fix #1749

ES-Alexander

Some positive updates here, and I think some miscommunication - likely on my part 😅

I've put comments as seems relevant.

src/components/custom-widget-elements/Checkbox.vue

src/types/widgets.ts

src/components/custom-widget-elements/Checkbox.vue

ES-Alexander · 2025-11-27T10:44:03Z

src/components/InputElementConfig.vue

@@ -431,10 +432,15 @@ watch(

 const getMarginsFromBarsHeight = computed(() => {


Is this related to / fixing #1749?

Yep, adding the issue to the PR

rafaellehmkuhl

Besides the minor JSDocs thing, there's a few other things I think need to be addressed:

The dial is not beng greyed-out when connected to read-only variables.

The greyed-out versions of the Slider and Dropdown components is almost invisible, looking like there's an empty space there instead of a widget.
I think the tooltip for the read-only was not implemented. It's an important one, since it's a direct communication to the user about what's happening.
The tooltip in the AlertIcon was implemented using the title attribute, which is not great since it needs a long (usually 2) hovering to appear. Better to use Vuetify's v-tooltip or a dedicated library like Floating UI.
The AlertIcon is in a strange position now. Maybe better located in the center of the widget?

rafaellehmkuhl · 2025-11-26T22:18:02Z

src/components/AlertIcon.vue

+defineProps<{
+  /**
+   *
+   */
+  icon?: string
+  /**
+   *
+   */
+  color?: string
+  /**
+   *
+   */
+  animation?: 'pulse' | 'ping' | 'bounce' | 'spin' | ''
+  /**
+   *
+   */
+  tooltip?: string


Missing docs here.

ArturoManzoli · 2025-11-27T13:15:10Z

Besides the minor JSDocs thing, there's a few other things I think need to be addressed:

The dial is not beng greyed-out when connected to read-only variables.

I really think we should not grey out when connected to read only variables. This would make it hard to read the values

The greyed-out versions of the Slider and Dropdown components is almost invisible, looking like there's an empty space there instead of a widget.

👍

I think the tooltip for the read-only was not implemented. It's an important one, since it's a direct communication to the user about what's happening.

👍

The tooltip in the AlertIcon was implemented using the title attribute, which is not great since it needs a long (usually 2) hovering to appear. Better to use Vuetify's v-tooltip or a dedicated library like Floating UI.

I'll replace it by the v-tooltip

The AlertIcon is in a strange position now. Maybe better located in the center of the widget?

I've tested on the center of the widget and it looks odd to me, covering too much of the main component. I think is better to place it on the lower right

rafaellehmkuhl · 2025-11-27T13:17:34Z

Besides the minor JSDocs thing, there's a few other things I think need to be addressed:

The dial is not beng greyed-out when connected to read-only variables.

I really think we should not grey out when connected to read only variables. This would make it hard to read the values

I agree. It's just that all other widgets are being greyed-out, with the exception of the Dial.

rafaellehmkuhl · 2025-11-27T13:22:33Z

I've tested on the center of the widget and it looks odd to me, covering too much of the main component. I think is better to place it on the lower right

I think it is ok to cover the mini-widget, as it's not working after all. The only case where it really hides the widget is the Checkbox. In the corner right now it's looking kinda odd.

Anyway, no big deal about that if you prefer not change. Can we just standardize the position? As can be sheen in the screenshot, the icon is on a different position for each widget, so it does not look finished/polished.

ES-Alexander

Nice to have some improvements to the alert setup, and to have the connected status separated out (although it seems to have been applied a little overzealously 😅)

Some comments/suggestions to clarify :-)

ES-Alexander · 2025-11-27T14:32:40Z

src/components/custom-widget-elements/Checkbox.vue

+      :disabled="widgetStore.editingMode || !isConnected || !isInput"
+      :class="{ 'opacity-30': !isConnected }"


Suggested change

:disabled="widgetStore.editingMode || !isConnected || !isInput"

:class="{ 'opacity-30': !isConnected }"

:class="{ 'pointer-events-none': !isInput }"

:disabled="widgetStore.editingMode || !isConnected"

I think when it's an output it's not disabled, so we don't want it to look greyed out (otherwise it's hard to read as an indicator) - we just don't want users to be able to change the value of it. I'm unsure whether pointer-events-none also prevents us from being able to do @rafaellehmkuhl's tooltip idea though (letting users know that it's an "indicator for the XXX output variable")...

I also think making it less opaque at the same time as disabling it is likely to make it hard to see at all, since disabling already makes it quite faint.

Similar ideas apply to the other widgets.

ES-Alexander · 2025-11-27T14:35:10Z

src/components/custom-widget-elements/Checkbox.vue

 )

+const isConnected = computed(() => {
+  return miniWidget.value.options.dataLakeVariable?.id || widgetStore.editingMode


Suggested change

return miniWidget.value.options.dataLakeVariable?.id || widgetStore.editingMode

return miniWidget.value.options.dataLakeVariable?.id

Editing mode is a separate thing, right? If they all show up as disconnected (e.g. with the alert icon and all) when in editing mode then the user could think they're going crazy - especially if they just configured the variable 😅

This is simply to prevent the AlertIcon from appearing in EditingMode. Otherwise, the UI would become crowded with unnecessary information, making it harder for the user to position the input widgets.
In any case, the configuration screen appears as soon as the user adds an input widget, naturally prompting them to configure it.

Given this function is not just used for the alert icon, shouldn't that be handled as an additional conditional in the alert icon instead?

ES-Alexander · 2025-11-27T14:38:48Z

src/components/custom-widget-elements/Dial.vue

        class="value-display bg-[#FFFFFF22] border-[1px] rounded-md p-[2px] min-w-[40px] text-center elevation-1"
        :class="
-          isInput && isEditingValue
+          isConnected && isEditingValue


I believe this, and the others in this HTML section, were indeed supposed to be checking if it's an input (which already implies it's connected). The elements that are being selectively displayed are value-modifying elements, so they only make sense to display if the connected variable can be modified.

ES-Alexander · 2025-11-27T14:39:58Z

src/components/custom-widget-elements/Checkbox.vue

+      color="#b9af1d"
+      animation="pulse"
+      class="absolute center ml-10 mt-[10px]"
+      tooltip="This element isn't connected to a data-lake variable yet. Right click and select options to configure it."


Suggested change

tooltip="This element isn't connected to a data-lake variable yet. Right click and select options to configure it."

tooltip="This element isn't connected to a data-lake variable yet. Click here to configure it."

Good catch! I'll fix that

ES-Alexander · 2025-11-27T14:42:09Z

src/components/custom-widget-elements/Dial.vue

-  if (isInput.value && !widgetStore.editingMode) {
+  if (isConnected.value && !widgetStore.editingMode) {


We should only allow editing input variables, not any connected variable.

ES-Alexander · 2025-11-27T14:42:33Z

src/components/custom-widget-elements/Dial.vue

-  if (!isInput.value) return
+  if (!isConnected.value) return


The dial should only be user-movable for input variables.

ES-Alexander · 2025-11-27T14:43:44Z

src/components/custom-widget-elements/Dial.vue


 const startEditingValue = (): void => {
-  if (widgetStore.editingMode || !isInput.value) return
+  if (widgetStore.editingMode || !isConnected.value || isInput.value) return


Suggested change

if (widgetStore.editingMode || !isConnected.value || isInput.value) return

if (widgetStore.editingMode || !isConnected.value || !isInput.value) return

No modifying the value if:

currently in edit mode (doing higher level interface editing)

the widget is NOT connected to a variable

the widget's connected variable is NOT an input

ArturoManzoli · 2025-11-27T16:09:38Z

I've tested on the center of the widget and it looks odd to me, covering too much of the main component. I think is better to place it on the lower right

I think it is ok to cover the mini-widget, as it's not working after all. The only case where it really hides the widget is the Checkbox. In the corner right now it's looking kinda odd.

Anyway, no big deal about that if you prefer not change. Can we just standardize the position? As can be sheen in the screenshot, the icon is on a different position for each widget, so it does not look finished/polished.

Sure, I agree with you. The positioning was already standardized on the last push. I didn't update the screenshots, but they all are now aligned

rafaellehmkuhl · 2025-11-27T16:12:17Z

Sure, I agree with you. The positioning was already standardized on the last push. I didn't update the screenshots, but they all are now aligned

That screenshot I took from the latest push. Maybe some changes were not pushed?

Signed-off-by: Arturo Manzoli <[email protected]>

…riable type Signed-off-by: Arturo Manzoli <[email protected]>

…ting on editMenu Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli · 2025-11-28T11:28:21Z

Sure, I agree with you. The positioning was already standardized on the last push. I didn't update the screenshots, but they all are now aligned

That screenshot I took from the latest push. Maybe some changes were not pushed?

Indeed they were misaligned. Fixed now!

ArturoManzoli · 2025-11-28T11:31:01Z

@ES-Alexander @rafaellehmkuhl

I think I’ve addressed all the issues you mentioned. In my tests, everything was working correctly now.

rafaellehmkuhl

Everything working perfectly now! Boaaaaa

ES-Alexander

Almost there! Some minor code improvements, plus:

It seems there's some inconsistent placement - checkboxes are centered, but sliders are shortened and right aligned within their box (with the alert icon off to the left), and switches are left-aligned:
Per the first image, it's also apparently possible for a slider to end up with a different value than the variable it controls, although I'm not sure that's high enough priority to fix.
I also found an intermittent issue where creating elements (I noticed it with both sliders and toggle switches) can sometimes link them together, seemingly at the hash level:

Screen.Recording.2025-11-28.at.8.04.31.pm.mov

which then stayed linked after a Cockpit refresh.
There was also an issue where created elements sometimes don't appear in the interface (even though they're listed in the widget list), but I wasn't able to replicate that

If 2-4 are difficult to investigate, I don't think they need to be fixed in this PR.

ES-Alexander · 2025-11-28T11:36:47Z

src/components/custom-widget-elements/Checkbox.vue

+})
+
+const isInteractive = computed(() => {
+  return !!miniWidget.value.options.dataLakeVariable?.id && isInput.value && !widgetStore.editingMode


Suggested change

return !!miniWidget.value.options.dataLakeVariable?.id && isInput.value && !widgetStore.editingMode

return isConnected.value && isInput.value && !widgetStore.editingMode

It seems more expressive (and easier to maintain) to reuse the named calculation.

ES-Alexander · 2025-11-28T11:47:33Z

src/components/custom-widget-elements/Dial.vue


 const startEditingValue = (): void => {
-  if (widgetStore.editingMode || !isInput.value) return
+  if (!isInteractive.value || !isConnected.value) return


Suggested change

if (!isInteractive.value || !isConnected.value) return

if (!isInteractive.value) return

Connectedness is checked for as part of interactivity, so checking again here is redundant.

ES-Alexander · 2025-11-28T11:54:36Z

src/components/custom-widget-elements/Checkbox.vue

-      @update:model-value="handleToggleAction"
-    ></v-checkbox>
+    <v-tooltip
+      text="This element is on display mode. To make it interactive, create or select a different data-lake variable"


Suggested change

text="This element is on display mode. To make it interactive, create or select a different data-lake variable"

text="This element is in display mode. To make it interactive, create or select a user-controlled data-lake variable"

ES-Alexander · 2025-11-28T12:15:54Z

src/components/custom-widget-elements/Checkbox.vue

+      text="This element is on display mode. To make it interactive, create or select a different data-lake variable"
+      location="top"
+      open-delay="500"
+      :disabled="isInteractive || !isConnected"


Suggested change

:disabled="isInteractive || !isConnected"

:disabled="isInput || !isConnected"

Otherwise it shows the tooltip in edit mode even when connected to an input variable.

…d to data-lake variable Signed-off-by: Arturo Manzoli <[email protected]>

ES-Alexander · 2025-11-28T14:43:04Z

Thanks again for all your hard work on this @ArturoManzoli - lots of good progress that our users will appreciate :-)

rafaellehmkuhl · 2025-11-28T14:43:12Z

As we decided externally I'm going to merge this PR as it is and @ES-Alexander will work on some of the suggested fixes so we can fast-forward the Beta release.

ES-Alexander · 2025-11-30T05:37:19Z

Docs note: unconnected/indicators/inputs differentiation

ArturoManzoli requested review from ES-Alexander and rafaellehmkuhl November 26, 2025 21:38

ES-Alexander requested changes Nov 27, 2025

View reviewed changes

ArturoManzoli force-pushed the fix-input-widget-inconsistency branch from a7d56d2 to f344920 Compare November 27, 2025 12:06

ArturoManzoli requested a review from ES-Alexander November 27, 2025 12:08

ArturoManzoli force-pushed the fix-input-widget-inconsistency branch 2 times, most recently from 6b8d844 to 2f35ca8 Compare November 27, 2025 12:15

rafaellehmkuhl requested changes Nov 27, 2025

View reviewed changes

ES-Alexander requested changes Nov 27, 2025

View reviewed changes

ArturoManzoli added 3 commits November 28, 2025 08:24

components: add AlertIcon component

4593c54

Signed-off-by: Arturo Manzoli <[email protected]>

types: keep data-lake.ts as single source of truth for the DataLakeVa…

117b0d2

…riable type Signed-off-by: Arturo Manzoli <[email protected]>

components: input-element-config: fix upper and lower margins not fit…

6913dc8

…ting on editMenu Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the fix-input-widget-inconsistency branch from 2f35ca8 to c0f2aa9 Compare November 28, 2025 11:25

ArturoManzoli requested review from ES-Alexander and rafaellehmkuhl November 28, 2025 11:31

ArturoManzoli force-pushed the fix-input-widget-inconsistency branch 2 times, most recently from 7c533b1 to de35bf5 Compare November 28, 2025 13:12

rafaellehmkuhl approved these changes Nov 28, 2025

View reviewed changes

ES-Alexander requested changes Nov 28, 2025

View reviewed changes

input-widgets: fix input widgets not accepting clicks even when linke…

048e04b

…d to data-lake variable Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the fix-input-widget-inconsistency branch from de35bf5 to 048e04b Compare November 28, 2025 14:25

rafaellehmkuhl merged commit f35b91c into bluerobotics:master Nov 28, 2025
12 checks passed

ES-Alexander mentioned this pull request Nov 28, 2025

Input widget cleanup #2257

Merged

ES-Alexander added the docs-needed Change needs to be documented label Nov 30, 2025

		@@ -431,10 +432,15 @@ watch(

		const getMarginsFromBarsHeight = computed(() => {

		:disabled="widgetStore.editingMode \|\| !isConnected \|\| !isInput"
		:class="{ 'opacity-30': !isConnected }"

	return miniWidget.value.options.dataLakeVariable?.id \|\| widgetStore.editingMode
	return miniWidget.value.options.dataLakeVariable?.id

	tooltip="This element isn't connected to a data-lake variable yet. Right click and select options to configure it."
	tooltip="This element isn't connected to a data-lake variable yet. Click here to configure it."

		if (isInput.value && !widgetStore.editingMode) {
		if (isConnected.value && !widgetStore.editingMode) {

	if (widgetStore.editingMode \|\| !isConnected.value \|\| isInput.value) return
	if (widgetStore.editingMode \|\| !isConnected.value \|\| !isInput.value) return

	return !!miniWidget.value.options.dataLakeVariable?.id && isInput.value && !widgetStore.editingMode
	return isConnected.value && isInput.value && !widgetStore.editingMode

	if (!isInteractive.value \|\| !isConnected.value) return
	if (!isInteractive.value) return

	text="This element is on display mode. To make it interactive, create or select a different data-lake variable"
	text="This element is in display mode. To make it interactive, create or select a user-controlled data-lake variable"

	:disabled="isInteractive \|\| !isConnected"
	:disabled="isInput \|\| !isConnected"

Comments

Conversation

ArturoManzoli commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ES-Alexander left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArturoManzoli Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArturoManzoli commented Nov 27, 2025

Uh oh!

rafaellehmkuhl commented Nov 27, 2025

Uh oh!

rafaellehmkuhl commented Nov 27, 2025

Uh oh!

ES-Alexander left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArturoManzoli commented Nov 27, 2025

Uh oh!

rafaellehmkuhl commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ArturoManzoli commented Nov 28, 2025

Uh oh!

ArturoManzoli commented Nov 28, 2025

Uh oh!

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

Uh oh!

ES-Alexander left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ES-Alexander commented Nov 28, 2025

ArturoManzoli commented Nov 26, 2025 •

edited

Loading

ArturoManzoli Nov 27, 2025 •

edited

Loading

rafaellehmkuhl commented Nov 27, 2025 •

edited

Loading

ES-Alexander left a comment •

edited

Loading

ES-Alexander commented Nov 30, 2025 •

edited

Loading