1.0.4 vizmapper merge #488
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: Copilot <[email protected]>
- Introduced utility functions to retrieve pie chart background color and size properties based on slice index. - Updated the `createCyjsDataMapper` function to utilize these new utilities for better maintainability. - Refactored pie chart property mappings to use constants from `SpecialPropertyName`. - Added validation for slice indices in new utility functions to ensure robustness. - Improved the handling of custom graphics properties in the update cycle. - Sync cy objects by necessarily removing custom graphics keys that would exist in the view model if custom graphics properties are removed
- Moved `CustomGraphic.tsx` to a new directory structure under `CustomGraphics/` for better organization. - Updated import paths in `VisualPropertyValueForm.tsx` to reflect the new location of `CustomGraphic`. - Introduced new components for rendering pie and ring charts (`PieChartRender.tsx` and `RingChartRender.tsx`) to enhance modularity and maintainability.
- Added margin and background color to the StyledAccordion for better visual separation. - Updated Typography in StyledAccordion to increase font weight for emphasis. - Introduced handling for 'nodeImageChart' visual properties in VisualPropertyValueRender. - Refactored ChartGraphicForm layout for better responsiveness and clarity. - Implemented step overview in CustomGraphicDialog to guide users through the configuration process. - Adjusted rendering order in PieChartRender and RingChartRender to align with Cytoscape.js expectations.
- Adjusted padding and margin in StyledAccordion for better spacing. - Updated Typography font weight for improved readability. - Simplified handling of custom graphic properties in ChartGraphicForm. - Introduced random color generation for chart slices to enhance visual diversity. - Enhanced user guidance in ChartGraphicForm with clearer instructions and layout adjustments. - Streamlined rendering logic in CustomGraphicDialog for better user experience.
…t configuration - Removed the monolithic `CustomGraphic.tsx` and replaced it with modular components for better maintainability. - Added `CustomGraphicDialog`, `CustomGraphicPicker`, and `CustomGraphicRender` for enhanced user interaction and rendering of pie and ring charts. - Implemented forms for attributes, palette selection, and properties configuration to streamline the chart setup process. - Updated import paths in `VisualPropertyValueForm.tsx` to reflect the new component structure. - Introduced utility functions for color management and chart properties handling to improve code organization and reusability.
- Replaced `ChartPreview` with `CustomGraphicPreview` - Updated `SelectTypeStep` to include a warning for missing numeric properties, enhancing user guidance. - Introduced `hasNumericProperties` state to manage step navigation and button states based on available data. - Refactored `StepProgress` to disable steps when numeric properties are not available, improving user experience. - Removed unused random color generation function and associated tests to streamline codebase.
…passes - Updated property names in CustomGraphicsPositionType to uppercase constants for improved clarity and consistency. - Adjusted DEFAULT_CUSTOM_GRAPHICS_POSITION to reflect the new property naming convention. - Enhanced exportNetworkToCx2 function by creating separate lists for custom graphic node visual properties based on their usage (defaults, mappings, bypasses), improving code organization and readability.
- Updated VisualPropertyValueRender to handle null custom graphic types, improving error handling. - Enhanced CustomGraphicDialog with new props for better user interaction, including disabling escape key and handling backdrop clicks. - Refactored README.md to reflect the new structure and features of custom graphics components, including detailed descriptions of new components and validation features. - Improved AttributesForm and PaletteForm for better user experience, including layout adjustments and enhanced palette selection with tabs and popover functionality.
There was a problem hiding this comment.
Pull Request Overview
This pull request introduces significant improvements and new features for custom graphics rendering in the Vizmapper, with a focus on pie and ring charts. The changes replace the old monolithic CustomGraphic.tsx with a comprehensive, modular component system that includes enhanced color palettes, improved visual property handling, and better user experience through a step-by-step wizard interface.
Key Changes:
- Refactored custom graphics system with modular React components for pie and ring chart rendering
- Added extensive color palette support with Sequential, Diverging, and Viridis color schemes
- Improved visual property mapping and CX export functionality with separate handling for defaults, mappings, and bypasses
- Enhanced Vizmapper UI with accordion-style organization and better visual property grouping
Reviewed Changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
src/store/io/exportCX.ts |
Separates custom graphic properties into distinct lists for defaults, mappings, and bypasses in CX export |
src/models/VisualStyleModel/impl/cyJsVisualPropertyConverter.ts |
Adds utility functions for generating pie chart property names with validation |
src/models/VisualStyleModel/impl/DefaultVisualStyle.ts |
Updates custom graphics position property names to use uppercase constants |
src/models/VisualStyleModel/impl/CyjsProperties/CyjsVisualPropertyName.ts |
Converts pie chart property types to use template literals for indexed properties |
src/models/VisualStyleModel/impl/CyjsProperties/CyjsStyleModels/DirectMappingSelector.ts |
Adds comprehensive pie chart property constants for all 16 slices |
src/models/VisualStyleModel/impl/CustomGraphicsImpl.ts |
Major refactor with new utility functions, property validation, and improved chart computation |
src/models/VisualStyleModel/impl/CustomColor.ts |
Adds 340+ lines of new color palettes for custom graphics |
src/models/VisualStyleModel/VisualPropertyValue/CustomGraphicsType.ts |
Updates position type property names to uppercase constants |
src/components/Vizmapper/index.tsx |
Complete UI overhaul with accordion organization and improved property grouping |
| Multiple new custom graphics components | Implements modular component system with wizard interface, form components, and rendering utilities |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Comment on lines
+36
to
+37
| const DEFAULT_COLOR = '#000000' as ColorType | ||
|
|
There was a problem hiding this comment.
Consider moving DEFAULT_COLOR to a constants file or importing from existing constants to maintain consistency across the codebase.
Suggested change
| const DEFAULT_COLOR = '#000000' as ColorType |
Comment on lines
+186
to
+188
| const { PALETTES } = require('../utils/palettes') | ||
| const { pickEvenly } = require('../utils/colorUtils') | ||
|
|
There was a problem hiding this comment.
Use ES6 import syntax instead of require() for consistency with the rest of the TypeScript codebase.
Suggested change
| const { PALETTES } = require('../utils/palettes') | |
| const { pickEvenly } = require('../utils/colorUtils') |
Comment on lines
+186
to
+188
| const { PALETTES } = require('../utils/palettes') | ||
| const { pickEvenly } = require('../utils/colorUtils') | ||
|
|
There was a problem hiding this comment.
Use ES6 import syntax instead of require() for consistency with the rest of the TypeScript codebase.
Suggested change
| const { PALETTES } = require('../utils/palettes') | |
| const { pickEvenly } = require('../utils/colorUtils') |
| const x2 = radius * Math.cos(endAngle) | ||
| const y2 = radius * Math.sin(endAngle) | ||
|
|
||
| const largeArcFlag = sliceAngle > 180 ? 1 : 0 |
There was a problem hiding this comment.
[nitpick] Consider extracting magic number 180 to a named constant (e.g., LARGE_ARC_THRESHOLD) to improve code readability and maintainability.
Suggested change
| const largeArcFlag = sliceAngle > 180 ? 1 : 0 | |
| const largeArcFlag = sliceAngle > LARGE_ARC_THRESHOLD ? 1 : 0 |
| const x4 = innerRadius * Math.cos(startAngle) | ||
| const y4 = innerRadius * Math.sin(startAngle) | ||
|
|
||
| const largeArcFlag = sliceAngle > 180 ? 1 : 0 |
There was a problem hiding this comment.
[nitpick] Consider extracting magic number 180 to a named constant (e.g., LARGE_ARC_THRESHOLD) to improve code readability and maintainability. This duplicates the same logic from PieChartRender.tsx.
Suggested change
| const largeArcFlag = sliceAngle > 180 ? 1 : 0 | |
| const largeArcFlag = sliceAngle > LARGE_ARC_THRESHOLD ? 1 : 0 |
Comment on lines
+140
to
+142
| maxWidth: 500, | ||
| width: 500, | ||
| height: 800, |
There was a problem hiding this comment.
[nitpick] Consider extracting modal dimensions (500, 800) to named constants to improve maintainability and allow for easier theme customization.
Suggested change
| maxWidth: 500, | |
| width: 500, | |
| height: 800, | |
| maxWidth: PALETTE_MODAL_WIDTH, | |
| width: PALETTE_MODAL_WIDTH, | |
| height: PALETTE_MODAL_HEIGHT, |
| const width = computeCustomGraphicSizeProperties(id, widthVp, mappers, row) | ||
|
|
||
| const height = computeCustomGraphicSizeProperties(id, heightVp, mappers, row) | ||
| const padding = 4 // padding between pie chart and node border, this is an attempt to render things similarly to Cytoscape Desktop |
There was a problem hiding this comment.
Consider extracting the magic number 4 to a named constant (e.g., PIE_CHART_PADDING) to improve maintainability.
Suggested change
| const padding = 4 // padding between pie chart and node border, this is an attempt to render things similarly to Cytoscape Desktop | |
| const padding = PIE_CHART_PADDING |
| const width = computeCustomGraphicSizeProperties(id, widthVp, mappers, row) | ||
|
|
||
| const height = computeCustomGraphicSizeProperties(id, heightVp, mappers, row) | ||
| const padding = 4 // padding between pie chart and node border, this is an attempt to render things similarly to Cytoscape Desktop |
There was a problem hiding this comment.
This duplicates the same padding logic from computePieChartProperties. Consider extracting to a shared constant or utility function.
Suggested change
| const padding = 4 // padding between pie chart and node border, this is an attempt to render things similarly to Cytoscape Desktop | |
| const padding = PIE_CHART_NODE_BORDER_PADDING // padding between pie chart and node border, this is an attempt to render things similarly to Cytoscape Desktop |
|
|
||
| <FormControl | ||
| size="small" | ||
| sx={{ '& .MuiInputBase-root': { height: 32, width: 340 } }} |
There was a problem hiding this comment.
[nitpick] Consider extracting magic numbers (32, 340) to named constants or theme variables to improve maintainability and consistency.
Suggested change
| sx={{ '& .MuiInputBase-root': { height: 32, width: 340 } }} | |
| sx={{ '& .MuiInputBase-root': { height: INPUT_HEIGHT, width: INPUT_WIDTH } }} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several improvements and new features related to custom graphics rendering in the Vizmapper, especially for pie and ring charts. Key changes include refactoring and extending utility functions, updating how custom graphics properties are handled, and adding new color palettes for custom graphics. Additionally, new components for rendering pie and ring chart previews are implemented. Below are the most important changes grouped by theme:
Custom Graphics Rendering and Preview Components
PieChartRenderandRingChartRenderfor rendering preview images of pie and ring charts based on custom graphics properties. These components display the chart with correct slice colors and support empty states and labels. (src/components/Vizmapper/VisualPropertyRender/CustomGraphics/PieChartRender.tsx, [1];src/components/Vizmapper/VisualPropertyRender/CustomGraphics/RingChartRender.tsx, [2]CustomGraphic.tsxfile and replaced its logic with the new, more modularCustomGraphicscomponents. (src/components/Vizmapper/VisualPropertyRender/CustomGraphic.tsx, src/components/Vizmapper/VisualPropertyRender/CustomGraphic.tsxL1-L66)Utility and Property Handling Improvements
cyjs-util.tsto use new utility functions and constants for property names and valid index ranges, improving maintainability and correctness. (src/components/NetworkPanel/CyjsRenderer/cyjs-util.ts, [1] [2] [3] [4]updateCyElementsto ensure custom graphics properties are properly removed from Cytoscape.js objects when not present in the view model, preventing stale data. (src/components/NetworkPanel/CyjsRenderer/cyjs-util.ts, src/components/NetworkPanel/CyjsRenderer/cyjs-util.tsR449-R467)Palette and Color Support
src/models/VisualStyleModel/impl/CustomColor.ts, src/models/VisualStyleModel/impl/CustomColor.tsR450-R787)Form and Value Rendering Updates
VisualPropertyValueForm.tsxto use the newCustomGraphicstypes and components. Added handling for rendering empty views when no custom graphic is selected. (src/components/Vizmapper/Forms/VisualPropertyValueForm.tsx, [1] [2]These changes collectively improve the flexibility, visual quality, and maintainability of custom graphics rendering in the Vizmapper.