Skip to content

Add ability to compare and diff pairs of result sets #394

Closed
@aeisenberg

Description

@aeisenberg
Contributor

Feature

A user should be able to determine which entries have been added, deleted, or changed between a table of one query and the same table in another query.

Implementation

  1. User right-clicks on a query in the query view
  2. User selects the Compare with... command
  3. A quick options panel appears with the other available queries to compare, sorted by database and with queries from the current database on top. (Alternatively, we can restict to show only queries in the current database...)
  4. User selects the desired query
  5. A new query compare web view opens for these queries.
    • There is a dropdown where users can select a table to compare (only tables with shared names are available)
    • There is a short description of what is being compared, including stats (# num added, num removed, etc)
    • A table with two columns in the main section.
    • Each table row corresponds to one of: an addition, removal, or deletion of a query row between the two queries. (Highlighted appropriately, see QL4E for ideas)
    • Use a similar comparison algorithm to what QL4E has.
    • Hyperlinks should be appropriately available.

Open questions

  • Should we limit the max number of rows in the view?
  • Should we only allow comparisons between queries in the same database?
  • Should we allow the ignoring of one or more columns (eg- the id column may be different between queries, but still correspond to the same element)?
  • Should there be multiple comparisons view openable at once?
  • Can we compare path queries or other similar kinds of queries with nested tables?

Messages sent from extension to webview

This message is sent to the webview in order to compare two queries

{
  t: 'compare'
  stats: {
    added: <num rows added>,
    removed: <num rows removed>,
    changed: <num rows changed>,
    fromQuery: { ...details about the query we are comparing from... }, id, description, row count, time to run, date ran, etc...
    toQuery: { ...details about the query we are comparing to... },
  },
  rows: [...] // array of rows in order: added, removed, or changed. I don't yet know what this looks like
  tablesToCompare: <list of tables available for comparison>
  currentTable: <table currently being compared>
}

Messages sent from webview to extension

This message is sent to the extension when a user changes the table to view

{
  t: 'change-compare',
  newTable: <new table to compare>,
  fromId: <id of the query to compare from>
  toId: <id of the query to compare to>
}

Activity

added
enhancementNew feature or request
QL4E parityThis issue corresponds to a feature from QL4E not yet implemented for VSCode
on May 22, 2020
aeisenberg

aeisenberg commented on Jun 5, 2020

@aeisenberg
ContributorAuthor

I am most of the way through implementing the compare view and I wanted to document the changes to the above.

There are no existing JavaScript libraries that perform the compare in exactly the way we need, so I implemented my own simple comparison algorithm. All we are interested in is additions and removals of result rows, which simplifies the algorithm significantly. The algorithm compares the string representations of the rows of one query with those of the other. The result is a set of rows that have been added and another set that have been removed.

Other simplifying details:

  • only allow one compare view to be open at a time
  • only compare raw results tables
aeisenberg

aeisenberg commented on Jun 5, 2020

@aeisenberg
ContributorAuthor

Here's a screencast on how this works.

trimmed-small

Quality isn't great, but hopefully gives the idea of what I have now.

aeisenberg

aeisenberg commented on Jun 5, 2020

@aeisenberg
ContributorAuthor

@donokuda Would you be able to have a look at this? I'm looking for some suggestions on better UX for the display and navigation of the compare view.

Feel free to ping me on slack if you have any questions.

dbartol

dbartol commented on Jun 6, 2020

@dbartol
Contributor

To compare text files, you right click on one, select “Select for Compare”, then right click on another and select “Compare with Selected”. We should probably use the same approach to invoke our diffs.

self-assigned this
on Nov 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

QL4E parityThis issue corresponds to a feature from QL4E not yet implemented for VSCodeenhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @aeisenberg@dbartol

    Issue actions

      Add ability to compare and diff pairs of result sets · Issue #394 · github/vscode-codeql