Add Open-to-the-side option to table header context-menu

iterative · May 30, 2022 · 9cfdfa9 · 9cfdfa9
1 parent c4234bd
commit 9cfdfa9
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 28 deletions.
diff --git a/extension/src/experiments/index.ts b/extension/src/experiments/index.ts
@@ -1,4 +1,5 @@
-import { Event, EventEmitter, Memento, window } from 'vscode'
+import { join } from 'path'
+import { Event, EventEmitter, Memento, Uri, ViewColumn, window } from 'vscode'
 import { ExperimentsModel } from './model'
 import { pickExperiments } from './model/quickPicks'
 import { pickAndModifyParams } from './model/queue/quickPick'
@@ -15,6 +16,7 @@ import { ExperimentsData } from './data'
 import { askToDisableAutoApplyFilters } from './toast'
 import { Experiment, ColumnType, TableData } from './webview/contract'
 import { SortDefinition } from './model/sortBy'
+import { splitColumnPath } from './columns/paths'
 import { ResourceLocator } from '../resourceLocator'
 import {
   AvailableCommands,
@@ -380,6 +382,13 @@ export class Experiments extends BaseRepository<TableData> {
     )
   }
 
+  private async openParamsFileToTheSide(path: string) {
+    const [, fileSegment] = splitColumnPath(path)
+    await window.showTextDocument(Uri.file(join(this.dvcRoot, fileSegment)), {
+      viewColumn: ViewColumn.Beside
+    })
+  }
+
   private setupInitialData() {
     const waitForInitialData = this.dispose.track(
       this.onDidChangeExperiments(() => {
@@ -440,6 +449,8 @@ export class Experiments extends BaseRepository<TableData> {
             return this.setExperimentStatus(message.payload)
           case MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN:
             return this.hideTableColumn(message.payload)
+          case MessageFromWebviewType.OPEN_PARAMS_FILE_TO_THE_SIDE:
+            return this.openParamsFileToTheSide(message.payload)
           case MessageFromWebviewType.SORT_COLUMN:
             return this.addColumnSort(message.payload)
           case MessageFromWebviewType.REMOVE_COLUMN_SORT:

diff --git a/extension/src/webview/contract.ts b/extension/src/webview/contract.ts
@@ -14,6 +14,7 @@ export enum MessageFromWebviewType {
   INITIALIZED = 'initialized',
   APPLY_EXPERIMENT_TO_WORKSPACE = 'apply-experiment-to-workspace',
   CREATE_BRANCH_FROM_EXPERIMENT = 'create-branch-from-experiment',
+  OPEN_PARAMS_FILE_TO_THE_SIDE = 'open-params-file-to-the-side',
   REMOVE_COLUMN_SORT = 'remove-column-sort',
   REMOVE_EXPERIMENT = 'remove-experiment',
   RENAME_SECTION = 'rename-section',
@@ -68,6 +69,10 @@ export type MessageFromWebview =
       type: MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN
       payload: string
     }
+  | {
+      type: MessageFromWebviewType.OPEN_PARAMS_FILE_TO_THE_SIDE
+      payload: string
+    }
   | {
       type: MessageFromWebviewType.APPLY_EXPERIMENT_TO_WORKSPACE
       payload: string

diff --git a/webview/src/experiments/components/table/Row.tsx b/webview/src/experiments/components/table/Row.tsx
@@ -9,6 +9,7 @@ import { sendMessage } from '../../../shared/vscode'
 import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu'
 import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
 import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption'
+import { pushIf } from '../../../util/array'
 
 const getExperimentTypeClass = ({ running, queued, selected }: Experiment) => {
   if (running) {
@@ -52,10 +53,10 @@ export const RowContextMenu: React.FC<RowProp> = ({
   const contextMenuOptions = React.useMemo(() => {
     const menuOptions: MessagesMenuOptionProps[] = []
 
-    const pushIf = (condition: boolean, options: MessagesMenuOptionProps[]) =>
-      condition && menuOptions.push(...options)
+    // const pushIf = (condition: boolean, options: MessagesMenuOptionProps[]) =>
+    //   condition && menuOptions.push(...options)
 
-    pushIf(!queued && !isWorkspace && depth > 0, [
+    pushIf(menuOptions, !queued && !isWorkspace && depth > 0, [
       experimentMenuOption(
         id,
         'Apply to Workspace',
@@ -68,7 +69,7 @@ export const RowContextMenu: React.FC<RowProp> = ({
       )
     ])
 
-    pushIf(depth === 1, [
+    pushIf(menuOptions, depth === 1, [
       experimentMenuOption(
         id,
         'Remove',
@@ -78,23 +79,23 @@ export const RowContextMenu: React.FC<RowProp> = ({
 
     const isNotCheckpoint = depth <= 1 || isWorkspace
 
-    pushIf(isNotCheckpoint, [
+    pushIf(menuOptions, isNotCheckpoint, [
       experimentMenuOption(
         id,
         projectHasCheckpoints ? 'Modify and Resume' : 'Modify and Run',
         MessageFromWebviewType.VARY_EXPERIMENT_PARAMS_AND_RUN
       )
     ])
 
-    pushIf(isNotCheckpoint && projectHasCheckpoints, [
+    pushIf(menuOptions, isNotCheckpoint && projectHasCheckpoints, [
       experimentMenuOption(
         id,
         'Modify, Reset and Run',
         MessageFromWebviewType.VARY_EXPERIMENT_PARAMS_RESET_AND_RUN
       )
     ])
 
-    pushIf(isNotCheckpoint, [
+    pushIf(menuOptions, isNotCheckpoint, [
       experimentMenuOption(
         id,
         'Modify and Queue',

diff --git a/webview/src/experiments/components/table/TableHeader.tsx b/webview/src/experiments/components/table/TableHeader.tsx
@@ -21,6 +21,8 @@ import {
   OnDrop
 } from '../../../shared/components/dragDrop/DragDropWorkbench'
 import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
+import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption'
+import { pushIf } from '../../../util/array'
 
 export const ColumnDragHandle: React.FC<{
   disabled: boolean
@@ -197,6 +199,32 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
     })
   }
 
+  const contextMenuOptions: MessagesMenuOptionProps[] = React.useMemo(() => {
+    const menuOptions: MessagesMenuOptionProps[] = [
+      {
+        id: 'hide-column',
+        label: 'Hide Column',
+        message: {
+          payload: column.id,
+          type: MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN
+        }
+      }
+    ]
+
+    pushIf(menuOptions, column.group === ColumnType.PARAMS, [
+      {
+        id: 'open-to-the-side',
+        label: 'Open to the Side',
+        message: {
+          payload: column.id,
+          type: MessageFromWebviewType.OPEN_PARAMS_FILE_TO_THE_SIDE
+        }
+      }
+    ])
+
+    return menuOptions
+  }, [column])
+
   return (
     <TableHeaderCell
       column={column}
@@ -206,28 +234,21 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
       onDragOver={onDragOver}
       onDragStart={onDragStart}
       onDrop={onDrop}
-      menuDisabled={!isSortable}
+      menuDisabled={!isSortable && column.group !== ColumnType.PARAMS}
       menuContent={
         <div>
-          <SortPicker
-            sortOrder={sortOrder}
-            setSelectedOrder={order => {
-              setColumnSort(order)
-            }}
-          />
-          <VSCodeDivider />
-          <MessagesMenu
-            options={[
-              {
-                id: 'hide-column',
-                label: 'Hide Column',
-                message: {
-                  payload: column.id,
-                  type: MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN
-                }
-              }
-            ]}
-          />
+          {isSortable && (
+            <div>
+              <SortPicker
+                sortOrder={sortOrder}
+                setSelectedOrder={order => {
+                  setColumnSort(order)
+                }}
+              />
+              <VSCodeDivider />
+            </div>
+          )}
+          <MessagesMenu options={contextMenuOptions} />
         </div>
       }
     />

diff --git a/webview/src/util/array.ts b/webview/src/util/array.ts
@@ -0,0 +1,3 @@
+export function pushIf<T>(array: T[], condition: boolean, elements: T[]) {
+  condition && array.push(...elements)
+}