Fixed uploading a skeleton template in configurator #8822
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes in this pull request address an issue with uploading skeleton templates in the configurator, specifically resolving a "Wrong skeleton structure" error when uploading SVG files. Modifications were made to the Changes
Assessment against linked issues
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
CodeRabbit Configuration File (
|
![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
🧹 Outside diff range and nitpick comments (2)
cvat-ui/src/components/labels-editor/skeleton-configurator.tsx (2)
867-869: Enhance circle element validationThe current validation only checks for the presence of circle elements. Consider adding more specific validation for required attributes:
-if (!Array.from(svg.children).filter((child) => child.tagName === 'circle').length) { +const circles = Array.from(svg.children).filter((child) => + child.tagName === 'circle' && + child.hasAttribute('data-element-id') && + child.hasAttribute('cx') && + child.hasAttribute('cy') +); +if (!circles.length) { throw new Error('SVG must contain at least one valid circle element with required attributes'); }
861-866: Optimize DOM traversal performanceMultiple Array.from() calls on svg.children could be optimized by caching the result:
-for (const child of svg.children) { +const children = Array.from(svg.children); +for (const child of children) { if (child.nodeType !== 1 || !['line', 'circle'].includes(child.tagName)) { child.remove(); } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
changelog.d/20241212_202223_sekachev.bs_fixed_skeleton_upload.md(1 hunks)cvat-ui/src/components/labels-editor/skeleton-configurator.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- changelog.d/20241212_202223_sekachev.bs_fixed_skeleton_upload.md
🔇 Additional comments (1)
cvat-ui/src/components/labels-editor/skeleton-configurator.tsx (1)
645-646: LGTM: Improved error message readability
The addition of a space before "differs" improves the readability of the error message.
| } catch (_: unknown) { | ||
| notification.error({ | ||
| message: 'Wrong skeleton structure', | ||
| }); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error messaging for better user experience
The generic "Wrong skeleton structure" error message doesn't help users understand what's wrong. Consider providing more specific error messages:
-notification.error({
- message: 'Wrong skeleton structure',
-});
+const getErrorMessage = (error: unknown) => {
+ if (error instanceof Error) return error.message;
+ return 'Invalid skeleton structure. Please ensure the SVG contains valid circle elements and label specifications.';
+};
+
+notification.error({
+ message: getErrorMessage(error),
+});Committable suggestion skipped: line range outside the PR's diff.
| try { | ||
| const parent = window.document.createElement('div'); | ||
| // eslint-disable-next-line no-unsanitized/property | ||
| tmpSvg.innerHTML = tmpSvg.children[0].innerHTML; | ||
| } | ||
| parent.innerHTML = result; | ||
|
|
||
| let isSVG = true; | ||
| for (let c = tmpSvg.childNodes, i = c.length; i--;) { | ||
| isSVG = isSVG && c[i].nodeType === 1; | ||
| } | ||
| if (parent.children[0]?.tagName !== 'svg' || parent.children.length > 1) { | ||
| throw Error(); | ||
| } |
There was a problem hiding this comment.
Security: Consider using DOMParser instead of innerHTML
Using innerHTML with SVG files could be risky as SVG can contain malicious scripts. Consider using DOMParser for safer XML parsing:
-const parent = window.document.createElement('div');
-parent.innerHTML = result;
+const parser = new DOMParser();
+const doc = parser.parseFromString(result, 'image/svg+xml');
+if (doc.documentElement.tagName === 'parsererror') {
+ throw new Error('Invalid SVG format');
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| try { | |
| const parent = window.document.createElement('div'); | |
| // eslint-disable-next-line no-unsanitized/property | |
| tmpSvg.innerHTML = tmpSvg.children[0].innerHTML; | |
| } | |
| parent.innerHTML = result; | |
| let isSVG = true; | |
| for (let c = tmpSvg.childNodes, i = c.length; i--;) { | |
| isSVG = isSVG && c[i].nodeType === 1; | |
| } | |
| if (parent.children[0]?.tagName !== 'svg' || parent.children.length > 1) { | |
| throw Error(); | |
| } | |
| try { | |
| const parser = new DOMParser(); | |
| const doc = parser.parseFromString(result, 'image/svg+xml'); | |
| if (doc.documentElement.tagName === 'parsererror') { | |
| throw new Error('Invalid SVG format'); | |
| } | |
| if (parent.children[0]?.tagName !== 'svg' || parent.children.length > 1) { | |
| throw Error(); | |
| } |
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #8822 +/- ##
===========================================
- Coverage 73.93% 73.89% -0.05%
===========================================
Files 409 409
Lines 43930 43930
Branches 3986 3986
===========================================
- Hits 32478 32460 -18
- Misses 11452 11470 +18
|
Motivation and context
Resolved #8592
How has this been tested?
Checklist
developbranch(cvat-canvas,
cvat-core,
cvat-data and
cvat-ui)
License
Feel free to contact the maintainers if that's a concern.
Summary by CodeRabbit
Bug Fixes
Improvements