# Visual Components for Industrial Automation

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 version control, change visibility, and collaboration tools change how industrial machinery is commissioned and operated, resulting in faster delivery and maximized uptime.

- **Client:** copia
- **Date:** 2021-07-04
- **Tags:** react, vue, nodejs, components
- **Industries:** Industrial Automation
- **Customer site:** https://www.copia.io

---

import Image from '../../src/components/Image.astro'

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 version control, change
visibility, and collaboration tools change 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.

<Image
  src="/images/case-studies/copia/ProvenVersionControl.svg"
  alt="version control with copia"
  width={1020}
  height={1108}
/>

To use 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.

<Image
  src="/images/case-studies/copia/tags.png"
  alt="git tags page"
  width={2572}
  height={1516}
/>

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.