Replace asset & attribute select dropdowns with `or-attribute-picker` component. #55

dominiquekleeven · 2025-10-21T10:09:57Z

Closes #53 and #52

Changes

This PR replaces the current method of selecting assets and their attributes (dropdowns) with the or-attribute-picker component.

Added or-attribute-picker dependency.
Added custom-asset-attribute-picker.ts, which extends/overrides OrAssetAttributePicker.
- Reasoning: for regressors, we only want to show attributes that have both storeDataPoints and either hasPredictedDataPoints or hasAgentLink meta items.
- This resolves issue Bug: Attributes without forecasted/predicted datapoints are listed when adding a prophet regressor #52.
Updated the manager config eventProviderType to WEBSOCKET so that the or-asset-tree component inside the attribute picker functions correctly, as it relies on WebSockets.
The service now locally updates the manager.displayRealm so that or-asset-tree knows which realm to query for assets.

Screenshots

Select target button

Select attributes dialog (attribute picker)

When an attribute has been selected

Clicking on the Asset/Attribute will show the dialog again to modify it

Regressors

Functions the same as the target, but has an extra meta item requirement for the attribute

…a config item

Copilot

Pull request overview

This PR modernizes the asset/attribute selection UI by replacing dropdown components with the or-attribute-picker component. Key changes include adding the picker dependency, creating a custom extension for regressor-specific filtering, switching to WebSocket event provider, and updating the realm display context.

Replaces dropdown-based asset/attribute selection with or-attribute-picker dialog component
Adds custom filtering logic to show only attributes with required meta items for regressors
Updates event provider configuration from POLLING to WEBSOCKET for or-asset-tree compatibility

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
frontend/src/pages/pages-config-editor.ts	Replaced dropdown inputs with dialog-based attribute picker, added asset loading methods, removed dropdown list state management
frontend/src/pages/app-layout.ts	Sets manager.displayRealm to enable or-asset-tree realm queries
frontend/src/index.ts	Changed eventProviderType from POLLING to WEBSOCKET
frontend/src/components/custom-asset-attribute-picker.ts	New custom component extending OrAssetAttributePicker with predicted datapoints filtering
frontend/package.json	Added @openremote/or-attribute-picker dependency
frontend/package-lock.json	Updated dependency tree with new packages and version updates

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-01T16:43:35Z

frontend/src/pages/pages-config-editor.ts

+    // Load asset data for target
+    protected async loadTargetAsset() {
+        if (this.formData.target.asset_id && this.formData.target.attribute_name) {
+            try {
+                const response = await manager.rest.api.AssetResource.get(this.formData.target.asset_id);
+                this.targetAsset = response.data;
+            } catch (err) {
+                console.error(err);
+                this.targetAsset = null;
+            }
+        } else {
+            this.targetAsset = null;
+        }
    }


The console.error on line 267 logs the error without context. Consider logging a descriptive message like 'Failed to load target asset:' before the error to help with debugging.

Copilot · 2025-12-01T16:43:35Z

frontend/src/pages/pages-config-editor.ts

+    // Load asset data for regressor
+    protected async loadRegressorAsset(index: number) {
+        if (!this.formData.regressors) return;
+
+        const regressor = this.formData.regressors[index];
+        if (regressor.asset_id && regressor.attribute_name) {
+            try {
+                const response = await manager.rest.api.AssetResource.get(regressor.asset_id);
+                this.regressorAssets.set(index, response.data);
+                this.regressorAssets = new Map(this.regressorAssets);
+            } catch (err) {
+                console.error(err);
+                this.regressorAssets.delete(index);
+                this.regressorAssets = new Map(this.regressorAssets);
+            }
        }
    }


The console.error on line 325 logs the error without context. Consider logging a descriptive message like 'Failed to load regressor asset at index ${index}:' before the error to improve debugging.

Copilot · 2025-12-01T16:43:35Z

frontend/src/pages/pages-config-editor.ts

    protected error: string | null = null;

+    @state()
+    protected targetAsset: any = null;


The targetAsset property uses 'any' type. Consider defining a proper type interface for the asset object to improve type safety and code maintainability.

Copilot · 2025-12-01T16:43:36Z

frontend/src/pages/pages-config-editor.ts

+    protected targetAsset: any = null;
+
+    @state()
+    protected regressorAssets: Map<number, any> = new Map();


