Skip to content

Add styling and hidden geometry props#3928

Open
tina-ahm wants to merge 29 commits intomainfrom
feature/map-geometry-customization
Open

Add styling and hidden geometry props#3928
tina-ahm wants to merge 29 commits intomainfrom
feature/map-geometry-customization

Conversation

@tina-ahm
Copy link
Copy Markdown
Contributor

@tina-ahm tina-ahm commented Jan 2, 2026

Description

Related Issue(s)

Verification/QA

  • Manual functionality testing
    • I have tested these changes manually
    • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
    • No testing done/necessary
  • Automated tests
    • Unit test(s) have been added/updated
    • Cypress E2E test(s) have been added/updated
    • No automatic tests are needed here (no functional changes/additions)
    • I want someone to help me make some tests
  • UU/WCAG (follow these guidelines until we have our own)
    • I have tested with a screen reader/keyboard navigation/automated wcag validator
    • No testing done/necessary (no DOM/visual changes)
    • I want someone to help me perform accessibility testing
  • User documentation @ altinn-studio-docs
    • Has been added/updated
    • No functionality has been changed/added, so no documentation is needed
    • I will do that later/have created an issue
  • Support in Altinn Studio
    • Issue(s) created for support in Studio
    • This change/feature does not require any changes to Altinn Studio
  • Sprint board
    • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
    • I don't have permissions to do that, please help me out
  • Labels
    • I have added a kind/* and backport* label to this PR for proper release notes grouping
    • I don't have permissions to add labels, please help me out

Summary by CodeRabbit

  • New Features
    • Geometries can be hidden/shown per-item and accept custom JSON styling to override default appearance.
  • New Features
    • Map toolbar options now explicitly evaluate available drawing tools (polyline, polygon, rectangle, circle, marker).
  • Tests
    • Updated map component e2e interaction scope for deleting layers.
  • Documentation
    • Minor typo fix in unit test setup instructions.

Magnusrm and others added 19 commits October 14, 2025 12:40
* Map refactoring

* Implementing reading new optional bindings

* Adding changes to map component from upstream/refactor/map

---------

Co-authored-by: Ole Martin Handeland <git@olemartin.org>
* Add toolbar config

* Add config validation

- Add config validation for geometryIsEditable & toolbar

* Update useValidateGeometriesBindings.ts

- Only check for geometryIsEditable if simpleBinding is not set when geometries are defined

* Update map config validation

- Update useValidateGeometriesBindings to check for geometryIsEditable if toolbar also is set
- Update Map.tsx to only show MapSingleMarker if simpleBinding is set

* Add PR fixes
- save to datamodel and load geometries to editable layer
* WIP edit geometry

* working editing geometries
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 2, 2026

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 96bc6c57-4438-4a92-a5ad-c153400d5a05

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Added optional per-geometry bindings geometryIsHidden and geometryStyle that flow from config and types through geometry resolution to rendering; hidden geometries are filtered out and styles (JSON PathOptions) are applied if valid. Also expanded toolbar evaluation to explicit booleans and a minor README and e2e test scope change.

Changes

Cohort / File(s) Summary
Type Definitions & Config
src/layout/Map/types.ts, src/layout/Map/config.ts
Added optional isHidden?: boolean and style?: string to RawGeometry and Geometry types. Extended IDataModelBindingsForMap with geometryIsHidden and geometryStyle bindings.
Data Resolution (hooks)
src/layout/Map/features/geometries/fixed/hooks.ts
useMapRawGeometries now resolves per-geometry isHidden and style from bindings (with fallbacks), includes them on RawGeometry/Geometry, and updated memo deps.
Rendering Logic
src/layout/Map/features/geometries/fixed/MapGeometries.tsx
Filters out geometries with isHidden. Parses style JSON (silently ignores parse errors) and passes resulting Leaflet PathOptions to each GeoJSON layer when present.
Toolbar Evaluation
src/layout/Map/index.tsx
Map.evalExpressions now maps props.item.toolbar fields into explicit booleans (polyline, polygon, rectangle, circle, marker) defaulting to false.
Tests & Docs
test/e2e/integration/component-library/map.ts, README.md
E2E test updated to scope the delete-layers click to the geometries form container. README typo corrected ("nescessary" → "necessary").

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check ❓ Inconclusive The PR implements geometry styling via configurable style bindings but only provides framework; users must configure colors per geometry rather than automatically applying #3982 colors to specific geometry types. Clarify whether the automatic application of distinct colors (Fulldyrka jord: #FFB312, Overflatedyrka jord: #FFFF00, Innmarksbeite: #B6FFFA) from #3982 was completed or deferred to configuration/service ownership.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add styling and hidden geometry props' accurately summarizes the main changes: new styling and hidden state properties for geometries.
Description check ✅ Passed The PR description uses the provided template with key sections completed: closes #3982 is referenced, manual testing is checked, and labels are indicated as added.
Out of Scope Changes check ✅ Passed All changes directly support the geometry customization feature: styling/hidden props, type updates, hook resolution, rendering logic, and map configuration. One unrelated typo fix in README.md ('necessary') and E2E test scope refinement are minor ancillary improvements.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/map-geometry-customization

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
17.0% Coverage on New Code (required ≥ 45%)
15.8% Condition Coverage on New Code (required ≥ 45%)

See analysis details on SonarQube Cloud

@tina-ahm
Copy link
Copy Markdown
Contributor Author

/publish

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 14, 2026

PR release:

  • <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.24.1-pr.3644.map-geometry-customization.85c6f7ee/altinn-app-frontend.css">
  • <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.24.1-pr.3644.map-geometry-customization.85c6f7ee/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

Base automatically changed from feature/3686-draw-on-map to main February 24, 2026 15:50
@sonarqubecloud
Copy link
Copy Markdown

@sonarqubecloud
Copy link
Copy Markdown

@Magnusrm Magnusrm added the kind/product-feature Pull requests containing new features label Apr 27, 2026
@tina-ahm tina-ahm marked this pull request as ready for review April 27, 2026 10:34
@tina-ahm tina-ahm requested a review from Magnusrm April 27, 2026 10:34
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/layout/Map/config.ts`:
- Around line 59-66: The description for the CG.prop 'geometryStyle' (created
with CG.dataModelBinding) is too vague — update its setDescription to state that
the binding expects a JSON-serialized Leaflet PathOptions object (i.e., a string
containing JSON like {"color":"#ff0000","weight":2,"fillOpacity":0.3}) because
the code calls JSON.parse(style) and passes the result to Leaflet's GeoJSON
style prop; make the description explicitly mention the required JSON shape and
an example to prevent authors from supplying plain color strings.

In `@src/layout/Map/features/geometries/fixed/MapGeometries.tsx`:
- Around line 42-50: The MapGeometries render currently calls JSON.parse(style)
directly (inside the GeoJSON element) which will throw on malformed input and
also uses an unsafe type cast; update MapGeometries to safely parse the optional
style string per row by wrapping JSON.parse in try/catch and returning undefined
on error, remove any "as PathOptions" casting, and optionally memoize the parsed
result (keyed by altinnRowId + style) so parsing isn’t repeated each render;
locate the GeoJSON usage in MapGeometries.tsx and replace the direct
JSON.parse(style) with a guarded parser that returns undefined on failure and
ensures the value passed to the GeoJSON style prop is correctly typed without
unsafe casting.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9f0df339-78f2-462e-95cf-7b9c3a413c95

📥 Commits

Reviewing files that changed from the base of the PR and between 7218f3c and 0525d37.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (5)
  • src/layout/Map/config.ts
  • src/layout/Map/features/geometries/fixed/MapGeometries.tsx
  • src/layout/Map/features/geometries/fixed/hooks.ts
  • src/layout/Map/index.tsx
  • src/layout/Map/types.ts

Comment thread src/layout/Map/config.ts
Comment thread src/layout/Map/features/geometries/fixed/MapGeometries.tsx Outdated
@tina-ahm tina-ahm added the backport-ignore This PR is a new feature and should not be cherry-picked onto release branches label Apr 27, 2026
@tina-ahm
Copy link
Copy Markdown
Contributor Author

/publish

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 27, 2026

PR release:

  • <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.28.0-pr.4778.map-geometry-customization.8e6451ef/altinn-app-frontend.css">
  • <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.28.0-pr.4778.map-geometry-customization.8e6451ef/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-ignore This PR is a new feature and should not be cherry-picked onto release branches kind/product-feature Pull requests containing new features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Styling of geometries (map component)

2 participants