Feature: Show runtime errors within files that are being imported (#5500)

* chore: dumping progress

* chore: saving progress

* fix: Got a working example of filenames piped from Rust to TS

* fix: cleaning up debugging code

* fix: TS type for filenames

* fix: rust linter errors

* fix: cargo fmt

* fix: testing code, updating KCLError class for filenames

* fix: auto fixes

* feat: display badge in project folder if there is an error in another file

* chore: skeleton ideas for badge notifications from errors in imported files

* fix: more skeleton code to test some potential implementations

* fix: addressing PR comments

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* fix: fixing the rust struct?

* fix: cargo fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* feat: skeleton workflow for showing runtime errors

* chore: showBadge, adding more props

* fix: new application state to reset errors from previous execution if parse fails first

* fix: cleanup

* fix: better UI

* fix: adding comment for future

* fix: revert for production

* fix: removing unused comment

* chore: swapping JS object to typed Map

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/FileMachineProvider.tsx

@@ -130,6 +130,8 @@ export const FileMachineProvider = ({
         navigateToFile: ({ context, event }) => {
           if (event.type !== 'xstate.done.actor.create-and-open-file') return
           if (event.output && 'name' in event.output) {
+            // TODO: Technically this is not the same as the FileTree Onclick even if they are in the same page
+            // What is "Open file?"
             commandBarActor.send({ type: 'Close' })
             navigate(
               `..${PATHS.FILE}/${encodeURIComponent(

src/components/FileTree.tsx

@@ -23,6 +23,8 @@ import { FileEntry } from 'lib/project'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { normalizeLineEndings } from 'lib/codeEditor'
 import { reportRejection } from 'lib/trap'
+import { useKclContext } from 'lang/KclProvider'
+import { kclErrorsByFilename, KCLError } from 'lang/errors'
 
 function getIndentationCSS(level: number) {
   return `calc(1rem * ${level + 1})`
@@ -158,6 +160,7 @@ const FileTreeItem = ({
   level = 0,
   treeSelection,
   setTreeSelection,
+  runtimeErrors,
 }: {
   parentDir: FileEntry | undefined
   project?: IndexLoaderData['project']
@@ -177,6 +180,7 @@ const FileTreeItem = ({
   level?: number
   treeSelection: FileEntry | undefined
   setTreeSelection: Dispatch<React.SetStateAction<FileEntry | undefined>>
+  runtimeErrors: Map<string, KCLError[]>
 }) => {
   const { send: fileSend, context: fileContext } = useFileContext()
   const { onFileOpen, onFileClose } = useLspContext()
@@ -186,6 +190,8 @@ const FileTreeItem = ({
   const isFileOrDirHighlighted = treeSelection?.path === fileOrDir?.path
   const itemRef = useRef(null)
 
+  const hasRuntimeError = runtimeErrors.has(fileOrDir.path)
+
   // Since every file or directory gets its own FileTreeItem, we can do this.
   // Because subtrees only render when they are opened, that means this
   // only listens when they open. Because this acts like a useEffect, when
@@ -292,7 +298,7 @@ const FileTreeItem = ({
         >
           {!isRenaming ? (
             <button
-              className="flex gap-1 items-center py-0.5 rounded-none border-none p-0 m-0 text-sm w-full hover:!bg-transparent text-left !text-inherit"
+              className="relative flex gap-1 items-center py-0.5 rounded-none border-none p-0 m-0 text-sm w-full hover:!bg-transparent text-left !text-inherit"
               style={{ paddingInlineStart: getIndentationCSS(level) }}
               onClick={(e) => {
                 e.currentTarget.focus()
@@ -300,11 +306,21 @@ const FileTreeItem = ({
               }}
               onKeyUp={handleKeyUp}
             >
+              {hasRuntimeError && (
+                <p
+                  className={
+                    'absolute m-0 p-0 bottom-3 left-6 w-3 h-3 flex items-center justify-center text-[9px] font-semibold text-white bg-red-600 rounded-full border border-red-300 dark:border-red-800 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
+                  }
+                  title={`Click to view notifications`}
+                >
+                  <span>x</span>
+                </p>
+              )}
               <CustomIcon
                 name={fileOrDir.name?.endsWith(FILE_EXT) ? 'kcl' : 'file'}
                 className="inline-block w-3 text-current"
               />
-              {fileOrDir.name}
+              <span className="pl-1">{fileOrDir.name}</span>
             </button>
           ) : (
             <RenameForm
@@ -414,6 +430,7 @@ const FileTreeItem = ({
                         key={level + '-' + child.path}
                         treeSelection={treeSelection}
                         setTreeSelection={setTreeSelection}
+                        runtimeErrors={runtimeErrors}
                       />
                     )
                   )}
@@ -660,6 +677,8 @@ export const FileTreeInner = ({
   const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const { send: fileSend, context: fileContext } = useFileContext()
   const { send: modelingSend } = useModelingContext()
+  const { errors } = useKclContext()
+  const runtimeErrors = kclErrorsByFilename(errors)
 
   const [lastDirectoryClicked, setLastDirectoryClicked] = useState<
     FileEntry | undefined
@@ -769,6 +788,7 @@ export const FileTreeInner = ({
                 key={fileOrDir.path}
                 treeSelection={treeSelection}
                 setTreeSelection={setTreeSelection}
+                runtimeErrors={runtimeErrors}
               />
             )
           )}

src/components/ModelingSidebar/ModelingPanes/index.tsx

@@ -18,6 +18,7 @@ import { editorManager } from 'lib/singletons'
 import { ContextFrom } from 'xstate'
 import { settingsMachine } from 'machines/settingsMachine'
 import { FeatureTreePane } from './FeatureTreePane'
+import { kclErrorsByFilename } from 'lang/errors'
 
 export type SidebarType =
   | 'code'
@@ -30,8 +31,10 @@ export type SidebarType =
   | 'variables'
 
 export interface BadgeInfo {
-  value: (props: PaneCallbackProps) => boolean | number
+  value: (props: PaneCallbackProps) => boolean | number | string
   onClick?: MouseEventHandler<any>
+  className?: string
+  title?: string
 }
 
 /**
@@ -152,6 +155,25 @@ export const sidebarPanes: SidebarPane[] = [
     },
     keybinding: 'Shift + F',
     hide: ({ platform }) => platform === 'web',
+    showBadge: {
+      value: (context) => {
+        // Only compute runtime errors! Compilation errors are not tracked here.
+        const errors = kclErrorsByFilename(context.kclContext.errors)
+        return errors.size > 0 ? 'x' : ''
+      },
+      onClick: (e) => {
+        e.preventDefault()
+        // TODO: When we have generic file open
+        // If badge is pressed
+        // Open the first error in the array of errors
+        // Then scroll to error
+        // Do you automatically open the project files
+        // editorManager.scrollToFirstErrorDiagnosticIfExists()
+      },
+      className:
+        'absolute m-0 p-0 bottom-4 left-4 w-3 h-3 flex items-center justify-center text-[9px] font-semibold text-white bg-red-600 rounded-full border border-red-300 dark:border-red-800 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200',
+      title: 'Project files have runtime errors',
+    },
   },
   {
     id: 'variables',

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -27,8 +27,10 @@ interface ModelingSidebarProps {
 }
 
 interface BadgeInfoComputed {
-  value: number | boolean
+  value: number | boolean | string
   onClick?: MouseEventHandler<any>
+  className?: string
+  title?: string
 }
 
 function getPlatformString(): 'web' | 'desktop' {
@@ -116,6 +118,8 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
         acc[pane.id] = {
           value: pane.showBadge.value(paneCallbackProps),
           onClick: pane.showBadge.onClick,
+          className: pane.showBadge.className,
+          title: pane.showBadge.title,
         }
       }
       return acc
@@ -125,6 +129,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   // Clear any hidden panes from the `openPanes` array
   useEffect(() => {
     const panesToReset: SidebarType[] = []
+
     sidebarPanes.forEach((pane) => {
       if (
         pane.hide === true ||
@@ -339,22 +344,31 @@ function ModelingPaneButton({
         <p
           id={`${paneConfig.id}-badge`}
           className={
-            'absolute m-0 p-0 bottom-4 left-4 w-3 h-3 flex items-center justify-center text-[10px] font-semibold text-white bg-primary hue-rotate-90 rounded-full border border-chalkboard-10 dark:border-chalkboard-80 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
+            showBadge.className
+              ? showBadge.className
+              : 'absolute m-0 p-0 bottom-4 left-4 w-3 h-3 flex items-center justify-center text-[10px] font-semibold text-white bg-primary hue-rotate-90 rounded-full border border-chalkboard-10 dark:border-chalkboard-80 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
           }
           onClick={showBadge.onClick}
-          title={`Click to view ${showBadge.value} notification${
+          title={
+            showBadge.title
+              ? showBadge.title
+              : `Click to view ${showBadge.value} notification${
                   Number(showBadge.value) > 1 ? 's' : ''
-          }`}
+                }`
+          }
         >
           <span className="sr-only">&nbsp;has&nbsp;</span>
-          {typeof showBadge.value === 'number' ? (
+          {typeof showBadge.value === 'number' ||
+          typeof showBadge.value === 'string' ? (
             <span>{showBadge.value}</span>
           ) : (
             <span className="sr-only">a</span>
           )}
+          {typeof showBadge.value === 'number' && (
             <span className="sr-only">
               &nbsp;notification{Number(showBadge.value) > 1 ? 's' : ''}
             </span>
+          )}
         </p>
       )}
     </div>

src/lang/KclSingleton.ts

@@ -293,6 +293,13 @@ export class KclManager {
       return null
     }
 
+    // GOTCHA:
+    // When we safeParse this is tied to execution because they clicked a new file to load
+    // Clear all previous errors and logs because they are old since they executed a new file
+    // If we decouple safeParse from execution we need to move this application logic.
+    this._kclErrorsCallBack([])
+    this._logsCallBack([])
+
     this.addDiagnostics(complilationErrorsToDiagnostics(result.errors))
     this.addDiagnostics(complilationErrorsToDiagnostics(result.warnings))
     if (result.errors.length > 0) {

src/lang/errors.ts

@@ -1,4 +1,7 @@
-import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
+import {
+  KclError,
+  KclError as RustKclError,
+} from '../wasm-lib/kcl/bindings/KclError'
 import { CompilationError } from 'wasm-lib/kcl/bindings/CompilationError'
 import { Diagnostic as CodeMirrorDiagnostic } from '@codemirror/lint'
 import { posToOffset } from '@kittycad/codemirror-lsp-client'
@@ -334,3 +337,34 @@ export function complilationErrorsToDiagnostics(
       }
     })
 }
+
+// Create an array of KCL Errors with a new formatting to
+// easily map SourceRange of an error to the filename to display in the
+// side bar UI. This is to indicate an error in an imported file, it isn't
+// the specific code mirror error interface.
+export function kclErrorsByFilename(
+  errors: KCLError[]
+): Map<string, KCLError[]> {
+  const fileNameToError: Map<string, KCLError[]> = new Map()
+  errors.forEach((error: KCLError) => {
+    const filenames = error.filenames
+    const sourceRange: SourceRange = error.sourceRange
+    const fileIndex = sourceRange[2]
+    const modulePath: ModulePath | undefined = filenames[fileIndex]
+    if (modulePath) {
+      let stdOrLocalPath = modulePath.value
+      if (stdOrLocalPath) {
+        // Build up an array of errors per file name
+        const value = fileNameToError.get(stdOrLocalPath)
+        if (!value) {
+          fileNameToError.set(stdOrLocalPath, [error])
+        } else {
+          value.push(error)
+          fileNameToError.set(stdOrLocalPath, [error])
+        }
+      }
+    }
+  })
+
+  return fileNameToError
+}