jupytercalpoly / jupyterlab-tabular-data-editor Goto Github PK

Describe the new feature being added
Clicking the toolbar buttons triggers the command.

Actual behavior
After making some requests to replace 2's with 1's in a sample editor I closed the S & R interface and then got errors logged to the console when I made edits to cells. The error mesage was Uncaught (in promise) TypeError: query is undefined

Expected behavior
No errors.

Screenshots

Browser - firefox

Actual behavior
The move columns shadow gets cut off before the end of the visible part of the grid (see screenshot).

Expected behavior
The shadow should go all the way down.

Screenshots

Describe the new feature being added

• Users can use Accel F to search for some text in the DataGrid
• Users can also access the Replace and Replace All feature

How will this feature improve this extension

• Bigger datasets are easier to search
• Similiar things that need to be changed can be changed all at one time

Describe alternatives you've considered
N/A

Additional context

• Using an adapted version of searchprovider.ts from the csvviewer-extension package

The default datagrid has it's editingEnabled property set to private (with a value of false). We need to create a package in which this is protected so our extension of the datagrid can set this to true.

Connect the extension to create an EditableDataGrid instead of regular DataGrid

Actual behavior
replaceAll function in the search and replace features takes only one undo/redo

Expected behavior
replaceAll function in the search and replace features takes multiple undo/redo

To Reproduce
Steps to reproduce the behavior:

1. Use Accel F to access search and replace menu
2. Search for something that has multiple matches (multiple cells)
3. Open the replace drop down menu
4. Add a string to replace with and click replace all
5. Try to undo/redo using shortcuts Accel Z/Accel Shift Z respectively

Additional context
The problem lies in that every setData call is one Transaction. Need to refactor Transaction outside of the setData method.

Enabled cell editing inside of the EditableDataGrid class

Describe the new feature being added

• Upon hover over the header, the cursor will be changed to grab.
• On mouseDown, a slightly offset shadow of the row/column will appear above.
• The row/column's shadow can be moved with a line indicating where it will be reinserted.
• On mouseUp, the row will move into place

How will this feature improve this extension
Users can move portions their data around easily instead of manually re-editing cells

Describe alternatives you've considered
N/A

Additional context
N/A

Describe the new feature being added
The first row of displayed will be alphabets (similar to Excel/Google Sheets)

How will this feature improve this extension
Easy way to references cells and columns

Describe alternatives you've considered
Another option would be to use numbers, but that may be confusing as the rows are number

Additional context
N/A

Actual behavior
When doing a replacement request 1 -> 2 on a dataset of 12's, I need to click twice to navigate from one 12 to the next.

Expected behavior
That on each click the replacement will occur and the next cell will be selected.

To standardize the format and information for every issue we create, I want to create some issue templates. This will keep everything uniform and should help in the long run!

Describe the new feature being added

• Undo/redo selects the cell that was undone/redone
• The current match is selected

How will this feature improve this extension
Draws focus to the cell that was just manipulated/searched

Describe alternatives you've considered
N/A

Additional context
Utilizing the SelectionModel's select method

Describe the new feature being added
Rows and columns can be removed via the context menu

How will this feature improve this extension
Users will be able to remove unwanted rows or columns

Describe alternatives you've considered
N/A

Additional context
N/A

Describe the new feature being added
Undo/redo for cut

How will this feature improve this extension
Users can go back and forth between the cut action

Describe alternatives you've considered
N/A

Additional context
N/A

The current colors and styles for search match cells and current match cells need to be reevaluated. Both light and dark mode.

Describe the new feature being added
The updated data from the raw csv file will now be managed with the Datastore

How will this feature improve this extension
With the datastore, we get easy access to undo/redo functionality

Describe alternatives you've considered
N/A

Additional context
N/A

Create a separate class to be used in our extension

The CSVViewer constructor handles the initial rendering of the datagrid. When extending CSVViewer, we have to call super(props). Unfortunately, it seems that any attempt to redefine this_grid to our version of the grid AFTER running super(props) results in nothing being rendered. I have also tried including all of the code in the CSVViewer constructor within the EditableCSVViewer constructor. This also doesn't work.

Description

This is an example of UI/UX for searching and replacing a data point. Command+F is used to initiate the search feature.

Here is an image of the toolbar with a search icon.

Related Issues

None.

Questions

• Should the search feature have an icon on the toolbar?

Interactive Prototype

Prototype Link

Actual behavior

When spinning up JupyterLab and trying to edit cells, we get an error that model.head is undefined. The source of the problem seems to be with webpack pulling a previous version of our csvviewer repo.

