feat(web): plugin playground presets - create layer styling example with point marker #1378
Conversation
WalkthroughThe pull request introduces modifications to the plugin management system, specifically enhancing layer-related functionality. A new GeoJSON styling plugin has been added to the preset plugins, enabling more sophisticated layer styling capabilities. The changes include updating the import statements and expanding the Changes
Sequence DiagramsequenceDiagram
participant User
participant PluginManager
participant LayerStylePlugin
participant Map
User->>PluginManager: Select GeoJSON Styling Plugin
PluginManager->>LayerStylePlugin: Load Plugin
LayerStylePlugin->>Map: Apply Point Styles
LayerStylePlugin->>Map: Apply Polyline Styles
LayerStylePlugin->>Map: Apply Polygon Styles
Map-->>User: Render Styled Layers
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStyling.ts (3)
4-18: Consider enhancing the plugin metadata.While the basic configuration is good, consider adding more metadata fields for better documentation:
- author
- repository
- license
name: Layer Styling Manager version: 1.0.0 +author: reearth +repository: https://github.com/reearth/reearth-visualizer +license: Apache-2.0 extensions:
25-44: Consider making coordinates configurable.The coordinates are currently hardcoded, which limits reusability. Consider making them configurable through the UI or as plugin parameters.
57-85: Move styles to a separate CSS file.Inline styles make maintenance difficult. Consider moving styles to a separate CSS file for better maintainability.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/beta/features/PluginPlayground/Plugins/presets/index.ts(2 hunks)web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStyling.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: ci-server / ci-server-lint
- GitHub Check: ci-server / ci-server-test
- GitHub Check: ci-web / ci
- GitHub Check: Redirect rules - reearth-web
- GitHub Check: Header rules - reearth-web
- GitHub Check: Pages changed - reearth-web
🔇 Additional comments (3)
web/src/beta/features/PluginPlayground/Plugins/presets/index.ts (1)
15-15: LGTM! Plugin integration looks good.The layerStylingManager is correctly imported and added to the appropriate category in presetPlugins.
Also applies to: 67-67
web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStyling.ts (2)
1-146: Add comprehensive testing.The plugin implementation would benefit from automated tests covering:
- Layer creation and management
- UI interactions and validation
- Message handling and security
- Error scenarios
Would you like me to help create a test suite for this plugin?
47-54: 🛠️ Refactor suggestionAdd error handling for layer creation and camera movement.
The code assumes layer creation always succeeds. Consider adding error handling:
-const currentLayerId = reearth.layers.add({ +let currentLayerId; +try { + currentLayerId = reearth.layers.add({ // ... layer config ... -}); + }); + + // Only move camera if layer was created successfully + reearth.camera.flyTo({ + lat: 35.74642872517698, + lng: 139.97422779688281, + height: 2000, + heading: 0, + pitch: -45, + roll: 0 + }); +} catch (error) { + console.error("Failed to create layer:", error); + reearth.ui.show("<div>Error: Failed to create layer</div>"); +}Likely invalid or redundant comment.
web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStyling.ts
Outdated
Show resolved
Hide resolved
web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStyling.ts
Outdated
Show resolved
Hide resolved
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1378 +/- ##
==========================================
- Coverage 22.79% 22.52% -0.28%
==========================================
Files 1052 1063 +11
Lines 109347 110870 +1523
Branches 669 679 +10
==========================================
+ Hits 24924 24968 +44
- Misses 83161 84636 +1475
- Partials 1262 1266 +4
Flags with carried forward coverage won't be shown. Click here to find out more.
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/geojsonStyling.ts (6)
3-17: Add documentation for plugin configuration options.Consider adding comments to document the purpose and impact of the configuration options, especially for fields like
disableEditanddisableDelete. This will help other developers understand the configuration constraints.const yamlFile: FileType = { + // Unique identifier for the YAML configuration file id: "geojson-styling-reearth-yml", title: "reearth.yml", + // Plugin configuration in YAML format sourceCode: `id: geojson-styling-plugin name: GeoJSON Styling Examples version: 1.0.0 extensions: - id: geojson-styling type: widget name: GeoJSON Styling description: Examples of GeoJSON features with different styling options `, + // Prevent users from modifying the configuration disableEdit: true, + // Prevent users from removing the configuration disableDelete: true };
24-51: Consider extracting configuration into constants.The point marker configuration uses hardcoded values. Consider extracting these into named constants for better maintainability and reusability.
+// Point marker configuration +const POINT_MARKER_CONFIG = { + coordinates: [139.97422779688281, 35.74642872517698], + style: { + pointColor: "red", + pointSize: 12, + pointOutlineColor: "white", + pointOutlineWidth: 1, + height: 100, + heightReference: "relative" + } +}; const pointLayer = reearth.layers.add({ type: "simple", data: { type: "geojson", value: { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { - coordinates: [139.97422779688281, 35.74642872517698], + coordinates: POINT_MARKER_CONFIG.coordinates, type: "Point", }, }, ], }, }, marker: { style: "point", - pointColor: "red", - pointSize: 12, - pointOutlineColor: "white", - pointOutlineWidth: 1, - height: 100, - heightReference: "relative" + ...POINT_MARKER_CONFIG.style } });
54-82: Remove redundant property and extract configuration.
- The
show: trueproperty is redundant as it's the default value.- Consider extracting the configuration similar to the point marker suggestion above.
+// Polyline configuration +const POLYLINE_CONFIG = { + coordinates: [ + [139.93007825346956, 35.81332779614391], + [139.8105822019014, 35.730789521095986] + ], + style: { + clampToGround: true, + classificationType: "terrain", + strokeColor: "red", + strokeWidth: 3 + } +}; const polylineLayer = reearth.layers.add({ type: "simple", data: { type: "geojson", value: { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { - coordinates: [ - [139.93007825346956, 35.81332779614391], - [139.8105822019014, 35.730789521095986], - ], + coordinates: POLYLINE_CONFIG.coordinates, type: "LineString", }, }, ], }, }, polyline: { - clampToGround: true, - classificationType: "terrain", - show: true, - strokeColor: "red", - strokeWidth: 3 + ...POLYLINE_CONFIG.style } });
85-123: Simplify color expression and remove redundant properties.
- The
show: trueandfill: trueproperties are redundant as they're default values.- The color expression could be simplified using rgba.
- Consider extracting the configuration similar to previous suggestions.
+// Polygon configuration +const POLYGON_CONFIG = { + coordinates: [ + [ + [139.56560369329821, 35.859787461762906], + [139.56560369329821, 35.586320662892106], + [139.73648312259508, 35.586320662892106], + [139.73648312259508, 35.859787461762906], + [139.56560369329821, 35.859787461762906], + ], + ], + style: { + clampToGround: true, + classificationType: "terrain", + fillColor: { + expression: "rgba(237, 2, 151, 0.5)" + }, + stroke: true, + strokeColor: "blue", + strokeWidth: 3 + } +}; const polygonLayer = reearth.layers.add({ type: "simple", data: { type: "geojson", value: { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { - coordinates: [ - [ - [139.56560369329821, 35.859787461762906], - [139.56560369329821, 35.586320662892106], - [139.73648312259508, 35.586320662892106], - [139.73648312259508, 35.859787461762906], - [139.56560369329821, 35.859787461762906], - ], - ], + coordinates: POLYGON_CONFIG.coordinates, type: "Polygon", }, }, ], }, }, polygon: { - clampToGround: true, - classificationType: "terrain", - fill: true, - fillColor: { - expression: "color('#ed0297',0.5)" - }, - show: true, - stroke: true, - strokeColor: "blue", - strokeWidth: 3 + ...POLYGON_CONFIG.style } });
126-133: Consider dynamic camera positioning based on layer bounds.Instead of hardcoded camera position, consider calculating the bounding box of all layers and positioning the camera to fit this view. This would make the example more resilient to coordinate changes.
136-140: Consider adding TypeScript interfaces for better type safety.Define interfaces for the plugin configuration to improve type safety and documentation.
+interface GeoJSONPluginConfig { + id: string; + title: string; + files: FileType[]; +} -export const geojsonStyling: PluginType = { +export const geojsonStyling: GeoJSONPluginConfig = { id: "geojson-styling", title: "GeoJSON Styling", files: [widgetFile, yamlFile] };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/beta/features/PluginPlayground/Plugins/presets/index.ts(2 hunks)web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/geojsonStyling.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/beta/features/PluginPlayground/Plugins/presets/index.ts
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Redirect rules - reearth-web
- GitHub Check: Header rules - reearth-web
- GitHub Check: Pages changed - reearth-web
- GitHub Check: ci-server / ci-server-lint
- GitHub Check: ci-web / ci
- GitHub Check: ci-server / ci-server-test
Overview
What I've done
What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit