modeling-app/src/machines/featureTreeMachine.ts

import { Artifact, getArtifactFromRange } from 'lang/std/artifactGraph'
import { SourceRange } from 'lang/wasm'
import { enterEditFlow, EnterEditFlowProps } from 'lib/operations'
import { engineCommandManager, kclManager } from 'lib/singletons'
import { err } from 'lib/trap'
import toast from 'react-hot-toast'
import { Operation } from 'wasm-lib/kcl/bindings/Operation'
import { assign, fromPromise, setup } from 'xstate'
import { commandBarActor } from './commandBarMachine'
import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
import {
  deleteSelectionPromise,
  deletionErrorMessage,
} from 'lang/modifyAst/deleteSelection'

type FeatureTreeEvent =
  | {
      type: 'goToKclSource'
      data: { targetSourceRange: SourceRange }
    }
  | {
      type: 'selectOperation'
      data: { targetSourceRange: SourceRange }
    }
  | {
      type: 'deleteOperation'
      data: { targetSourceRange: SourceRange }
    }
  | {
      type: 'enterEditFlow'
      data: { targetSourceRange: SourceRange; currentOperation: Operation }
    }
  | { type: 'goToError' }
  | { type: 'codePaneOpened' }
  | { type: 'selected' }
  | { type: 'done' }
  | { type: 'xstate.error.actor.prepareEditCommand'; error: Error }
  | { type: 'xstate.error.actor.prepareDeleteCommand'; error: Error }

type FeatureTreeContext = {
  targetSourceRange?: SourceRange
  currentOperation?: Operation
}

export const featureTreeMachine = setup({
  types: {
    input: {} as FeatureTreeContext,
    context: {} as FeatureTreeContext,
    events: {} as FeatureTreeEvent,
  },
  guards: {
    codePaneIsOpen: () => false,
  },
  actors: {
    prepareEditCommand: fromPromise(
      ({
        input,
      }: {
        input: EnterEditFlowProps & {
          commandBarSend: (typeof commandBarActor)['send']
        }
      }) => {
        return new Promise((resolve, reject) => {
          const { commandBarSend, ...editFlowProps } = input
          enterEditFlow(editFlowProps)
            .then((result) => {
              if (err(result)) {
                reject(result)
                return
              }
              input.commandBarSend(result)
              resolve(result)
            })
            .catch(reject)
        })
      }
    ),
    sendDeleteCommand: fromPromise(
      ({
        input,
      }: {
        input: {
          artifact: Artifact | undefined
          targetSourceRange: SourceRange | undefined
        }
      }) => {
        return new Promise((resolve, reject) => {
          const { targetSourceRange, artifact } = input
          if (!targetSourceRange) {
            reject(new Error(deletionErrorMessage))
            return
          }

          const pathToNode = getNodePathFromSourceRange(
            kclManager.ast,
            targetSourceRange
          )
          const selection = {
            codeRef: {
              range: targetSourceRange,
              pathToNode,
            },
            artifact,
          }
          deleteSelectionPromise(selection)
            .then((result) => {
              if (err(result)) {
                reject(result)
                return
              }
              resolve(result)
            })
            .catch(reject)
        })
      }
    ),
  },
  actions: {
    saveTargetSourceRange: assign({
      targetSourceRange: ({ event }) =>
        'data' in event && !err(event.data)
          ? event.data.targetSourceRange
          : undefined,
    }),
    saveCurrentOperation: assign({
      currentOperation: ({ event }) =>
        'data' in event && 'currentOperation' in event.data
          ? event.data.currentOperation
          : undefined,
    }),
    clearContext: assign({
      targetSourceRange: undefined,
    }),
    sendSelectionEvent: () => {},
    openCodePane: () => {},
    sendEditFlowStart: () => {},
    scrollToError: () => {},
    sendDeleteSelection: () => {},
  },
}).createMachine({
  /** @xstate-layout N4IgpgJg5mDOIC5QFkD2EwBsCWA7KAxAMICGuAxlgNoAMAuoqAA6qzYAu2qujIAHogC0ANhoBWAHQAOAMwB2KQEY5AFgCcGqWqkAaEAE9Ew0RLEqa64TIBMKmTUXCAvk71oMOfAQDKYdgAJYLDByTm5aBiQQFjYwniiBBEFFcSkJGUVFFWs5NRsxMWE1PUMENUk1ORSVYWyCpSkxFzd0LDxCXwCAW1QAVyDA9hJ2MAjeGI4ueNBE5Joi6S0zHKkamWKDRBkxOVNGvJVstWFZFWaQdzavTv9ybhG+djGoibjeWerdrTspX8UGlS6TYIWoyCTHMRZMQ0fI2aznS6eDp+fy+KBdMC4AIAeQAbmAAE6YEj6WDPZisSbcd5CTI0NSmdT0uQKawnNQqEqISE0CS2WpFcRsmwyBGtJHETEjAm3EgYgkkfzcQLBUJTcnRSlvKKlQSFazSKxqFLCOTQwFAxIyKTCRQSf5qZkOGhmtRijztCTYCCYMAEACiWMJgQA1n5yAALDWvKY0pLWSESdQyW0OKS2NQJrkIOTWBkKBRSFk2lSKBPuq5QL0+v2B6Wh8NRxSRCmxWMJITWWwSVknayKSq-YRiazZ4x2gqQxwqHbaY0VpHV30Bx4E3oYaNa9szIRibQSYTWenG-mVDalHKH9L-OTGM0phee73LgBKYFxqEw+M3bepHaShQMocijQhodjbEU2bKAU6QsvyYhwkoziuBc4pPjWPgAO5gGATA-lS0z8LuHLSJU4ggccNRFtmCYJkm5gcmW9hSDQ8IoYi6HLgAMqgABmTz0OMW5-juAGrD2uYwrYt4pI0NH9gamQ2gUxp5NaZzsWh+BLn63gRlgmD4dqol6r89o0A4xgyDYjgODRdI9kcCjTtkNSPtpz5+gAYtgmC+gJLaar+hGzGIRbSDIM4pr8SGcsCtgWAe9gqHINCrKxjoaS0HoeRhRARnKvGEkZ25EUkoh2qIDhmCx-wnHFF5WCo4LaIC5TQvMhTuVWnkriwBIBUJwVxnquZ8tYWiHmlCYWKOwIgTBLonFZkIJre3U6QQyAkGGJUiWVo1gtFZZFKsh55FBhxgsskIsmpD6aTlPUYQAIsEIwqr6arhIJLzCSFQjpmkd6HLeLI1MI2b2Os405JFsjHGaTSPZWm0ACpgI8gjsKgghEAAgi9e0AwBqg9loSjrFd2RQZFvJaJm9SFIcpYbb12K8bxQQBEwxK4KMv2tgRI22s1jTVcOZYpOIUEaAac6ZPYuQsnIooo4uvUABJtHwxMjWFaQ-KltgFOI2w0b8DIwo6VkOqobMYQACgSqBdEw7DY7jkAcHr-4iN2HLrDkE1mmyig0fYFT5CbA6HNYavZajnkSBG3pgI7fNwAQ+MDdgvEkKE-hQAqTARv4LBML0xIjBAvsmaIki1CxqipYCwdQfMzXRc5UW2rYDu+hIsARqgmEZ2QWc55w+eF8XJCl-4YBu5wkB1wde5pGaqg5FUbLG1B-bAxY5SZnvqvIYni7eGG7CRsQZCUJg1+NmviQpJF6Rsnm2wWZFUGZLsBCRQsjWRqilDaz9b4RgIG9fyYAVToilK-RAUIJCdyLDkR0XYYTZkEPHSQE09zW1NLmEOECb53zuBgReEAOD+AgL0Ak7QGxQOQQgTIeQewOFaixco9I5qlF4aYeORYGY2i7G6dWnpIGRgkDIiMABJDC20wwIIxFifw+Jc7kBIIZQWQVhb-kVkBSyeR36VHkLTdQPZ-hlkaMYVmUjtLyLkRQxRyidrwKCIgjRI8mEAC97i6LYZkLs0gcgzjNjkLIB8UrgisCxCGVE2KX2kW41xjYlHLiINwWA7AFR4H8H47AgSsS6PodgPJD8BaBRjPtN+KQDRhwWgmQEw5IbxWsgaFKKYYTqAieQxsGSoFZL9Dk3AeSCm4E0YSTgOjMAVKqRQGpQ1DGiUyMoe0VQiipVTBkeS9JwTZBDkoNKmYL6oSesM2R8jRnEFyfkkghT8YACFvD+AABohMUNZA8hRenbCYueRAE1jSwQtJHY4FlkapOcek25eUHlTP8K895ABNb5vyajS1yBBHBwJ7B0RAcOGo2R5CKEGVA657jslIqedMsgUBfTfLBaIPe6xtBlh2DRK6B5bwnBdJlHIlKbluLueMyZ9L-C+nwOwKM+i6kkyUpIMKhwzAFC7LaIEF5Jz2iLCOZkZ0sqXNRi4hFtKJmPMKUwQkNrcC0PIFXEgMpaFLMoCEpaNilA7HTP8F0DUQVmjtD8liFkzTN3AU4qsZqxWIstci4ppShh+X0P4XR2AoC4G+ZkNBLJrJLQQghS6I4bHrGhDJAcIqIzUvFXSwpWi5m6MwKm9Nmbvk5D+coDMKZIoCJQfqNBgqHDbNFlWmtcbJWFNgLgee-gcafO+baJM6YSXrAaGFWWCgDx2FvMcKmGgLkcThUM81Yy63TOnbO+dGKFX-TjJkJdeZIRWBAqlUCNE0pgmOH2JYKRjTGqPdG+FsaLWTumWAAAjr0cpMqoByu+aWHs1lDyrQNRYKCxhhDSEBOYewjoByHq0kBk9IGz3xqlUwZ1TbqC3uGkY6CfIZxrFqJmAcUFfjNVYkoB0-YqhhTHae+55HCkEiXqgfEtxz3sDJLRtZZU-1YdkD84dFgUhiCgmDJMP944QyqBkATpGCBvkEJjEIvQRghIQs1Ul-ZGa-EIdmPIkgbzCkhAhSKcgDOZIwlQ+B3sAgMKYfgFhkYWVglSgOVYvDQJ9oQEWXkZZ+wpRZLaB0XmRkTqtdMzCHAy4zoxBATRujegrL+nR9ZZZrPmG9UoPIlQobKEU6WLsM5-g7HS5GO5kZGXwJxp+NhbIZxJiKPDEbqgA05hIgoEc+bDxvopVG6lEh8aYSeQERNQSFmuqGMs-weBeKoAIBAbgYAvS4A-GGCQMAPYbbKZgQQ+3UADZAgaYwI4CgUUzBN-BWGcj8KmhNVYY6VtraKagAJm3Fk7coHt3AB2CCEhdgSCQvNhgHYJF0K7fhBC3eTQ9uHT3ZPGTKv2BC6QumFFvDN4cEd-hJjCqlayNprRSGB6tuhDbsDzKh9U2H8Pjv8zOxd0713BCc-mfjg7z2TAQWHD6vT5R5JHj5GpD7d4NAJxNVfdJIOOezK5+U7bvPHsI4JEjlH1d0eY9F+L3RkvCe1Lvf+fsS7WI1AsHueX9kt1hXkOIbIA4Fps9B6iz5fPDsC9O3gYXWOPYkAAEawEEHwe30vmraDSilU02w2QdIvBTUwYVIQcmMK0gDRGlu64CKHj54fTfm9R+wK3sfBAJ6Tynx70vG4jlzPh4+NQLYlpS2aW01p5CEauS4qvKK3n+DRXXyPQvUCXdF23wQ+hU9E9KokF3zUdju5+cmfsMgoa-3BMoM2tpjBKGD3Q0P8+TeI-BxbtH4PrfY7XxvzvW-6kgscAQ0lFdcRX4E-AlaWZdFLEcVYDQSRWFYjKlafRlX0BfE7JfFfD-fAX0TfR3crEnf-UwAcDPU0OcbVEFZMdINpVTb4coW-AIJA+BR-M3Z-RvZvVfTAsAbA1ZYnHfRwLDU+CxMwT9OSeKKKUwDIbPCaUsMwYHJgXmVNWDOVSTYTLEI7VA6PZfU7fGbwNGQQO4ZQwQBQ+VHAuTHgqwTteOE+UsdQdTeKQ8O0QELII8MtayTMGQuQ6VTEODMuPQsDdgevZgy3N-ZbbQ3Q89Awzw+DH-EmXfa8TMGEA2UsYFBANaK2FiPcGaDkGEWg8uW1TEB1J1F1SpaHBggnVQwXdQ9Aj2G1AkO1fI4kAkQQI3ZZTgsrEwv-HNZQKoVKWac6UAi8GScmcoIoKwDId7bI6o2ornAonnXbRghvQIjHFvCYvIqY+oxooo6pFooWbg9o4NFkC-Ho7+GiPTQYwCEYl7GFLXNJIZLiPAXrVAT8AgbrfAe4-rKIuMIOSqNKXMU4c+OQDTa0AgklFKHYZDTXQDJbW4-mOdB4zACQBRXADgbOCAQrKpAacuVAPAQaVonYhAC0AhL+WwHTRnf+D+O8LsFMOXfYMdKE14uEhEpE0gZZPRYw3EhMWoCg-1GbCRdDeaCwXYL7LIUsUEXDGku4m
  id: 'featureTree',
  description: 'Workflows for interacting with the feature tree pane',
  context: ({ input }) => input,
  states: {
    idle: {
      on: {
        goToKclSource: {
          target: 'goingToKclSource',
          actions: 'saveTargetSourceRange',
        },

        selectOperation: {
          target: 'selecting',
          actions: 'saveTargetSourceRange',
        },

        enterEditFlow: {
          target: 'enteringEditFlow',
          actions: ['saveTargetSourceRange', 'saveCurrentOperation'],
        },

        deleteOperation: {
          target: 'deletingOperation',
          actions: ['saveTargetSourceRange'],
        },

        goToError: 'goingToError',
      },
    },

    goingToKclSource: {
      states: {
        selecting: {
          on: {
            selected: {
              target: 'done',
            },
          },

          entry: ['sendSelectionEvent'],
        },

        done: {
          entry: ['clearContext'],
          always: '#featureTree.idle',
        },

        openingCodePane: {
          on: {
            codePaneOpened: 'selecting',
          },

          entry: 'openCodePane',
        },
      },

      initial: 'openingCodePane',
    },

    selecting: {
      states: {
        selecting: {
          on: {
            selected: 'done',
          },

          entry: 'sendSelectionEvent',
        },

        done: {
          always: '#featureTree.idle',
          entry: 'clearContext',
        },
      },

      initial: 'selecting',
    },

    enteringEditFlow: {
      states: {
        selecting: {
          on: {
            selected: {
              target: 'prepareEditCommand',
              reenter: true,
            },
          },
        },

        done: {
          always: '#featureTree.idle',
        },

        prepareEditCommand: {
          invoke: {
            src: 'prepareEditCommand',
            input: ({ context }) => {
              const artifact = context.targetSourceRange
                ? getArtifactFromRange(
                    context.targetSourceRange,
                    engineCommandManager.artifactGraph
                  ) ?? undefined
                : undefined
              return {
                // currentOperation is guaranteed to be defined here
                operation: context.currentOperation!,
                artifact,
                commandBarSend: commandBarActor.send,
              }
            },
            onDone: {
              target: 'done',
              reenter: true,
            },
            onError: {
              target: 'done',
              reenter: true,
              actions: ({ event }) => {
                if ('error' in event && err(event.error)) {
                  toast.error(event.error.message)
                }
              },
            },
          },
        },
      },

      initial: 'selecting',
      entry: 'sendSelectionEvent',
      exit: ['clearContext'],
    },

    deletingOperation: {
      states: {
        selecting: {
          on: {
            selected: {
              target: 'deletingSelection',
              reenter: true,
            },
          },
        },

        done: {
          always: '#featureTree.idle',
        },

        deletingSelection: {
          invoke: {
            src: 'sendDeleteCommand',
            input: ({ context }) => {
              const artifact = context.targetSourceRange
                ? getArtifactFromRange(
                    context.targetSourceRange,
                    engineCommandManager.artifactGraph
                  ) ?? undefined
                : undefined
              return {
                artifact,
                targetSourceRange: context.targetSourceRange,
              }
            },
            onDone: {
              target: 'done',
              reenter: true,
            },
            onError: {
              target: 'done',
              reenter: true,
              actions: ({ event }) => {
                if ('error' in event && err(event.error)) {
                  toast.error(event.error.message)
                }
              },
            },
          },
        },
      },

      initial: 'selecting',
      entry: 'sendSelectionEvent',
      exit: ['clearContext'],
    },

    goingToError: {
      states: {
        openingCodePane: {
          entry: 'openCodePane',

          on: {
            codePaneOpened: 'done',
          },
        },

        done: {
          entry: 'scrollToError',

          always: '#featureTree.idle',
        },
      },

      initial: 'openingCodePane',
    },
  },

  initial: 'idle',
})