feat(5342): schema composition coordination between LSP, monaco-editor, and UI session store (#5349)

This PR is about a division of responsibilities. The LSP is responsible for generating the correct flux (applyEdits), the session store is the src of truth for UI state, the monaco-editor has control over everything within the code block and determines the pixel location of the lines, and UI elements are our clickable affordances. And then we need something to coordinate communication btwn the parts -- that is the LspConnectionManager.

the LspConnectionManger holds a pointer reference to each object, and holds the minimum state necessary to do it's job (e.g. diff'ing old versus new session, to minimize updates and prevent looping callbacks).

Author: wiedld

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -22,6 +22,7 @@ import {SidebarProvider} from 'src/dataExplorer/context/sidebar'
 import {
   PersistanceProvider,
   PersistanceContext,
+  DEFAULT_SCHEMA,
 } from 'src/dataExplorer/context/persistance'
 import ResultsPane from 'src/dataExplorer/components/ResultsPane'
 import Sidebar from 'src/dataExplorer/components/Sidebar'
@@ -42,7 +43,7 @@ const FluxQueryBuilder: FC = () => {
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
     setQuery('')
-    setSelection({bucket: null, measurement: ''})
+    setSelection(JSON.parse(JSON.stringify(DEFAULT_SCHEMA)))
   }, [setQuery, setStatus, setResult, setSelection, cancel])
 
   return (

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -86,9 +86,7 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   }, [selection.bucket])
 
   const handleSelectBucket = (bucket: Bucket): void => {
-    selection.bucket = bucket
-    selection.measurement = ''
-    setSelection({...selection})
+    setSelection({bucket, measurement: ''})
 
     // Reset measurement, tags, and fields
     resetFields()
@@ -99,8 +97,7 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   }
 
   const handleSelectMeasurement = (measurement: string): void => {
-    selection.measurement = measurement
-    setSelection({...selection})
+    setSelection({measurement})
 
     // Inject measurement
     injectViaLsp(ExecuteCommand.InjectionMeasurement, {

src/dataExplorer/context/persistance.tsx

@@ -1,43 +1,58 @@
-import React, {FC, createContext} from 'react'
-import {TimeRange} from 'src/types'
+import React, {FC, createContext, useCallback} from 'react'
+import {TimeRange, RecursivePartial} from 'src/types'
 import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
 import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 import {Bucket} from 'src/types'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
-interface MeasurementSelection {
+interface SchemaComposition {
+  synced: boolean // true == can modify session's schema
+  diverged: boolean // true == cannot re-sync. (e.g. user has typed in the composition block)
+}
+
+export interface SchemaSelection {
   bucket: Bucket
   measurement: string
+  fields: string[]
+  composition: SchemaComposition
 }
 
 interface ContextType {
   horizontal: number[]
   vertical: number[]
   range: TimeRange
   query: string
-  selection: MeasurementSelection
+  selection: SchemaSelection
 
   setHorizontal: (val: number[]) => void
   setVertical: (val: number[]) => void
   setRange: (val: TimeRange) => void
   setQuery: (val: string) => void
-  setSelection: (val: MeasurementSelection) => void
+  setSelection: (val: RecursivePartial<SchemaSelection>) => void
+}
+
+export const DEFAULT_SCHEMA = {
+  bucket: null,
+  measurement: null,
+  fields: [],
+  composition: {
+    synced: false,
+    diverged: false,
+  },
 }
 
 const DEFAULT_CONTEXT = {
   horizontal: [0.2],
   vertical: [0.25, 0.8],
   range: DEFAULT_TIME_RANGE,
   query: '',
-  selection: {
-    bucket: null,
-    measurement: '',
-  },
+  selection: DEFAULT_SCHEMA,
 
   setHorizontal: (_: number[]) => {},
   setVertical: (_: number[]) => {},
   setRange: (_: TimeRange) => {},
   setQuery: (_: string) => {},
-  setSelection: (_: MeasurementSelection) => {},
+  setSelection: (_: RecursivePartial<SchemaSelection>) => {},
 }
 
 export const PersistanceContext = createContext<ContextType>(DEFAULT_CONTEXT)
@@ -68,6 +83,28 @@ export const PersistanceProvider: FC = ({children}) => {
     JSON.parse(JSON.stringify(DEFAULT_CONTEXT.selection))
   )
 
+  const setSchemaSelection = useCallback(
+    schema => {
+      if (
+        isFlagEnabled('schemaComposition') &&
+        selection.composition?.diverged
+      ) {
+        // TODO: how message to user?
+        return
+      }
+      const nextState = {
+        ...selection,
+        ...schema,
+        composition: {
+          ...(selection.composition || {}),
+          ...(schema.composition || {}),
+        },
+      }
+      setSelection(nextState)
+    },
+    [selection, selection.composition, setSelection]
+  )
+
   return (
     <PersistanceContext.Provider
       value={{
@@ -81,7 +118,7 @@ export const PersistanceProvider: FC = ({children}) => {
         setVertical,
         setRange,
         setQuery,
-        setSelection,
+        setSelection: setSchemaSelection,
       }}
     >
       {children}

src/languageSupport/languages/flux/lsp/connection.ts

@@ -5,6 +5,10 @@ import {format_from_js_file} from '@influxdata/flux-lsp-browser'
 import {EditorType, Variable} from 'src/types'
 import {buildUsedVarsOption} from 'src/variables/utils/buildVarsOption'
 
+// handling schema composition
+import {RecursivePartial} from 'src/types'
+import {SchemaSelection} from 'src/dataExplorer/context/persistance'
+
 // LSP methods
 import {
   didOpen,
@@ -18,11 +22,24 @@ import {
 // error reporting
 import {reportErrorThroughHoneyBadger} from 'src/shared/utils/errors'
 
+const ICON_SYNC_CLASSNAME = 'composition-sync'
+export const ICON_SYNC_ID = 'schema-composition-sync-icon'
+
+// hardcoded in LSP
+const COMPOSITION_YIELD = '_editor_composition'
+const COMPOSITION_INIT_LINE = 1
+
 class LspConnectionManager {
   private _worker: Worker
+  private _editor: EditorType
   private _model: MonacoTypes.editor.IModel
   private _preludeModel: MonacoTypes.editor.IModel
   private _variables: Variable[] = []
+  private _compositionStyle: string[] = []
+  private _session: SchemaSelection
+  private _callbackSetSession: (
+    schema: RecursivePartial<SchemaSelection>
+  ) => void = () => null
 
   constructor(worker: Worker) {
     this._worker = worker
@@ -56,6 +73,7 @@ class LspConnectionManager {
   }
 
   subscribeToModel(editor: EditorType) {
+    this._editor = editor
     this._model = editor.getModel()
 
     this._model.onDidChangeContent(() => this.updatePreludeModel())
@@ -91,6 +109,210 @@ class LspConnectionManager {
     this._worker.postMessage(msg)
   }
 
+  _getCompositionBlockLines() {
+    const query = this._model.getValue()
+    const startLine = COMPOSITION_INIT_LINE
+    const endLine =
+      (query.split('\n').findIndex(line => line.includes(COMPOSITION_YIELD)) ||
+        0) + 1
+    return {startLine, endLine}
+  }
+
+  _setSessionSync(synced: boolean) {
+    this._callbackSetSession({
+      composition: {synced},
+    })
+  }
+
+  _setEditorSyncToggle() {
+    setTimeout(() => {
+      // elements in monaco-editor. positioned by editor.
+      const syncIcons = document.getElementsByClassName(ICON_SYNC_CLASSNAME)
+
+      // UI elements we control
+      const clickableInvisibleDiv = document.getElementById(ICON_SYNC_ID)
+      if (!syncIcons.length || !clickableInvisibleDiv) {
+        return
+      }
+
+      const [upperIcon] = syncIcons
+      let [, lowerIcon] = syncIcons
+      if (!lowerIcon) {
+        lowerIcon = upperIcon
+      }
+      const {startLine, endLine} = this._getCompositionBlockLines()
+
+      // move div to match monaco-editor coordinates
+      clickableInvisibleDiv.style.top =
+        ((upperIcon as any).offsetTop || 0) + 'px'
+      const height =
+        ((lowerIcon as any).offsetHeight || 0) * (endLine - startLine + 1) +
+        ((upperIcon as any).offsetTop || 0)
+      clickableInvisibleDiv.style.height = height + 'px'
+      clickableInvisibleDiv.style.width =
+        ((upperIcon as any).offsetWidth || 0) + 'px'
+
+      // add listeners
+      clickableInvisibleDiv.removeEventListener('click', () =>
+        this._setSessionSync(!this._session.composition.synced)
+      ) // may have existing
+      clickableInvisibleDiv.addEventListener('click', () =>
+        this._setSessionSync(!this._session.composition.synced)
+      )
+    }, 1000)
+  }
+
+  _editorChangeIsFromLsp(change) {
+    return !!change.forceMoveMarkers
+  }
+
+  _setEditorIrreversibleExit() {
+    this._model.onDidChangeContent(e => {
+      const {changes} = e
+      changes.some(change => {
+        const {startLine, endLine} = this._getCompositionBlockLines()
+        if (
+          change.range.startLineNumber >= startLine &&
+          change.range.endLineNumber <= endLine &&
+          !this._editorChangeIsFromLsp(change) &&
+          !this._session.composition.diverged
+        ) {
+          this._callbackSetSession({
+            composition: {synced: false, diverged: true},
+          })
+          return
+        }
+      })
+    })
+  }
+
+  _setEditorBlockStyle() {
+    const {startLine, endLine} = this._getCompositionBlockLines()
+
+    const startLineStyle = [
+      {
+        range: new MonacoTypes.Range(startLine, 1, startLine, 1),
+        options: {
+          linesDecorationsClassName: ICON_SYNC_CLASSNAME,
+        },
+      },
+    ]
+    const endLineStyle = [
+      {
+        range: new MonacoTypes.Range(endLine, 1, endLine, 1),
+        options: {
+          linesDecorationsClassName: ICON_SYNC_CLASSNAME,
+        },
+      },
+    ]
+
+    const removeAllStyles = this._session.composition.diverged
+
+    this._compositionStyle = this._editor.deltaDecorations(
+      this._compositionStyle,
+      removeAllStyles ? [] : startLineStyle.concat(endLineStyle)
+    )
+
+    const clickableInvisibleDiv = document.getElementById(ICON_SYNC_ID)
+    clickableInvisibleDiv.style.background = this._session.composition.synced
+      ? 'blue'
+      : 'grey'
+
+    if (removeAllStyles) {
+      clickableInvisibleDiv.style.display = 'none'
+    }
+  }
+
+  _initLsp(schema: SchemaSelection) {
+    const {bucket, measurement} = schema
+    const payload = {bucket: bucket?.name}
+    if (measurement) {
+      payload['measurement'] = measurement
+    }
+    // TODO: finish LSP update first
+    // this.inject(ExecuteCommand.CompositionInit, payload)
+  }
+
+  _updateLsp(_: SchemaSelection) {
+    // TODO: finish LSP update first
+    // this.inject(ExecuteCommand.Composition<Something>, payload)
+  }
+
+  _initComposition(schema: SchemaSelection) {
+    if (!schema.composition.synced) {
+      this._setSessionSync(true)
+    }
+
+    this._initLsp(schema)
+
+    // handlers to trigger end composition
+    this._setEditorSyncToggle()
+    this._setEditorIrreversibleExit()
+
+    // handlers for composition block size
+    // eventually, this could be from the LSP response. onLspMessage()
+    this._model.onDidChangeContent(
+      () => this._session.composition?.synced && this._setEditorBlockStyle()
+    )
+
+    // TODO: for now, set style on init. Eventually use this.onLspMessage()
+    this._setEditorBlockStyle()
+  }
+
+  _restoreComposition(schema: SchemaSelection) {
+    this._initLsp(schema)
+    this._updateLsp(schema)
+  }
+
+  onSchemaSessionChange(schema: SchemaSelection, sessionCb) {
+    this._callbackSetSession = sessionCb
+    const previousState = {
+      ...this._session,
+      composition: {...(this._session?.composition || {})},
+    }
+    this._session = {...schema, composition: {...schema.composition}}
+
+    if (!schema.composition) {
+      // FIXME: message to user, to create a new script
+      console.error(
+        'User has an old session, which does not support schema composition.'
+      )
+      return
+    }
+
+    if (!previousState.bucket && schema.bucket) {
+      // TODO: if also already have fields and tagValues, then _restoreComposition()
+      const hasFieldsOrTagvalues = false
+      if (hasFieldsOrTagvalues) {
+        return this._restoreComposition(schema)
+      }
+      return this._initComposition(schema)
+    }
+
+    // TODO: decide on tag and tagValues.
+    // Inject on same or different lines? then...how model in session?
+    const tagsDidUpdate = false
+
+    if (
+      previousState.fields?.length != schema.fields?.length ||
+      tagsDidUpdate
+    ) {
+      return this._updateLsp(schema)
+    }
+
+    if (previousState.composition != schema.composition) {
+      return this._setEditorBlockStyle()
+    }
+  }
+
+  onLspMessage(_jsonrpcMiddlewareResponse: unknown) {
+    // TODO: Q4
+    // 1. middleware detects jsonrpc
+    // 2. call this method
+    // 3a. update (true-up) session store
+    // 3b. this._setEditorBlockStyle()
+  }
+
   dispose() {
     this._model.onDidChangeContent(null)
   }