enso/app/gui2/mock/engine.ts
Adam Obuchowicz a6fc8cb932
Reimplement AI PoC from GUI1 (#9476)
Fixes #9313

[Screencast from 2024-03-22 09-09-07.webm](https://github.com/enso-org/enso/assets/3919101/6ad86145-6882-4bde-993d-b1270f1ec06c)

# Important Notes
* This is PoC, so I didn't spend time on polishing the visuals; the design will likely change.
* I modified the shortcut handler a bit, allowing making multiple actions for same binding - the action's handler will be called in unspecified order, until one of them handle the event (i.e. not return false).
* To make it working regardless of imports, I needed to export AI module in Standard.Visualization. Moreover, needed to remove build_ai_prompt for Any, because it was causing issues - expect a bug report soon.
2024-03-25 09:14:41 +00:00

523 lines
18 KiB
TypeScript

import type { MockYdocProviderImpl } from '@/util/crdt'
import * as random from 'lib0/random'
import * as Ast from 'shared/ast'
import {
Builder,
EnsoUUID,
OutboundMessage,
OutboundPayload,
VisualizationContext,
VisualizationUpdate,
} from 'shared/binaryProtocol'
import { mockDataWSHandler as originalMockDataWSHandler } from 'shared/dataServer/mock'
import type {
ContextId,
ExpressionId,
LibraryComponentGroup,
Path,
Uuid,
VisualizationConfiguration,
response,
} from 'shared/languageServerTypes'
import type { SuggestionEntry } from 'shared/languageServerTypes/suggestions'
import { uuidToBits } from 'shared/uuid'
import type { MockTransportData, WebSocketHandler } from 'src/util/net'
import type { QualifiedName } from 'src/util/qualifiedName'
import * as Y from 'yjs'
import { mockFsDirectoryHandle, type FileTree } from '../src/util/convert/fsAccess'
import mockDb from '../stories/mockSuggestions.json' assert { type: 'json' }
const mockProjectId = random.uuidv4() as Uuid
const standardBase = 'Standard.Base' as QualifiedName
export function placeholderGroups(): LibraryComponentGroup[] {
return [
{ color: '#4D9A29', name: 'Input', library: standardBase, exports: [] },
{ color: '#B37923', name: 'Web', library: standardBase, exports: [] },
{ color: '#9735B9', name: 'Parse', library: standardBase, exports: [] },
{ color: '#4D9A29', name: 'Select', library: standardBase, exports: [] },
{ color: '#B37923', name: 'Join', library: standardBase, exports: [] },
{ color: '#9735B9', name: 'Transform', library: standardBase, exports: [] },
{ color: '#4D9A29', name: 'Output', library: standardBase, exports: [] },
]
}
let mainFile = `\
from Standard.Base import all
func1 arg =
f2 = Main.func2 arg
result = f2 - 5
result
func2 a =
r = 42 + a
r
main =
five = 5
ten = 10
sum = five + ten
prod = sum * 3
## This node can be entered
final = Main.func1 prod
list = []
text = 'test'
# Widget tests
data = Data.read
filtered = data.filter
aggregated = data.aggregate
`
export function getMainFile() {
return mainFile
}
export function setMainFile(newMainFile: string) {
return (mainFile = newMainFile)
}
const fileTree = {
src: {
get 'Main.enso'() {
return mainFile
},
},
}
const visualizations = new Map<Uuid, VisualizationConfiguration>()
const visualizationExprIds = new Map<Uuid, ExpressionId>()
const encoder = new TextEncoder()
const encodeJSON = (data: unknown) => encoder.encode(JSON.stringify(data))
const scatterplotJson = encodeJSON({
axis: {
x: { label: 'x-axis label', scale: 'linear' },
y: { label: 'y-axis label', scale: 'logarithmic' },
},
points: { labels: 'visible' },
data: [
{ x: 0.1, y: 0.7, label: 'foo', color: '#FF0000', shape: 'circle', size: 0.2 },
{ x: 0.4, y: 0.2, label: 'baz', color: '#0000FF', shape: 'square', size: 0.3 },
],
})
const mockVizData: Record<string, Uint8Array | ((params: string[]) => Uint8Array)> = {
// JSON
'Standard.Visualization.Preprocessor.default_preprocessor': scatterplotJson,
'Standard.Visualization.Scatter_Plot.process_to_json_text': scatterplotJson,
'Standard.Visualization.SQL.Visualization.prepare_visualization': encodeJSON({
dialect: 'sql',
code: `SELECT * FROM \`foo\` WHERE \`a\` = ? AND b LIKE ?;`,
interpolations: [
// eslint-disable-next-line camelcase
{ enso_type: 'Data.Numbers.Number', value: '123' },
// eslint-disable-next-line camelcase
{ enso_type: 'Builtins.Main.Text', value: "a'bcd" },
],
}),
'Standard.Visualization.Geo_Map.process_to_json_text': encodeJSON({
latitude: 37.8,
longitude: -122.45,
zoom: 15,
controller: true,
showingLabels: true, // Enables presenting labels when hovering over a point.
layers: [
{
type: 'Scatterplot_Layer',
data: [
{
latitude: 37.8,
longitude: -122.45,
color: [255, 0, 0],
radius: 100,
label: 'an example label',
},
],
},
],
}),
'Standard.Visualization.Histogram.process_to_json_text': encodeJSON({
axis: {
x: { label: 'x-axis label', scale: 'linear' },
y: { label: 'y-axis label', scale: 'logarithmic' },
},
color: 'rgb(1.0,0.0,0.0)',
bins: 10,
data: {
values: [0.1, 0.2, 0.1, 0.15, 0.7],
},
}),
'Standard.Visualization.Table.Visualization.prepare_visualization': encodeJSON({
type: 'Matrix',
// eslint-disable-next-line camelcase
column_count: 5,
// eslint-disable-next-line camelcase
all_rows_count: 10,
json: Array.from({ length: 10 }, (_, i) => Array.from({ length: 5 }, (_, j) => `${i},${j}`)),
}),
'Standard.Visualization.Warnings.process_to_json_text': encodeJSON([
'warning 1',
"warning 2!!&<>;'\x22",
]),
'Standard.Visualization.Widgets.get_widget_json': (params) => {
switch (params[0]) {
case '.read':
return encodeJSON([
[
'path',
{
type: 'Widget',
constructor: 'Single_Choice',
label: null,
values: [
{
type: 'Choice',
constructor: 'Option',
value: '"File 1"',
label: 'File 1',
parameters: [],
},
{
type: 'Choice',
constructor: 'Option',
value: '"File 2"',
label: 'File 2',
parameters: [],
},
],
display: { type: 'Display', constructor: 'Always' },
},
],
])
case '.aggregate':
return encodeJSON([
[
'columns',
{
type: 'Widget',
constructor: 'Vector_Editor',
/* eslint-disable camelcase */
item_default: 'Aggregate_Column.Group_By',
item_editor: {
type: 'Widget',
constructor: 'Single_Choice',
label: null,
values: [
{
type: 'Choice',
constructor: 'Option',
value: 'Standard.Table.Data.Aggregate_Column.Aggregate_Column.Group_By',
label: null,
parameters: [
[
'column',
{
type: 'Widget',
constructor: 'Single_Choice',
label: null,
values: [
{
type: 'Choice',
constructor: 'Option',
value: '"column 1"',
label: 'column 1',
parameters: [],
},
{
type: 'Choice',
constructor: 'Option',
value: '"column 2"',
label: 'column 2',
parameters: [],
},
],
display: { type: 'Display', constructor: 'Always' },
},
],
],
},
{
type: 'Choice',
constructor: 'Option',
value: 'Standard.Table.Data.Aggregate_Column.Aggregate_Column.Count',
label: null,
parameters: [],
},
{
type: 'Choice',
constructor: 'Option',
value: 'Standard.Table.Data.Aggregate_Column.Aggregate_Column.Count_Distinct',
label: null,
parameters: [
[
'columns',
{
type: 'Widget',
constructor: 'Single_Choice',
label: null,
values: [
{
type: 'Choice',
constructor: 'Option',
value: '"column 1"',
label: 'column 1',
parameters: [],
},
{
type: 'Choice',
constructor: 'Option',
value: '"column 2"',
label: 'column 2',
parameters: [],
},
],
display: { type: 'Display', constructor: 'Always' },
},
],
],
},
],
display: { type: 'Display', constructor: 'Always' },
},
/* eslint-enable camelcase */
display: { type: 'Display', constructor: 'Always' },
},
],
])
default:
return encodeJSON([])
}
},
'Standard.Visualization.AI.build_ai_prompt': () => encodeJSON('Could you __$$GOAL$$__, please?'),
// The following visualizations do not have unique transformation methods, and as such are only kept
// for posterity.
Image: encodeJSON({
mediaType: 'image/svg+xml',
base64: `PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0\
MCI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBkPSJNMjAuMDUgMEEyMCAyMCAwIDAgMCAwIDIwLjA1IDIwLjA2IDIwLjA\
2IDAgMSAwIDIwLjA1IDBabTAgMzYuMDVjLTguOTMgMC0xNi4xLTcuMTctMTYuMS0xNi4xIDAtOC45NCA3LjE3LTE2LjEgMTYuMS\
0xNi4xIDguOTQgMCAxNi4xIDcuMTYgMTYuMSAxNi4xYTE2LjE4IDE2LjE4IDAgMCAxLTE2LjEgMTYuMVoiLz48cGF0aCBkPSJNM\
jcuMTIgMTcuNzdhNC42OCA0LjY4IDAgMCAxIDIuMzkgNS45MiAxMC4yMiAxMC4yMiAwIDAgMS05LjU2IDYuODZBMTAuMiAxMC4y\
IDAgMCAxIDkuNzcgMjAuMzZzMS41NSAyLjA4IDQuNTcgMi4wOGMzLjAxIDAgNC4zNi0xLjE0IDUuNi0yLjA4IDEuMjUtLjkzIDI\
uMDktMyA1LjItMyAuNzMgMCAxLjQ2LjIgMS45OC40WiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9Ii\
NmZmYiIGQ9Ik0wIDBoNDB2NDBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=`,
}),
Heatmap: encodeJSON([
['A', 'B', 'C', 'D', 'A'],
['D', 'E', 'D', 'X', 'Z'],
[50, 25, 40, 20, 10],
]),
}
function createMessageId(builder: Builder) {
const messageUuid = random.uuidv4()
const [leastSigBits, mostSigBits] = uuidToBits(messageUuid)
return EnsoUUID.createEnsoUUID(builder, leastSigBits, mostSigBits)
}
function createId(id: Uuid) {
const [low, high] = uuidToBits(id)
return (builder: Builder) => EnsoUUID.createEnsoUUID(builder, low, high)
}
function sendVizData(id: Uuid, config: VisualizationConfiguration) {
const vizDataHandler =
mockVizData[
typeof config.expression === 'string' ?
`${config.visualizationModule}.${config.expression}`
: `${config.expression.definedOnType}.${config.expression.name}`
]
if (!vizDataHandler || !sendData) return
const vizData =
vizDataHandler instanceof Uint8Array ? vizDataHandler : (
vizDataHandler(config.positionalArgumentsExpressions ?? [])
)
const builder = new Builder()
const exprId = visualizationExprIds.get(id)
const visualizationContextOffset = VisualizationContext.createVisualizationContext(
builder,
createId(id),
createId(config.executionContextId),
exprId ? createId(exprId) : null,
)
const dataOffset = VisualizationUpdate.createDataVector(builder, vizData)
const payload = VisualizationUpdate.createVisualizationUpdate(
builder,
visualizationContextOffset,
dataOffset,
)
const rootTable = OutboundMessage.createOutboundMessage(
builder,
createMessageId,
null, // correlationId
OutboundPayload.VISUALIZATION_UPDATE,
payload,
)
sendData(builder.finish(rootTable).toArrayBuffer())
}
let sendData: ((data: string | Blob | ArrayBufferLike | ArrayBufferView) => void) | undefined
export const mockLSHandler: MockTransportData = async (method, data, transport) => {
switch (method) {
case 'session/initProtocolConnection':
return {
contentRoots: [{ type: 'Project', id: mockProjectId }],
} satisfies response.InitProtocolConnection
case 'executionContext/create': {
const data_ = data as {
contextId: ContextId
}
setTimeout(
() => transport.emit('executionContext/executionComplete', { contextId: data_.contextId }),
100,
)
return {
contextId: data_.contextId,
}
}
case 'executionContext/attachVisualization': {
const data_ = data as {
visualizationId: Uuid
expressionId: ExpressionId
visualizationConfig: VisualizationConfiguration
}
visualizations.set(data_.visualizationId, data_.visualizationConfig)
visualizationExprIds.set(data_.visualizationId, data_.expressionId)
sendVizData(data_.visualizationId, data_.visualizationConfig)
return
}
case 'executionContext/detachVisualization': {
const data_ = data as {
visualizationId: Uuid
expressionId: ExpressionId
contextId: ContextId
}
visualizations.delete(data_.visualizationId)
visualizationExprIds.delete(data_.visualizationId)
return
}
case 'executionContext/modifyVisualization': {
const data_ = data as {
visualizationId: Uuid
visualizationConfig: VisualizationConfiguration
}
visualizations.set(data_.visualizationId, data_.visualizationConfig)
sendVizData(data_.visualizationId, data_.visualizationConfig)
return
}
case 'executionContext/executeExpression': {
const data_ = data as {
executionContextId: ContextId
visualizationId: Uuid
expressionId: ExpressionId
expression: string
}
const { func, args } = Ast.analyzeAppLike(Ast.parse(data_.expression))
if (!(func instanceof Ast.PropertyAccess && func.lhs)) return
const visualizationConfig: VisualizationConfiguration = {
executionContextId: data_.executionContextId,
visualizationModule: func.lhs.code(),
expression: func.rhs.code(),
positionalArgumentsExpressions: args.map((ast) => ast.code()),
}
visualizationExprIds.set(data_.visualizationId, data_.expressionId)
sendVizData(data_.visualizationId, visualizationConfig)
return
}
case 'search/getSuggestionsDatabase':
return {
entries: mockDb.map((suggestion, id) => ({
id,
suggestion: suggestion as SuggestionEntry,
})),
currentVersion: 1,
} satisfies response.GetSuggestionsDatabase
case 'runtime/getComponentGroups':
return { componentGroups: placeholderGroups() } satisfies response.GetComponentGroups
case 'executionContext/push':
case 'executionContext/pop':
case 'executionContext/recompute':
case 'capability/acquire':
return {}
case 'file/list': {
const data_ = data as { path: Path }
if (!data_.path) return Promise.reject(`'path' parameter missing in '${method}'`)
if (data_.path.rootId !== mockProjectId)
return Promise.reject(
`Only the project's 'rootId' is supported, got '${data_.path.rootId}'`,
)
let child: FileTree | string | ArrayBuffer | undefined = fileTree
if (child) {
for (const segment of data_.path.segments) {
child = child?.[segment]
if (!child || typeof child === 'string' || child instanceof ArrayBuffer) break
}
}
if (!child) return Promise.reject(`Folder '/${data_.path.segments.join('/')}' not found.`)
if (typeof child === 'string' || child instanceof ArrayBuffer)
return Promise.reject(`File '/${data_.path.segments.join('/')}' is not a folder.`)
return {
paths: Object.entries(child).map(([name, entry]) => ({
type: typeof entry === 'string' || entry instanceof ArrayBuffer ? 'File' : 'Directory',
name,
path: { rootId: data_.path.rootId, segments: [...data_.path.segments, name] },
})),
} satisfies response.FileList
}
case 'ai/completion': {
const { prompt } = data
console.log(prompt)
const match = /^"Could you (.*), please\?"$/.exec(prompt)
if (!match) {
return { code: 'How rude!' }
} else if (match[1] === 'convert to table') {
return { code: 'to_table' }
} else {
return { code: '"I don\'t understand, sorry"' }
}
}
default:
return Promise.reject(`Method '${method}' not mocked`)
}
}
const directory = mockFsDirectoryHandle(fileTree, '(root)')
export const mockDataHandler: WebSocketHandler = originalMockDataWSHandler(
async (segments) => {
if (!segments.length) return
let file
try {
let dir = directory
for (const segment of segments.slice(0, -1)) {
dir = await dir.getDirectoryHandle(segment)
}
const fileHandle = await dir.getFileHandle(segments.at(-1)!)
file = await fileHandle.getFile()
} catch {
return
}
return await file?.arrayBuffer()
},
(send) => (sendData = send),
)
export const mockYdocProvider: MockYdocProviderImpl = (msg, room, doc) => {
setTimeout(() => {
const srcFiles: Record<string, string> = fileTree.src
if (room === 'index') {
const modules = doc.getMap('modules')
for (const file in srcFiles) modules.set(file, new Y.Doc({ guid: `mock-${file}` }))
} else if (room.startsWith('mock-')) {
const fileContents = srcFiles[room.slice('mock-'.length)]
if (fileContents) new Ast.MutableModule(doc).syncToCode(fileContents)
}
msg.emit('sync', [])
}, 0)
}