Expected behavior
Expect head to be defined.

To Reproduce
Run jupyter lab --watch
Attempt to edit a cell in a csv file using the EditableVS

Describe the new feature being added
The ability to save a CSV file after being edited in the Tabular Data Editor

How will this feature improve this extension
Changes to files will be able to be saved and preserved.

Additional context
When a cell is changed, the DataModel is updated, which re-renders the DataGrid, but doesn't update the CSV file

Notes: 7/2

• Probably need to use signals
• How to change the raw csv file?

Describe the new feature being added
A toolbar that enables you to quickly save, undo, cut, copy, paste, and filter data.

How will this feature improve this extension
This feature provides an interface that will help you accomplish data editing tasks quickly and intuitively.

Describe alternatives you've considered
For new users, not having a toolbar assumes the person has prior knowledge of context menus and keyboard shortcuts.

Additional context
More tools and a function bar will be implemented in the future.

Describe the new feature being added

• Basic cell functions can be undone (accel-Z) and redone (accel-shift-Z)

How will this feature improve this extension

• Users should always be able to undo and redo their actions (design heuristic)

Describe alternatives you've considered

• N/A

Additional context

• N/A

Describe the new feature being added
Undo/redo for moving rows and columns using shortcuts

How will this feature improve this extension
Users will be able to undo/redo these changing actions

Describe alternatives you've considered
N/A

Additional context
N/A

Actual behavior
When operating on individual cells or rows, the operation is fairly fast. However, operating on columns is very slow. For example, in a 5,000 row data set, it took 30 seconds to complete the operation.

Expected behavior
Performance should at least be comparable to Excel.

Describe the new feature being added
Users should be able to cut, copy and paste cells using keyboard shortcuts or right click menus much like they can in other spreadsheet programs.

How will this feature improve this extension
Provides a very flexible way to move data around.

Some simple styles like opacity, position change could make the toolbar icons feel more like buttons. This would also provide a visual indicator to the user.

Currently, no tests exist with moving rows/columns. Adding these tests will ensure data is being manipulated correctly in our current and future uses.

Actual behavior
The Top Right Cell of the Tabular Data Editor gets highlighted after pasting (with the previous value highlighted).

Expected behavior
The new value (pasted value) should be in place and there shouldn't be any cells highlighted after pasting.

Additional context
Add any other context about the problem here.

We would like to be able to modify some of the attributes in DSVModel class https://github.com/lmcnichols/jupyterlab/blob/master/packages/csvviewer/src/model.ts and the DataGrid class https://github.com/jupyterlab/lumino/blob/master/packages/datagrid/src/datagrid.ts. However, many of the attributes & methods we would like to change are set to private.

As a fix, we would like to have our extension depend on some node modules which come from Jupyterlab and Lumino forks on our local repository. In these forks, we would modify the source code so that the private attributes we need are set to protected.

We haven't figured out a way to set a dependency to a subdirectory of a git repository. This is a known issue (see yarnpkg/yarn#4725 and npm/npm#2974). Attempts to use existing tools (e.g. https://gitpkg.now.sh/) have failed, although we are still unclear on why they are failing.

Right now, when we run jllpm install in our extension, it gets its @jupyterlab/csvviewer from our GitHub page. The only problem is that it downloads some node_modules within the package dir. This causes conflicts, and so we currently need to manually remove these node_modules. There should be a relatively easy way to change our package.json file in our repo to fix this.

Description

This is an example of a way to add a row or column. With a single click, you can add a new row or column to the end of your data table. So if you were to acquire new information, you can quickly append that data to your table.

(slight mistake with the prototype: the add row button is supposed to extend when the new column is added)

Related Issues

None

Questions

What are the different use cases when using this feature?

Should the add row/ columns be less prominent (more transparent)?

Feedback on this concept would be greatly appreciated!

Interactive Prototype

Prototype Link

Enable the user to add rows and columns. Would ideally like the flexibility of inserting columns and rows right after the selected column/row via right clicking.

Describe the new feature being added

• When right-clicking on a cell, that cell should automatically focus

How will this feature improve this extension

• Visual indication of which cell was clicked

Describe alternatives you've considered

• N/A

Additional context

• GoogleSheets has an example of this

Actual behavior
For large datasets, only the first 500 rows render.

Expected behavior
We expect that the entire dataset can render.

Actual behavior
Toolbar icons have replaced the descriptions in the context menu.

