Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add empty and loading states to Plots webview with tests #1000

Closed
wants to merge 4 commits into from

Conversation

rogermparent
Copy link
Contributor

@rogermparent rogermparent commented Nov 4, 2021

Fixes #991

As an alternative to #994, this PR keeps plots data the same and adds different static content for two situations:

  1. When the webview is first initialized but no data has arrived (plotsData = undefined)

  2. When the webview is initialized but given empty data (plotsData = [])

plots-empty-state-demo.mp4

There are also tests for these states

As this comment on #994 describes, given there will be multiple types of plots this will likely not even be close to the final appearance for these states. Nonetheless, I think the addition of tests and various code improvements make this a step in the right direction that we can build off of.

@mattseddon
Copy link
Member

In case you didn't see it: #994 (comment)


const signalInitialized = () =>
vsCodeApi.postMessage({ type: MessageFromWebviewType.initialized })

const App = () => {
export const App = () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function App has 29 lines of code (exceeds 25 allowed). Consider refactoring.

@rogermparent rogermparent changed the title Add empty and loading content for plots webview Add first draft empty and loading content for plots webview Nov 4, 2021
@rogermparent rogermparent changed the title Add first draft empty and loading content for plots webview Add empty and loading states to Plots webview with tests Nov 4, 2021
Comment on lines +32 to +35
}
window.addEventListener('message', messageListener)
signalInitialized()
return () => window.removeEventListener('message', messageListener)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleaning up a memory leak that was exposed by tests re-creating the App in the same context.

function acquireVsCodeApi(): InternalVsCodeApi
}

export const vsCodeApi = acquireVsCodeApi()
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't find a way to mock this global directly, so wrapping it is.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Q] Did you see that we mock this for experiments? See webview/src/experiments/components/App.test.tsx

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also mock a wrapper there, webview/src/experiments/model/vsCodeApi.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not reuse the code?

@rogermparent
Copy link
Contributor Author

We will also have the situation where the project has no checkpoints. I think we will have

1. Static plots and no live plots because there is no data

2. Static plots and no live plots because project doesn't have checkpoints

3. No plots

If you think about the dashboard in those terms then 3 will have the true empty state. 1 and 2 probably should just not render the live plots section.

That's a good point, I hadn't considered the other types of plots in this Webview. With that in mind, I still think this is a good half-step to implement, then after the split sections are introduced we can change these states to instead be selectively rendered sections.

@rogermparent rogermparent marked this pull request as ready for review November 4, 2021 22:12
@rogermparent rogermparent self-assigned this Nov 4, 2021
@rogermparent rogermparent added the product PR that affects product label Nov 4, 2021
mattseddon
mattseddon previously approved these changes Nov 4, 2021
Copy link
Member

@mattseddon mattseddon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple of points on the content. Good iteration.

<>
<p>There are no experiments to make plots from.</p>
<p>
<a href="command:dvc.runExperiment">Run an Experiment</a> to add some!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[I] This is not necessarily true (no checkpoints).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also need to pass dvcRoot (multi-repo workspace)

@@ -121,6 +124,13 @@ const Plots = ({ plotsData }: { plotsData?: PlotsData }) => {
/>
))}
</>
) : (
<>
<p>There are no experiments to make plots from.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Q] Could we wrap this in a centered div and make it h-something to make it look more VS Code-ish?

Like:

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure! I did the same thing we do for the table with no data, but the ugliness is more apparent here since this state can happen much more often.

@codeclimate
Copy link

codeclimate bot commented Nov 5, 2021

Code Climate has analyzed commit 78d7d7b and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category Count
Complexity 1

The test coverage on the diff in this pull request is 100.0% (85% is the threshold).

This pull request will bring the total coverage in the repository to 96.3% (0.0% change).

View more on Code Climate.

@mattseddon mattseddon dismissed their stale review November 5, 2021 05:52

Take a look at #999, I've incorporated these changes there and with the static data. We can still roll with this but that means I've have to fix conflicts all the way through the chain of 5

@rogermparent
Copy link
Contributor Author

Closing in favor of #999, which includes most of this PR's changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
product PR that affects product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show something in the Plots webview when there are no Experiments
2 participants