Rebuild the layout of VS Code extension

[hyh-cs]

Due to the priority of experimental features and web refactor, development on VS Code extension has been postponed for weeks. Since the refactor is making progress, the point of development can move to VS Code soon, built on the refactored framework. The experimental features can be migrated as soon as development on VS Code is restarted.

The discussion has determine a brand-new design of the page layout, just as shown below:

A complete implementation of such layout involves several aspects to do:

• A new tree view, showing at least three types of resources: the training process of the target model, the visualization model and any categorized input data
  • demonstrative UI
  • resource detection algorithm
  • live modification
• A canvas editor, showing well-rendered visualization result, i.e. the colored points at their projected position
  • implementation on web page (cff2a6f)
  • connect the relevant points with lines, in at least one scenario, e.g. connect the nearest Umap neighbors
  • avoid collision while displaying labels
  • migrate to extension
• A vertical webview, containing query/filter options (while in VS Code such a view is not automatically attached to right)
  • implementation on web page
  • migrate to extension
  • make this view automatically attached to the right
  • design a simple query syntax / search in the training process (based on E-R model)
• A horizontal webview, containing progress bar (typically for switching between epochs) and two sub-views: detailed information of single sample and comparing samples
  • implementation on web page (37eb797)
  • in the detailed information of single sample, allow displaying the sample in a overall view (37eb797)
  • linked highlighting: while focused data sample(s) is changed in the canvas, the detailed information of single sample should switch to that sample(s) (or should highlight that sample in a overall view, like a snippet), and the comparing samples (typically two snippets with stylized tokens) should highlight that sample (the focused tokens should be highlighted in a way) (37eb797)
  • show attention with font size and alignment with font color
  • one-click auto-alignment
  • migrate to extension as a panel
• A loss attribution view
  • demonstrative UI
  • calculation algorithm
  • backend implementation and connection

The linked highlighting behaves like: