Reimplement GWT assay plate designer in React by labkey-jeckels · Pull Request #7623 · LabKey/platform

labkey-jeckels · 2026-04-27T02:21:12Z

Rationale

Our assay plate designer is our final GWT UI. This replaces it with a React-based version.

Changes

New React app that matches the GWT version 1:1
Improve generics in PlateManager and related callers

Tasks 📍

labkey-adam · 2026-04-27T17:02:42Z

👍

labkey-alan

I did not do the most thorough review on the React code, since I was only asked to take a cursory look at the code, and the GitHub outage is preventing me from viewing all of the files at this time. I do have two pieces of feedback though:

Many of the components have really large chunks of TSX code (e.g. GroupTypesPanel). Lots of nested loops and conditional statements. This is a readability mess, and it also makes it significantly harder to test, since we can't test in smaller units of functionality. My recommendation is to split these large chunks of TSX into smaller components.
There are zero unit tests. For a set of components this size, and this complex, we really should have as much unit test coverage as is reasonable.

Additionally I do have a concern about introducing this code more generally. While I understand the motivation to get rid of the last GWT component, and I would love to see us accomplish that goal, I am not sure that this is the best path forward. We already have a lot of plate related code in our apps, and while this code helps us get rid of GWT, it does not change the fact that we have two different implementations of a UI that is meant to accomplish the same thing. I think we would benefit most from having one UI for our plate code, not two different implementations that are both made with React.

I can take a more thorough look at the code later if wanted.

labkey-jeckels · 2026-04-28T02:12:24Z

---------------------------------------------|---------|----------|---------|---------|------------------------------------------------------------------------------------------------
File                                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                                                                              
---------------------------------------------|---------|----------|---------|---------|------------------------------------------------------------------------------------------------
All files                                    |   73.37 |    74.48 |   68.29 |   76.86 |                                                                                                
 src/client/PlateTemplateDesigner            |   47.63 |    39.39 |   29.57 |   53.49 |                                                                                                
  PlateTemplateDesigner.tsx                  |   43.22 |    33.33 |   28.57 |   48.86 | ...283,287-289,293-301,305-319,324,328-329,339-346,352-365,370-377,382,386-387,393-395,416-418 
  models.ts                                  |     100 |      100 |     100 |     100 |                                                                                                
 src/client/PlateTemplateDesigner/components |   98.35 |    96.65 |   97.84 |    99.2 |                                                                                                
  GroupTypesPanel.tsx                        |   96.62 |    95.18 |   94.28 |   97.29 | 280,329                                                                                        
  MultiCreateDialog.tsx                      |   98.36 |    94.11 |     100 |     100 | 24,35                                                                                          
  RightPanel.tsx                             |     100 |      100 |     100 |     100 |                                                                                                
  ShiftPanel.tsx                             |     100 |      100 |     100 |     100 |                                                                                                
  StatusBar.tsx                              |     100 |      100 |     100 |     100 |                                                                                                
  TemplateGrid.tsx                           |     100 |      100 |     100 |     100 |                                                                                                
  WarningPanel.tsx                           |     100 |      100 |     100 |     100 |                                                                                                
  WellGroupProperties.tsx                    |   95.83 |    92.85 |     100 |     100 | 46                                                                                             
 test/js                                     |     100 |      100 |     100 |     100 |                                                                                                
  fileMock.js                                |     100 |      100 |     100 |     100 |                                                                                                
---------------------------------------------|---------|----------|---------|---------|------------------------------------------------------------------------------------------------

labkey-nicka · 2026-04-28T17:59:09Z


    @RequiresAnyOf({InsertPermission.class, DesignAssayPermission.class})
-    public class DesignerAction extends SimpleViewAction<DesignerForm>
+    public class GetTemplateDefinitionAction extends ReadOnlyApiAction<DesignerForm>


Consider adding endpoint tests in PlateController.ispec.ts for both plate-getTemplateDefinition.api and plate-saveTemplate.api introduced in this PR.

Added with https://github.com/LabKey/limsModules/pull/2155

labkey-nicka · 2026-04-28T18:00:43Z

+        private static final int MAX_BODY_BYTES = 10 * 1024 * 1024; // 10 MB
+
+        @Override
+        protected BaseApiAction.FormAndErrors<SaveTemplateForm> populateJacksonForm() throws Exception


Missing @NotNull annotation

I found a better way to accomplish this. Separate Platform PR coming soon.

labkey-nicka · 2026-04-28T18:02:42Z

+    }
+
+    @RequiresAnyOf({InsertPermission.class, DesignAssayPermission.class})
+    public static class SaveTemplateAction extends MutatingApiAction<SaveTemplateForm>


