Closed
Description
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
- User right-clicks on a query in the query view
- User selects the Compare with... command
- 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...)
- User selects the desired query
- 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
aeisenberg commentedon Jun 5, 2020
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:
aeisenberg commentedon Jun 5, 2020
Here's a screencast on how this works.
Quality isn't great, but hopefully gives the idea of what I have now.
aeisenberg commentedon Jun 5, 2020
@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 commentedon Jun 6, 2020
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.