Expected behavior
Expect the original context menu, which displays the description of the command (e.g. 'Paste') rather than the toolbar icon for it.

These errors came up when we tried to install the latest version of @lumino/datagrid which our extension depends on. It seemed that different versions of the same package were coming into contact, producing errors. Here is a prototypical example of the error message.

at the line
export class EditableCSVDocumentWidget extends DocumentWidget<EditableCSVViewer>

 Type 'import("C:/Users/logan/git/tde/jupyterlab-tabular-data-editor/node_modules/@lumino/datagrid/node_modules/@lumino/widgets/types/title").Title<import("C:/Users/logan/git/tde/jupyterlab-tabular-data-editor/node_modules/@lumino/datagrid/node_modules/@lumino/widgets/types/widget").Widget>'
is not assignable to type
 'import("C:/Users/logan/git/tde/jupyterlab-tabular-data-editor/node_modules/@jupyterlab/docregistry/node_modules/@lumino/widgets/types/title").Title<import("C:/Users/logan/git/tde/jupyterlab-tabular-data-editor/node_modules/@jupyterlab/docregistry/node_modules/@lumino/widgets/types/widget").Widget>'.

Actual behavior
When testing the deleteColumn function the operation malfunctioned after the first 14 entries were removed. Random characters began being removed instead of the entry we wanted removed.

Expected behavior
All entries in the column we were removing would be removed, without effecting any other entries.

To Reproduce
Steps to reproduce the behavior:
1 .You can use this csv file.
2. Open Jupyterlab with the extension activated in the directory with the csv file saved.
3. Open the csv file with CSV Tabular Data Editor.
4. Do not scroll to the bottom of the file at any point. Simply navigate to a column header, right click it, and choose delete column
5. Now scroll down so the rest of the rows come into view. You should see something like this.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser: firefox

Actual behavior
Removing the last column of the DataGrid flattens all of the data

Expected behavior
The data should remain intact and in the same layout

To Reproduce
Steps to reproduce the behavior:

1. Open the Tabular Data Editor extension from a CSV file
2. Right-click on the last column
3. Click Remove Columns

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
N/A

Actual behavior
When the last row of the editor gets deleted, the entire table gets pasted directly below the trimmed table.

Expected behavior
The final row is simply removed.

To Reproduce
Steps to reproduce the behavior:

1. Go to Jupyterlab
2. Open a test.csv with TabularDataEditor and attempt to remove the last row.

Screenshots
If applicable, add screenshots to help explain your problem.


Desktop (please complete the following information):

• iOS

Additional context
Add any other context about the problem here.

Actual behavior
The line is offset a bit.

Expected behavior
The dark line to mark where we are moving the row/column to should be exactly in place of where the vertical grid line is for that column.

Actual behavior
The cell editor stays the same size no matter the size of the cell

Expected behavior
The cell editor should be the same size as the cell even when it is resized

To Reproduce
Steps to reproduce the behavior:

1. Open a CSV file in the CSVTabularDataEditor
2. Resize a row or column
3. Double click on the cell to edit

Screenshots

Additional context

• Probably need to adjust updatePosition()
• Look into createWidget for an InputCellEditor
• Look into creating a PR for Lumino for this functionality once verified and validated

Actual behavior
When editing a cell right after opening the Tabular Data Editor, the DataGrid doesn't register the change.

Expected behavior
DataGrid should be responsive on first edit.

Fix styles to be similar to the light theme styles

Describe the new feature being added
The move line should default to the right side of the column. When moving right, it should maintain its rightward position on whatever column is being hovered over. When crossing a column divide going leftward, the line should snap to the left of the column being highlighted.

How will this feature improve this extension
It is a more intuitive approach to demarcating the selected column.

Describe alternatives you've considered
Line always snaps to the direction of the mouse movement.

Actual behavior
When experimenting with a data set with more than 26 columns, header values were being inserted into the first row of the body data on an add column operation.

Expected behavior
Expect the header to be added to the end of the first row.

To Reproduce
Steps to reproduce the behavior:

1. open TDE with a dataset with more than 26 columns
2. add a column
3. For easiest evaluation, use devTools to see what the rawData actually looks like at the end of the operation.

Description

Here is a gif of how you can set up filters and sort your data within JupyterLab.

Also, here are some iterations of the filter menu:

Related Issues

None.

Questions

• Other than filtering by values, what other key filters do people want when filtering their data (e.g., filter by conditions, filter by color)?

• Should "Sort" be included in the filter menu?

• What do you expect on a data table editing toolbar?

Interactive Prototype

Prototype Link