fix: download after template, move download & colab under each left tab (#161)

Author: ydcjeff

.github/workflows/ci.yml

@@ -97,7 +97,7 @@ jobs:
           restore-keys: |
             pnpm-and-pip-cache-
 
-      - run: pip install -Uq pip wheel && sh scripts/run_code_style.sh install
+      - run: pip install -Uq pip wheel && bash scripts/run_code_style.sh install
       - run: npm i -g pnpm
       - run: pnpm i --frozen-lockfile --color
       - run: pnpm lint

__tests__/text-classification.spec.js

@@ -47,7 +47,7 @@ test('text classification all', async () => {
   expect(await page.isChecked('#include_test-checkbox')).toBeTruthy()
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#deterministic-checkbox')
   expect(await page.isChecked('#deterministic-checkbox')).toBeTruthy()
@@ -97,7 +97,7 @@ test('text classification launch', async () => {
   await page.selectOption('select', 'template-text-classification')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()
@@ -119,7 +119,7 @@ test('text classification spawn', async () => {
   await page.selectOption('select', 'template-text-classification')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()

__tests__/vision-classification.spec.js

@@ -47,7 +47,7 @@ test('vision classification all', async () => {
   expect(await page.isChecked('#include_test-checkbox')).toBeTruthy()
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#deterministic-checkbox')
   expect(await page.isChecked('#deterministic-checkbox')).toBeTruthy()
@@ -97,7 +97,7 @@ test('vision classification launch', async () => {
   await page.selectOption('select', 'template-vision-classification')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()
@@ -119,7 +119,7 @@ test('vision classification spawn', async () => {
   await page.selectOption('select', 'template-vision-classification')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()

__tests__/vision-dcgan.spec.js

@@ -47,7 +47,7 @@ test('vision dcgan all', async () => {
   expect(await page.isChecked('#include_test-checkbox')).toBeTruthy()
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#deterministic-checkbox')
   expect(await page.isChecked('#deterministic-checkbox')).toBeTruthy()
@@ -97,7 +97,7 @@ test('vision dcgan launch', async () => {
   await page.selectOption('select', 'template-vision-dcgan')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()
@@ -119,7 +119,7 @@ test('vision dcgan spawn', async () => {
   await page.selectOption('select', 'template-vision-dcgan')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()

__tests__/vision-segmentation.spec.js

@@ -47,7 +47,7 @@ test('vision segmentation all', async () => {
   expect(await page.isChecked('#include_test-checkbox')).toBeTruthy()
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#deterministic-checkbox')
   expect(await page.isChecked('#deterministic-checkbox')).toBeTruthy()
@@ -97,7 +97,7 @@ test('vision segmentation launch', async () => {
   await page.selectOption('select', 'template-vision-segmentation')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()
@@ -119,7 +119,7 @@ test('vision segmentation spawn', async () => {
   await page.selectOption('select', 'template-vision-segmentation')
 
   await page.waitForSelector('text=README.md')
-  await page.click(':nth-match(:text("Training"), 2)')
+  await page.click('text=Training')
 
   await page.check('#use_dist-checkbox')
   expect(await page.isChecked('#use_dist-checkbox')).toBeTruthy()

src/components/NavBar.vue

@@ -13,8 +13,6 @@
     </h1>
     <div class="left-side-badges">
       <NavHelp />
-      <NavDownload />
-      <NavColab />
       <NavGitHub />
       <NavTwitter />
       <NavDiscord />

src/components/NavColab.vue

@@ -1,12 +1,12 @@
 <template>
   <button
     @click="downloadProject"
-    class="download-button external-links"
+    class="download-button"
     title="Open in Colab"
   >
     <a
       class="external-links"
-      v-bind:href="colabLink"
+      :href="colabLink"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -63,7 +63,7 @@
           </svg>
         </g>
       </svg>
-      <span class="icon-text">Open in Colab</span>
+      <span>Open in Colab</span>
     </a>
   </button>
   <div
@@ -227,8 +227,6 @@ export default {
 </script>
 
 <style scoped>
-@import url('./css/nav-right.css');
-
 .download-button {
   display: inline-flex;
   align-items: center;
@@ -238,7 +236,13 @@ export default {
   cursor: pointer;
   font-family: var(--font-family-base);
   font-size: 1em;
-  padding: 0;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--c-brand-red);
+  border-radius: 4px;
+}
+.external-links {
+  display: flex;
+  align-items: center;
 }
 .download-success {
   position: fixed;

src/components/NavDownload.vue

@@ -20,7 +20,7 @@
       <polyline points="7 10 12 15 17 10"></polyline>
       <line x1="12" y1="15" x2="12" y2="3"></line>
     </svg>
-    <span class="icon-text">Download</span>
+    <span>Download</span>
   </button>
   <div
     class="download-success"
@@ -85,8 +85,6 @@ export default {
 </script>
 
 <style scoped>
-@import url('./css/nav-right.css');
-
 .download-button {
   display: inline-flex;
   align-items: center;
@@ -96,7 +94,12 @@ export default {
   cursor: pointer;
   font-family: var(--font-family-base);
   font-size: 1em;
-  padding: 0;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--c-brand-red);
+  border-radius: 4px;
+}
+.download-button span {
+  margin-left: 0.25rem;
 }
 .download-success {
   position: fixed;
@@ -108,7 +111,7 @@ export default {
   height: 100vh;
 }
 .msg-wrapper {
-  position: absolute;
+  position: fixed;
   max-width: 38rem;
   padding: 0 1rem;
   text-align: center;

src/components/NavHelp.vue

@@ -82,7 +82,7 @@ export default {
   height: 100vh;
 }
 .help-wrapper {
-  position: absolute;
+  position: fixed;
   max-width: 38rem;
   padding: 0 0.5rem;
   margin: 20vh auto 100%;

src/components/PaneLeft.vue

@@ -11,6 +11,10 @@
     </div>
   </div>
   <div class="left-pane-contexts">
+    <div class="download-n-colab">
+      <NavDownload />
+      <NavColab />
+    </div>
     <KeepAlive>
       <component :is="currentTabComponent" />
     </KeepAlive>
@@ -24,11 +28,21 @@ import TabTraining from './TabTraining.vue'
 import TabHandlers from './TabHandlers.vue'
 import TabLoggers from './TabLoggers.vue'
 import Message from './Message.vue'
+import NavDownload from './NavDownload.vue'
+import NavColab from './NavColab.vue'
 import { computed, ref } from 'vue'
 import { msg, store } from '../store.js'
 
 export default {
-  components: { TabTemplates, TabTraining, TabLoggers, TabHandlers, Message },
+  components: {
+    TabTemplates,
+    TabTraining,
+    TabLoggers,
+    TabHandlers,
+    Message,
+    NavDownload,
+    NavColab
+  },
   setup() {
     const currentTab = ref('Templates')
     const tabs = ['Templates', 'Training', 'Handlers', 'Loggers']
@@ -108,4 +122,10 @@ export default {
     margin-bottom: 2.5rem;
   }
 }
+.download-n-colab {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-top: 1rem;
+}
 </style>

src/metadata/metadata.json

@@ -103,7 +103,7 @@
     "output_dir": {
       "name": "output_dir",
       "type": "text",
-      "description": "Directory to save all outputs",
+      "description": "Directory to save all outputs (including checkpoints, logs)",
       "default": "./logs"
     },
     "log_every_iters": {

src/store.js

@@ -41,7 +41,9 @@ export const store = reactive({
   code: {},
   config: {
     template: '',
-    include_test: false
+    include_test: false,
+    output_dir: './logs',
+    log_every_iters: 2
   }
 })
 

src/views/Create.vue

@@ -44,6 +44,8 @@ export default {
       // which are defined in store.js
       store.config.template = ''
       store.config.include_test = false
+      store.config.output_dir = './logs'
+      store.config.log_every_iters = 2
     })
   }
 }