The Map value uses 'any' type. Consider defining a proper type interface for asset objects to improve type safety throughout the codebase.

Copilot · 2025-12-01T16:43:36Z

frontend/src/components/custom-asset-attribute-picker.ts

+            return "No attributes with 'has predicted data points' and either 'store data points' or 'agent link' configuration item found";
+        }
+        if (this.showOnlyHasPredictedDatapointsAttrs) {
+            // TODO: local translation
+            return "No attributes with 'has predicted data points' configuration item found";


The TODO comment indicates this error message should use local translation keys instead of hard-coded strings. Consider adding translation keys to maintain consistency with the rest of the codebase.

Suggested change

return "No attributes with 'has predicted data points' and either 'store data points' or 'agent link' configuration item found";

}

if (this.showOnlyHasPredictedDatapointsAttrs) {

// TODO: local translation

return "No attributes with 'has predicted data points' configuration item found";

return 'noPredictedAndDatapointAttributes';

}

if (this.showOnlyHasPredictedDatapointsAttrs) {

// TODO: local translation

return 'noPredictedAttributes';

frontend/src/components/custom-asset-attribute-picker.ts

+            return "No attributes with 'has predicted data points' and either 'store data points' or 'agent link' configuration item found";
+        }
+        if (this.showOnlyHasPredictedDatapointsAttrs) {
+            // TODO: local translation
+            return "No attributes with 'has predicted data points' configuration item found";


Copilot · 2025-12-01T16:43:37Z

frontend/src/pages/pages-config-editor.ts

-                Object.values(asset.attributes ?? {}).forEach((attribute) => {
-                    if (attribute.meta?.storeDataPoints !== true) {
-                        delete asset.attributes?.[attribute.name as keyof typeof asset.attributes];
+        dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: any) => {


The event parameter 'ev' uses 'any' type. Consider using the proper event type 'OrAssetAttributePickerPickedEvent' for better type safety.

Suggested change

dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: any) => {

dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: OrAssetAttributePickerPickedEvent) => {

Copilot · 2025-12-01T16:43:37Z

frontend/src/pages/pages-config-editor.ts

+            document.body.style.overflow = '';
+        };
+
+        dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: any) => {


The event parameter 'ev' uses 'any' type. Consider using the proper event type 'OrAssetAttributePickerPickedEvent' for better type safety.

Suggested change

dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: any) => {

dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: OrAssetAttributePickerPickedEvent) => {

dominiquekleeven added 10 commits October 21, 2025 11:40

WIP: Replace dropdowns with or-attribute-picker component

b8e0394

WIP: Fix odd spacing and add icon for select regressor

e26257a

Format

c2a1f6a

WIP: Improve displayed message when no attribute has the required met…

da83de3

…a config item

WIP: custom attribute picker flag behaviour changes

2841a95

Comments

74edce3

WIP: Dont display dialog scrim

bfca1c9

Re-add or-mwc-components

f60f025

Merge branch 'main' into feature/add-attribute-picker

5b41b98

Merge branch 'main' into feature/add-attribute-picker

55b83d4

dominiquekleeven marked this pull request as ready for review December 1, 2025 12:54

dominiquekleeven requested a review from a team December 1, 2025 12:54

wborn requested a review from Copilot December 1, 2025 16:41

Copilot started reviewing on behalf of wborn December 1, 2025 16:41 View session

Copilot finished reviewing on behalf of wborn December 1, 2025 16:42

Copilot AI reviewed Dec 1, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Replace asset & attribute select dropdowns with `or-attribute-picker` component. #55

Replace asset & attribute select dropdowns with `or-attribute-picker` component. #55

Uh oh!

dominiquekleeven commented Oct 21, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

This comment was marked as resolved.

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: any) => {
	dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, async (ev: OrAssetAttributePickerPickedEvent) => {

Replace asset & attribute select dropdowns with or-attribute-picker component. #55

Are you sure you want to change the base?

Replace asset & attribute select dropdowns with or-attribute-picker component. #55

Uh oh!

Conversation

dominiquekleeven commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshots

Select target button

Select attributes dialog (attribute picker)

When an attribute has been selected

Regressors

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Replace asset & attribute select dropdowns with `or-attribute-picker` component. #55

Replace asset & attribute select dropdowns with `or-attribute-picker` component. #55

dominiquekleeven commented Oct 21, 2025 •

edited

Loading