Add DVCLive reference to Experiments "Setup Complete" (#3948)

iterative · May 23, 2023 · 48faf35 · 48faf35
1 parent 1eaee40
commit 48faf35
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 30 deletions.
diff --git a/webview/src/setup/components/experiments/DvcLiveExamples.tsx b/webview/src/setup/components/experiments/DvcLiveExamples.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import React from 'react'
+import { CodeSlider } from '../../../shared/components/codeSlider/CodeSlider'
+import pyTorch from '../../snippets/pyTorch.py'
+import huggingFace from '../../snippets/huggingFace.py'
+import keras from '../../snippets/keras.py'
+import pythonApi from '../../snippets/pythonApi.py'
+
+export const DvcLiveExamples: React.FC = () => {
+  return (
+    <CodeSlider
+      codeBlocks={[
+        {
+          children: pyTorch.toString(),
+          language: 'python',
+          title: 'PyTorch Lightning'
+        },
+        {
+          children: huggingFace.toString(),
+          language: 'python',
+          title: 'Hugging Face'
+        },
+        {
+          children: keras.toString(),
+          language: 'python',
+          title: 'Keras'
+        },
+        {
+          children: pythonApi.toString(),
+          language: 'python',
+          title: 'General Python API'
+        }
+      ]}
+    />
+  )
+}
diff --git a/webview/src/setup/components/experiments/Experiments.tsx b/webview/src/setup/components/experiments/Experiments.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import { NoData } from './NoData'
 import { NeedsGitCommit } from './NeedsGitCommit'
+import { DvcLiveExamples } from './DvcLiveExamples'
 import { showExperiments } from '../messages'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { IconButton } from '../../../shared/components/button/IconButton'
@@ -43,12 +44,17 @@ export const Experiments: React.FC<ExperimentsProps> = ({ isDvcSetup }) => {
   return (
     <EmptyState isFullScreen={false}>
       <h1>Setup Complete</h1>
+      <p>
+        Learn more about using DVCLive in the{' '}
+        <a href="https://dvc.org/doc/dvclive">docs</a>.
+      </p>
       <IconButton
         appearance="primary"
         icon={Beaker}
         onClick={showExperiments}
         text="Show Experiments"
       />
+      <DvcLiveExamples />
     </EmptyState>
   )
 }
diff --git a/webview/src/setup/components/experiments/NoData.tsx b/webview/src/setup/components/experiments/NoData.tsx
@@ -1,11 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import React from 'react'
-import pyTorch from '../../snippets/pyTorch.py'
-import huggingFace from '../../snippets/huggingFace.py'
-import keras from '../../snippets/keras.py'
-import pythonApi from '../../snippets/pythonApi.py'
+import { DvcLiveExamples } from './DvcLiveExamples'
 import { CodeBlock } from '../../../shared/components/codeBlock/CodeBlock'
-import { CodeSlider } from '../../../shared/components/codeSlider/CodeSlider'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 
 export const NoData: React.FC = () => {
@@ -26,30 +21,7 @@ export const NoData: React.FC = () => {
         ). Once you have successfully added DVCLive to your project, do not
         forget to run your script to see experiments and plots in action.
       </div>
-      <CodeSlider
-        codeBlocks={[
-          {
-            children: pyTorch.toString(),
-            language: 'python',
-            title: 'PyTorch Lightning'
-          },
-          {
-            children: huggingFace.toString(),
-            language: 'python',
-            title: 'Hugging Face'
-          },
-          {
-            children: keras.toString(),
-            language: 'python',
-            title: 'Keras'
-          },
-          {
-            children: pythonApi.toString(),
-            language: 'python',
-            title: 'General Python API'
-          }
-        ]}
-      />
+      <DvcLiveExamples />
     </EmptyState>
   )
 }