react

Visual Components for Industrial Automation

code review component
Website:
https://www.copia.io
Tags:
react, vue, nodejs, components

Copia Automation delivers modern developer tools for industrial automation. Built for automation and control engineers, Copia’s flagship offering provides Git-based source control for PLC programming. Copia’s robust version control, change visibility, and collaboration streamlines how industrial machinery is commissioned and operated - resulting in faster delivery and maximized uptime.

PLC editors support different syntaxes including visual programming languages such as ladder logic. These are all versioned and rendered by Copia’s Git tool in the vein of Github.

version control with copia

To leverage the collaborative process of Git, projects need to be reviewable. To do this, we worked on adapting the review and commenting process of pull requests to PLC projects.

PLC projects can contain a myriad of data structures. There are also a variety of vendors, which each use different techniques. To accommodate this the commenting system had to be flexible and easy to integrate.

We developed a set of reusable React components that wrap around existing components. After wrapping, UI for commenting and reviewing appear as an overlay on top of PLC items. Not only does this work for regular text-based code, it also works for nested SVG elements and tables.

git tags page

Special attention was given to render PLC elements in the review timeline. A summary of the project appears, showing only commented subsections. Users can discuss needed changes in threads.