Add Data tree view section panel to DVC Explorer

[RandomFractals]

Add a custom DVC tree view interface that would mimic regular file explorer but show only dvc tracked data and data pipelines configuration files. See dvc list for more info.

Additionally, display stages, dependencies, params and outputs nodes for dvc.yaml data pipeline files to provide tree view outline for those configs.

DVC Workspace Data tree Example

.
├── data
│   └── data.xml
│   └── data.xml.dvc
├── dvc.lock
├── dvc.yaml
├── params.yaml
├── prc.json
├── scores.json

User Experience Notes

Clicking on the dvc-tracked or config files in this tree view will open the corresponding content editor in vscode.

Each folder and data file or dvc config will have dvc command menu items attached for data versioning, dvc checkout, commit, etc. See #2 and #41 for the data file actions to expose via this tree view.

Note: this DVC Data tree view and Remotes List view outlined in #42 will be separate expand/collapse sections in the new custom DVC Explorer. We'll probably add more sections to that sidebar view for experiments, data file revisions list display, etc. later.

[shcheklein]

See dvc list for more info.

dvc list by default shows all the files (DVC tracked and Git tracked). Should we do the same?

DVC Workspace Data tree Example

example looks strange a bit since it doesn't show data.xml itself, but only DVC metafiles (which are not that useful since we have access to them in the regular project tree?)

this DVC Data tree view ... will be separate expand/collapse sections

is there a better way to integrate this?

[RandomFractals]

I copied that example from dvc docs. Yes, that data tree view will also have actual tracked data files listed similar to what dvc list command does.

Organizing views in the sidebar using separate expand/collapse sections is fairly standard for different files and outlines display. Since we have a dedicated DVC sidebar we should probably stick with that vscode UX and best practices and just create different views for DVC files, remotes, data pipeline outline display, etc.

[RandomFractals]

Looking at the getting started example in vscode, I think we should have custom dvc.yaml outline or subtree in the Data section. Even with installed YAML extension that data pipeline outline for stages doesn't look right to me since stages are incorrectly ordered:

Then we can attach open file actions for the data/script files in a custom data pipeline tree.

@shcheklein your thoughts on this?

I've been looking through what gets pulled and added by dvc and if we need to go beyond attaching custom actions to the file explorer I started listing in #41

I think custom Data Pipeline Outilne could be a part of that DVC sidebar.

[shcheklein]

@RandomFractals I think yes, but it sounds like it's about #47, not #2 . I would not focus on anything related to dvc.yaml-specific features/language, etc. May be only low hanging fruits like #46 (since we already have it). We'll come to it a bit later - it's a big story - to visualize DAG, show outline (if needed besides visualization), run certain stages, etc, etc.

[RandomFractals]

yeah, #47 is for the node graph webview. I just noticed that default yaml outline is not good for us. Will leave it for now.

[RandomFractals]

snapshot of built-in vscode file explorer from dvc get started project after running dvc pull and experiment. Lots of files get added to parse there :)

tmp and data folders from that demo project:

@shcheklein so, you think our custom dvc tree view should display grayed out file tree structure without running dvc pull, i.e. get that info from dvc.yaml and .dvc and provide updates to pull that data via a tree item menu? Just trying to wrap my head around what we want to display for initial dvc tree state.

for a quick reference, here are the docs on custom vscode tree view: https://code.visualstudio.com/api/extension-guides/tree-view They cover what's doable with vscode tree view api and data provider.

we could also see if implementing custom dvc file system provider makes sense. that's what gistpad does for gists. see this sample impl. for example: https://github.com/microsoft/vscode-extension-samples/blob/master/tree-view-sample/src/fileExplorer.ts

[mattseddon]

Closing as we are starting again with #137