Skip to content

Add styling and hidden geometry props#3928

Open
tina-ahm wants to merge 30 commits into
mainfrom
feature/map-geometry-customization
Open

Add styling and hidden geometry props#3928
tina-ahm wants to merge 30 commits into
mainfrom
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
    • Per-geometry visibility toggles and optional JSON styling to override default appearance.
    • Map toolbar now explicitly evaluates availability of drawing tools (polyline, polygon, rectangle, circle, marker).
  • Tests
    • Adjusted map component e2e interaction scope for deleting layers.
  • Documentation
    • Fixed typo 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

📝 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 Leaflet PathOptions) are parsed and applied when valid. Also made toolbar flag evaluation explicit; small README and e2e test tweak.

Changes

Map geometries & toolbar

Layer / File(s) Summary
Data Shape / 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 reads configured binding names (with fallbacks), resolves per-geometry isHidden and style, carries them through parseGeometries, and updated memoization deps.
Rendering / Layers
src/layout/Map/features/geometries/fixed/MapGeometries.tsx
Filters out geometries where isHidden is true; parses style JSON via parseStyle (returns undefined on missing/invalid JSON) and passes parsed Leaflet PathOptions to each GeoJSON layer.
Entry / Eval
src/layout/Map/index.tsx
Map.evalExpressions now builds a toolbar object when present, evaluating polyline, polygon, rectangle, circle, and marker to explicit booleans using props.evalBool(..., false).
Tests & Docs
test/e2e/integration/component-library/map.ts, README.md
E2E test narrowed the selector scope for the "Delete layers" click to the geometries form container; README typo corrected.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 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.
Description check ⚠️ Warning The PR description is missing the key technical summary of changes; only the template structure with checkboxes is provided. Add a detailed description explaining what changes were made, how geometry styling and hidden properties work, and why they were implemented this way.
Linked Issues check ❓ Inconclusive The PR implements configurable styling and hidden geometry properties via data-model bindings. However, the implementation enables per-geometry styling override capability without hard-coded color mappings for the three specific soil types (Fulldyrka jord, Overflatedyrka jord, Innmarksbeite) requested in issue #3982. Verify that the generic style-property mechanism allows the three soil types to be styled with the requested colors (#FFB312, #FFFF00, #B6FFFA) and opacity via data-model bindings or other configuration, and confirm this functionality has been tested.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add styling and hidden geometry props' clearly summarizes the main changes: two new properties for map geometries (styling/style customization and hidden state control).
Out of Scope Changes check ✅ Passed Changes align with stated objectives: geometry type/hidden props added to config, types, and rendering logic. The README typo fix is minimal. The E2E test update to target a specific form element is a maintenance fix supporting the geometry features.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 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

@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!

@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
18.2% Coverage on New Code (required ≥ 45%)
17.5% Condition Coverage on New Code (required ≥ 45%)

See analysis details on SonarQube Cloud

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