Why is populateJacksonForm override necessary here? Just to limit to 10MB? Could you annotate with @Marshal(Marshaller.JSONObject) to achieve this instead?

Yes, just to provide a limit and protect against DOS. We should support this more centrally. Platform PR coming soon.

labkey-nicka · 2026-04-28T18:13:48Z

+    }
+
+    @RequiresAnyOf({InsertPermission.class, DesignAssayPermission.class})
+    public static class SaveTemplateAction extends MutatingApiAction<SaveTemplateForm>


It would be nice to distinguish these endpoints somehow from our preferred endpoints so future engineers/users don't get them mixed up. Consider naming these GetDesignerTemplateDefinitionAction and SaveDesignerTemplateAction.

Updated to getDesignerTemplate and saveDesignerTemplate. Also refactored to share more with createPlate

labkey-jeckels · 2026-04-29T00:39:53Z

I did not do the most thorough review on the React code, since I was only asked to take a cursory look at the code, and the GitHub outage is preventing me from viewing all of the files at this time. I do have two pieces of feedback though:

Many of the components have really large chunks of TSX code (e.g. GroupTypesPanel). Lots of nested loops and conditional statements. This is a readability mess, and it also makes it significantly harder to test, since we can't test in smaller units of functionality. My recommendation is to split these large chunks of TSX into smaller components.

There are zero unit tests. For a set of components this size, and this complex, we really should have as much unit test coverage as is reasonable.

Additionally I do have a concern about introducing this code more generally. While I understand the motivation to get rid of the last GWT component, and I would love to see us accomplish that goal, I am not sure that this is the best path forward. We already have a lot of plate related code in our apps, and while this code helps us get rid of GWT, it does not change the fact that we have two different implementations of a UI that is meant to accomplish the same thing. I think we would benefit most from having one UI for our plate code, not two different implementations that are both made with React.

I can take a more thorough look at the code later if wanted.

Refactored. See what you think now.
Significant unit testing added, along with endpoint testing (with help from Nick).

labkey-jeckels added 5 commits April 24, 2026 20:49

Switch from GWT to React

b0ca7b8

Auto code review and comments

ca99f5e

Test fixes

a4b284f

Other cleanup

0622405

Improve generics for plate code

19e61e8

labkey-jeckels self-assigned this Apr 27, 2026

This was referenced Apr 27, 2026

Update test code to match React-based plate designer LabKey/testAutomation#2967

Open

Improve generics for plate code LabKey/commonAssays#1007

Open

labkey-nicka requested review from labkey-klum and labkey-nicka April 27, 2026 17:30

labkey-jeckels requested a review from labkey-alan April 27, 2026 17:46

labkey-alan requested changes Apr 27, 2026

View reviewed changes

labkey-jeckels added 2 commits April 27, 2026 19:08

Merge branch 'refs/heads/develop' into fb_reactPlateDesigner

136e9f8

Unit tests and other improvements

a912417

labkey-jeckels mentioned this pull request Apr 28, 2026

Add exceptions for unit tests and JSX structure LabKey/server#1353

Open

Another checkpoint

6851d9c

labkey-nicka reviewed Apr 28, 2026

View reviewed changes

labkey-jeckels added 2 commits April 28, 2026 17:28

Merge branch 'develop' into fb_reactPlateDesigner

6eea87a

Code review improvements, generics updates

28daef7

Unit test fixup, bounds validation

82f1f83

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reimplement GWT assay plate designer in React#7623

Reimplement GWT assay plate designer in React#7623
labkey-jeckels wants to merge 11 commits intodevelopfrom
fb_reactPlateDesigner

labkey-jeckels commented Apr 27, 2026 •

edited

Loading

Uh oh!

labkey-adam commented Apr 27, 2026

Uh oh!

labkey-alan left a comment

Uh oh!

labkey-jeckels commented Apr 28, 2026

Uh oh!

labkey-nicka Apr 28, 2026

Uh oh!

labkey-jeckels Apr 29, 2026

Uh oh!

labkey-nicka Apr 28, 2026

Uh oh!

labkey-jeckels Apr 29, 2026

Uh oh!

labkey-nicka Apr 28, 2026

Uh oh!

labkey-jeckels Apr 29, 2026

Uh oh!

labkey-nicka Apr 28, 2026

Uh oh!

labkey-jeckels Apr 29, 2026

Uh oh!

labkey-jeckels commented Apr 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

labkey-jeckels commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rationale

Changes

Tasks 📍

Uh oh!

labkey-adam commented Apr 27, 2026

Uh oh!

labkey-alan left a comment

Choose a reason for hiding this comment

Uh oh!

labkey-jeckels commented Apr 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

labkey-jeckels commented Apr 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

labkey-jeckels commented Apr 27, 2026 •

edited

Loading