Add option to hide in the viewer parts that have not changed

[ido-ran]

I'm trying to use JSONDiffKit to visualize diff between two, relatively big JSON payloads. Usually the diff is only about 5 properties out of the whole structure.

The current problem I face is out of 480 lines the viewer show only 7 actually have change but I still see the whole structure.

Of course the solution is not as simple as just hiding any line that haven't been changed because you can have an inner object have a single property change but you still want to see the parent properties to understand the context of the change.

Do you think it is possible to add the ability to somehow decide which lines to hide to make the diff more concise and easy to understand?

[RexSkz]

I think it's ok and it'll be useful in my own business project.

I'm going to add an optional prop hideUnchangedLines for the viewer component, which value will be:

/**
 * all fields are optional,
 * default is `false` which means it won't hide unchanged lines.
 */
type HideUnchangedLines = false | {
  /**
   * if there are continuous unchanged lines exceeding the limit, they should be hidden.
   * default is `6`
   */
  threshold?: number;
  /**
   * if there are `x` continuous unchanged lines to be hidden, we can keep displaying some lines.
   * default is `3`
   */
  margin?: number;
  /**
   * the custom renderer of the "expand" line
   * default renderer will produce the following buttons in this line:
   * [⬆️ Show 20 lines] [↕️ Show all unchanged lines] [⬇️ Show 20 lines]
   */
  expandLineRenderer?: ({
    /**
     * if this is `true`, you can show a "⬆️ Show xx lines" button
     */
    hasLinesBefore: boolean;
    /**
     * if this is `true`, you can show a "⬇️ Show xx lines" button
     */
    hasLinesAfter: boolean;
    /**
     * call this function to expand `lines` lines before,
     * if there are not enough lines before, it will expand all lines before.
     */
    onExpandBefore: (lines: number) => void;
    /**
     * call this function to expand `lines` lines after,
     * if there are not enough lines after, it will expand all lines after.
     */
    onExpandAfter: (lines: number) => void;
    /**
     * call this function to expand all lines in this continuous part.
     */
    onExpandAll: () => void;
  }) => JSX.Element;
}

For example, if I call the viewer component like this:

<Viewer
  {...otherViewerProps}
  hideUnchangedLines={{ threshold: 6, margin: 3 }}
/>

And the data (the unchanged parts) is like this:

1
2
3
4
5
6
7
8
9
10

Which will produce the output like this:

1
2
3
[⬆️ Show 20 lines] [↕️ Show all unchanged lines] [⬇️ Show 20 lines]
8
9
10

[RexSkz]

Here are 2 screenshots for preview, the feature itself is still under development:

[RexSkz]

Hi, you can pass the hideUnchangedLines={true} prop to the <Viewer> component to support hiding the unchanged lines. I think the default config is enough in most situations, or you can render your own "expand" line using the given API (please refer to type definitions).