Side-by-side code diff view UX

[ceyerkes]

Hi!

Wondering if we have a pattern for showing side-by-side code diff views accessible via a table?

Hightouch ex:

Audit table where it would be accessed from (maybe a truncated version could live in the columns...?)

Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Codeblock Diffing Capabilities (updated: 10/25/2022, similarity score: 84%)
• Editing input fields or content on page (updated: 11/15/2023, similarity score: 83%)
• Dashboard and filter patterns (Office hours: 10/1/2020) - Answer (updated: 03/22/2024, similarity score: 83%)

[dosubot[bot]]

The Paste design system includes a CodeEditorDiff component for displaying side-by-side code diffs. This component can be used to show differences between two sets of text or code, using the original and modified props to specify the content to compare. Here's a basic example of how it can be implemented:

<CodeEditorDiff
  theme="vs-dark"
  height="90vh"
  language="typescript"
  original={originalCode}
  modified={modifiedCode}
/>

For integrating this within a table, you can use the Truncate component to handle long text in table columns, ensuring that the content is displayed neatly and accessibly. This approach allows you to show a truncated version of the code diff in the table columns, with the full view accessible when needed. Here's an example of how truncation can be applied:

<DataGridCell>
  <Text as="div" fontFamily="fontFamilyCode">
    <Truncate title="Full code diff here">Truncated code diff</Truncate>
  </Text>
</DataGridCell>

This setup ensures that the table remains clean and readable, while still providing access to detailed code diffs when necessary ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[jhanvi1399]

Hi Colleen,

Thank you for reaching out! Could you please provide more details about how the interaction for displaying the side-by-side diff in the table is intended to work?

Looking forward to your response!

[ceyerkes]

The idea is that you would select a row in the table, and view the original state versus the new state. Happy to sign up for office hours and discuss more, but I think the original discussion started by Brandon a couple years ago sums it up. Segment is still using the Evergreen component for showing diffs in lieu of a Paste one.

[jhanvi1399]

Hi Colleen,
Happy to take this discussion to office hours! Feel free to sign up for an Office Hours slot. You can also continue the discussion in this thread if you want to keep it async but OH would help us understand the use-case better!

Best,
Jhanvi

[ceyerkes]

Will do!

[roxanagomez]

Thank you for coming to Office Hours @ceyerkes, here is a little summary of what we discussed:

• For side-by-side code differences, we recommend using Paste's Code Diff library and experimenting with different surfaces, such as the Side Modal, for placement.

OH Recording for reference.