File selection/highlight

src/telemetry/index.ts

@@ -45,13 +45,15 @@ export function activateTelemetry(context: vscode.ExtensionContext) {
   // Track file open events
   const trackFileOpens = vscode.workspace.onDidOpenTextDocument((document) => {
     const fileName = document.fileName.toLowerCase();
-    const fileType = 
-      fileName.endsWith(".nf.test") ? ".nf.test"
-      : fileName.endsWith(".nf") ? ".nf"
-      : fileName.endsWith(".config") ? ".config"
-      : undefined;
+    const fileType = fileName.endsWith(".nf.test")
+      ? ".nf.test"
+      : fileName.endsWith(".nf")
+        ? ".nf"
+        : fileName.endsWith(".config")
+          ? ".config"
+          : undefined;
     if (fileType) {
-      trackEvent("fileOpened", { fileType });
+      trackEvent("fileSelected", { fileType });
     }
   });
   context.subscriptions.push(trackFileOpens);
@@ -110,13 +112,13 @@ function createTrackEvent(context: vscode.ExtensionContext) {
 }
 
 function isTelemetryEnabled(): boolean {
-    const globalTelemetryLevel = vscode.workspace
-      .getConfiguration("telemetry")
-      .get<string>("telemetryLevel", "all");
-    const enabled = vscode.workspace
-      .getConfiguration("nextflow")
-      .get<boolean>("telemetry.enabled", false);
-    return globalTelemetryLevel !== "off" && enabled;
+  const globalTelemetryLevel = vscode.workspace
+    .getConfiguration("telemetry")
+    .get<string>("telemetryLevel", "all");
+  const enabled = vscode.workspace
+    .getConfiguration("nextflow")
+    .get<boolean>("telemetry.enabled", false);
+  return globalTelemetryLevel !== "off" && enabled;
 }
 
 function getUserId(context: vscode.ExtensionContext): string {
@@ -128,7 +130,9 @@ function getUserId(context: vscode.ExtensionContext): string {
   return anonId;
 }
 
-export function deactivateTelemetry(context: vscode.ExtensionContext): Thenable<void> {
+export function deactivateTelemetry(
+  context: vscode.ExtensionContext
+): Thenable<void> {
   if (!isTelemetryEnabled() || !posthogClient) {
     return Promise.resolve();
   }

src/webview/WebviewProvider/index.ts

@@ -148,6 +148,8 @@ class WebviewProvider implements vscode.WebviewViewProvider {
   public async initViewData(refresh?: boolean) {
     const { viewID, _context, _currentView: view } = this;
     if (!view) return;
+    const wsState = this._context.workspaceState;
+    const selectedFile = wsState.get("selectedFile");
     if (viewID === "userInfo") {
       this.getRepoInfo();
       const accessToken = await this.getAccessToken();
@@ -157,24 +159,32 @@ class WebviewProvider implements vscode.WebviewViewProvider {
       const fileList = buildList();
       view.webview.postMessage({
         fileList,
-        tree: buildTree(fileList.files)
+        tree: buildTree(fileList.files),
+        selectedFile
       });
     }
   }
 
-  public async openFileEvent(filePath: string) {
+  public async reloadView() {
+    if (!this._currentView) return;
+    const html = this.getBuiltHTML(this._currentView);
+    this._currentView.webview.html = html;
+    await this.initViewData(true);
+  }
+
+  public async setSelectedFile(filePath: string) {
     this._currentView?.webview.postMessage({
-      command: "fileOpened",
-      filePath
+      selectedFile: filePath
     });
+    const wsState = this._context.workspaceState;
+    wsState.update("selectedFile", filePath);
   }
 
   private async openFile(file: FileNode) {
     const doc = await vscode.workspace.openTextDocument(file.filePath);
     await vscode.window.showTextDocument(doc, {
       selection: new vscode.Range(file.line || 0, 0, file.line || 0, 0)
     });
-    this.openFileEvent(file.filePath);
   }
 
   private async openChat() {

src/webview/index.ts

@@ -47,7 +47,7 @@ export function activateWebview(
       document.uri.fsPath.endsWith(".nf") ||
       document.uri.fsPath.endsWith(".nf.test")
     ) {
-      workflowProvider.openFileEvent(document.uri.fsPath);
+      workflowProvider.setSelectedFile(document.uri.fsPath);
     }
   });
 

webview-ui/src/Context/WorkspaceProvider/index.tsx

@@ -13,6 +13,7 @@ const WorkspaceContext = createContext<WorkspaceContextType>({
   selectedItems: [],
   selectItem: () => {},
   isSelected: () => false,
+  isSelectedFile: () => false,
   viewID: "",
   testCount: 0,
   login: () => {},
@@ -34,6 +35,7 @@ interface WorkspaceContextType {
   selectedItems: string[];
   selectItem: (name: string) => void;
   isSelected: (name: string) => boolean;
+  isSelectedFile: (file: FileNodeType) => boolean;
   viewID: string;
   testCount: number;
   login: () => void;
@@ -50,9 +52,18 @@ type Props = {
   vscode: any;
   viewID: string;
   isCursor: boolean;
+  selectedFile: string;
+  setSelectedFile: (file: string) => void;
 };
 
-const WorkspaceProvider = ({ children, vscode, viewID, isCursor }: Props) => {
+const WorkspaceProvider = ({
+  children,
+  vscode,
+  viewID,
+  isCursor,
+  selectedFile,
+  setSelectedFile
+}: Props) => {
   const state = vscode.getState();
 
   const [testCount, setTestCount] = useState(0);
@@ -80,6 +91,9 @@ const WorkspaceProvider = ({ children, vscode, viewID, isCursor }: Props) => {
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       const message = event.data;
+      if (message.selectedFile) {
+        setSelectedFile(message.selectedFile);
+      }
       if (message.fileList) {
         const { files, tests } = message.fileList;
         setFiles(sortFiles(files || []));
@@ -105,6 +119,11 @@ const WorkspaceProvider = ({ children, vscode, viewID, isCursor }: Props) => {
     return selectedItems.includes(name);
   }
 
+  function isSelectedFile(file: FileNodeType) {
+    console.log("🟠 isSelectedFile", selectedFile, file.filePath);
+    return selectedFile === file.filePath;
+  }
+
   function openFile(file: FileNodeType) {
     if (!file) return;
     vscode.postMessage({ command: "openFile", file });
@@ -148,6 +167,7 @@ const WorkspaceProvider = ({ children, vscode, viewID, isCursor }: Props) => {
         selectedItems,
         selectItem,
         isSelected,
+        isSelectedFile,
         testCount,
         login,
         viewID,

webview-ui/src/Context/index.tsx

@@ -39,15 +39,14 @@ const Context = ({ children }: Props) => {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [computeEnvs, setComputeEnvs] = useState<ComputeEnv[]>([]);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
-  const [runs, setRuns] = useState<RunsResponse | undefined>(
-    undefined
-  );
+  const [runs, setRuns] = useState<RunsResponse | undefined>(undefined);
   const [pipelines, setPipelines] = useState<PipelinesResponse | undefined>(
     undefined
   );
   const [repoInfo, setRepoInfo] = useState<RepoInfo | undefined>(undefined);
   const [datasets, setDatasets] = useState<Dataset[]>([]);
   const [dataLinks, setDataLinks] = useState<DataLink[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string>("");
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -63,13 +62,20 @@ const Context = ({ children }: Props) => {
       if (data.repoInfo) setRepoInfo(data.repoInfo);
       if (data.datasets) setDatasets(data.datasets);
       if (data.dataLinks) setDataLinks(data.dataLinks);
+      if (data.selectedFile) setSelectedFile(data.selectedFile);
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, []);
 
   return (
-    <WorkspaceProvider vscode={vscode} viewID={viewID} isCursor={isCursor}>
+    <WorkspaceProvider
+      vscode={vscode}
+      viewID={viewID}
+      isCursor={isCursor}
+      selectedFile={selectedFile}
+      setSelectedFile={setSelectedFile}
+    >
       {viewID === "userInfo" ? (
         <TowerProvider
           vscode={vscode}

webview-ui/src/components/FileList/FileNode.tsx

@@ -12,16 +12,25 @@ type Props = {
 };
 
 const FileNode = ({ node }: Props) => {
-  const { openFile, getTest, viewID: type } = useWorkspaceContext();
+  const {
+    openFile,
+    getTest,
+    viewID: type,
+    isSelectedFile
+  } = useWorkspaceContext();
   const testFile = getTest(node.name);
 
   let typeStyleName = "workflow";
   if (type === "processes") {
     typeStyleName = "process";
   }
-
   return (
-    <div className={clsx(styles.row, { [styles[typeStyleName]]: !!type })}>
+    <div
+      className={clsx(styles.row, {
+        [styles[typeStyleName]]: !!type,
+        [styles.selected]: isSelectedFile(node)
+      })}
+    >
       <label className={clsx(styles.item)}>
         <span className={styles.name} onClick={() => openFile(node)}>
           <i className="codicon codicon-symbol-method" />
@@ -52,11 +61,7 @@ const FileNode = ({ node }: Props) => {
         )}
       </label>
       {type === "workflows" && (
-        <FileNodeChildren
-          label="Includes"
-          parent={node.name}
-          items={node.imports}
-        />
+        <FileNodeChildren label="Includes" fileNode={node} />
       )}
     </div>
   );

webview-ui/src/components/FileList/FileNodeChildren.tsx

@@ -1,21 +1,28 @@
-import styles from "./styles.module.css";
+import clsx from "clsx";
 import { useWorkspaceContext } from "../../Context";
 
+import { FileNode as FileNodeType } from "../../Context/WorkspaceProvider/types";
+
+import styles from "./styles.module.css";
+
 const FileNodeChildren = ({
-  parent,
-  label,
-  items = []
+  fileNode,
+  label
 }: {
-  parent: string;
+  fileNode: FileNodeType;
   label: string;
-  items: string[];
 }) => {
-  const { getFile, openFile, isSelected, selectItem } = useWorkspaceContext();
+  const { getFile, openFile, isSelected, isSelectedFile, selectItem } =
+    useWorkspaceContext();
 
-  const linkableFiles = items?.map((label) => getFile(label)).filter(Boolean);
-  const itemKey = `${parent}.${label}`;
+  const linkableFiles = fileNode?.imports
+    ?.map((label) => getFile(label))
+    .filter(Boolean);
+  const itemKey = `${fileNode?.name}.${label}`;
   const isOpen = isSelected(itemKey);
 
+  if (!linkableFiles) return null;
+
   return (
     <div className={styles.children}>
       <label onClick={() => selectItem(itemKey)}>
@@ -26,7 +33,13 @@ const FileNodeChildren = ({
           {linkableFiles?.map((file) => {
             if (!file) return null;
             return (
-              <label key={label} onClick={() => openFile(file)}>
+              <label
+                className={clsx(styles.child, {
+                  [styles.selected]: isSelectedFile(file)
+                })}
+                key={label}
+                onClick={() => openFile(file)}
+              >
                 {file.name}
               </label>
             );

webview-ui/src/components/FileList/styles.module.css

@@ -1,6 +1,9 @@
 .row {
   user-select: none;
   width: 100%;
+  & .selected {
+    background-color: var(--nf-item-bg-active);
+  }
   & .item {
     line-height: 1;
     display: flex;