-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactor monaco initialization (#1012)
all removed files: ``` DiffEditorComponent.js MonacoEditorComponent.js resize.js block_details.js ``` refactored ResizableLayout to house the functionality in a reusable dp. Results are some absurdly fast transitions between tabs. New [Resizable Editor File](https://github.com/near/queryapi/blob/f00ab7dc8fa65199a40de1b638970479760b6bfe/frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx) Encompasses logic from **MonacoEditorComponent**,**DiffEditorComponent**, **ResizableLayout**, **ResizeableLayoutEditor** Upon refactoring resizable (resize.js), and block_details.js were removed as there are no real functionality used around them.
- Loading branch information
1 parent
0507e3a
commit 8dd78c7
Showing
6 changed files
with
99 additions
and
2,095 deletions.
There are no files selected for viewing
14 changes: 0 additions & 14 deletions
14
frontend/src/components/Editor/EditorComponents/DiffEditorComponent.jsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 0 additions & 22 deletions
22
frontend/src/components/Editor/EditorComponents/MonacoEditorComponent.jsx
This file was deleted.
Oops, something went wrong.
263 changes: 94 additions & 169 deletions
263
frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,189 +1,114 @@ | ||
| import { DiffEditorComponent } from './DiffEditorComponent'; | ||
| import { MonacoEditorComponent } from './MonacoEditorComponent'; | ||
| import { defaultCode, defaultSchema } from '@/utils/formatters'; | ||
| import { useDragResize } from '@/utils/resize'; | ||
| import React from 'react'; | ||
| import MonacoEditor, { DiffEditor } from '@monaco-editor/react'; | ||
| import GraphqlPlayground from '../../Playground'; | ||
|
|
||
| const containerStyle = { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| width: '100%', | ||
| height: '100vh', | ||
| const editorOptions = { | ||
| wordWrap: 'on', | ||
| minimap: { enabled: false }, | ||
| folding: false, | ||
| lineNumberMinChars: 3, | ||
| scrollBeyondLastLine: true, | ||
| automaticLayout: true, | ||
| formatOnPaste: true, | ||
| definitionLinkOpensInPeek: true, | ||
| font: 'serif', | ||
| }; | ||
|
|
||
| const editorContainerStyle = { | ||
| width: '100%', | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| minWidth: '100px', | ||
| }; | ||
| const getEditorOptions = (options, readOnly) => ({ | ||
| ...options, | ||
| readOnly, | ||
| }); | ||
|
|
||
| const dragBarStyle = { | ||
| width: '10px', | ||
| backgroundColor: 'gray', | ||
| cursor: 'col-resize', | ||
| }; | ||
| const getDiffEditorOptions = (options, readOnly) => ({ | ||
| ...options, | ||
| readOnly, | ||
| }); | ||
|
|
||
| const getDefaultValues = (launchPadDefault, context, original) => launchPadDefault || context || original; | ||
|
|
||
| const ResizableEditor = ({ | ||
| accountId, | ||
| const ResizableLayoutEditor = ({ | ||
| fileName, | ||
| blockView, | ||
| diffView, | ||
| consoleView, | ||
| onChangeCode, | ||
| onChangeSchema, | ||
| block_details, | ||
| launchPadDefaultSchema, | ||
| contextSchema, | ||
| originalSQLCode, | ||
| launchPadDefaultCode, | ||
| contextCode, | ||
| originalIndexingCode, | ||
| schema, | ||
| indexingCode, | ||
| onMount, | ||
| isCreateNewIndexer, | ||
| onMount, | ||
| onChangeSchema, | ||
| onChangeCode, | ||
| }) => { | ||
| const { firstRef, secondRef, dragBarRef } = useDragResize({ | ||
| direction: 'horizontal', | ||
| initiallyHidden: null, | ||
| defaultSizeRelation: 3, | ||
| sizeThresholdFirst: 60, | ||
| sizeThresholdSecond: 60, | ||
| }); | ||
| const determineEditorProps = () => { | ||
| const isSchemaEditor = fileName === 'schema.sql'; | ||
| const isCodeEditor = fileName === 'indexer.js'; | ||
|
|
||
| // Render logic based on fileName | ||
| const editorComponents = { | ||
| GraphiQL: () => <GraphqlPlayground />, | ||
| 'indexer.js': () => | ||
| diffView ? ( | ||
| <DiffEditorComponent | ||
| key="code-diff" | ||
| original={originalIndexingCode} | ||
| modified={indexingCode} | ||
| language="typescript" | ||
| readOnly={false} | ||
| onMount={onMount} | ||
| /> | ||
| ) : ( | ||
| <MonacoEditorComponent | ||
| key="code-editor" | ||
| value={indexingCode} | ||
| height="100vh" | ||
| defaultValue={defaultCode} | ||
| defaultLanguage="typescript" | ||
| readOnly={false} | ||
| onChange={onChangeCode} | ||
| onMount={onMount} | ||
| options={{ | ||
| wordWrap: 'on', | ||
| minimap: { enabled: false }, | ||
| folding: false, | ||
| lineNumberMinChars: 3, | ||
| scrollBeyondLastLine: true, | ||
| automaticLayout: true, | ||
| formatOnPaste: true, | ||
| definitionLinkOpensInPeek: true, | ||
| // glyphMargin: true, | ||
| font: 'serif', | ||
| }} | ||
| /> | ||
| ), | ||
| 'schema.sql': () => | ||
| diffView ? ( | ||
| <DiffEditorComponent | ||
| key="schema-diff" | ||
| original={originalSQLCode} | ||
| modified={schema} | ||
| language="sql" | ||
| readOnly={isCreateNewIndexer === true ? false : true} | ||
| onMount={onMount} | ||
| /> | ||
| ) : ( | ||
| <MonacoEditorComponent | ||
| key="schema-editor" | ||
| value={schema} | ||
| defaultValue={defaultSchema} | ||
| defaultLanguage="sql" | ||
| readOnly={isCreateNewIndexer === true ? false : false} | ||
| onChange={onChangeSchema} | ||
| onMount={onMount} | ||
| options={{ | ||
| wordWrap: 'on', | ||
| minimap: { enabled: false }, | ||
| folding: false, | ||
| lineNumberMinChars: 3, | ||
| scrollBeyondLastLine: true, | ||
| automaticLayout: true, | ||
| formatOnPaste: true, | ||
| definitionLinkOpensInPeek: true, | ||
| glyphMargin: true, | ||
| font: 'serif', | ||
| }} | ||
| if (!isSchemaEditor && !isCodeEditor) return null; | ||
|
|
||
| const defaultValue = isSchemaEditor | ||
| ? getDefaultValues(launchPadDefaultSchema, contextSchema, originalSQLCode) | ||
| : getDefaultValues(launchPadDefaultCode, contextCode, originalIndexingCode); | ||
|
|
||
| const value = isSchemaEditor ? schema : indexingCode; | ||
| const readOnly = isSchemaEditor && !isCreateNewIndexer; | ||
|
|
||
| return { | ||
| editorProps: { | ||
| onMount, | ||
| options: getEditorOptions(editorOptions, readOnly), | ||
| defaultValue, | ||
| value, | ||
| readOnly, | ||
| onChange: isSchemaEditor ? onChangeSchema : onChangeCode, | ||
| language: isSchemaEditor ? 'sql' : 'typescript', | ||
| }, | ||
| diffProps: { | ||
| original: defaultValue, | ||
| modified: value, | ||
| language: isSchemaEditor ? 'sql' : 'typescript', | ||
| readOnly, | ||
| options: getDiffEditorOptions(editorOptions, readOnly), | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| const renderEditor = () => { | ||
| if (fileName === 'GraphiQL') return <GraphqlPlayground />; | ||
|
|
||
| const { editorProps, diffProps } = determineEditorProps(); | ||
|
|
||
| if (diffView) { | ||
| return ( | ||
| <DiffEditor | ||
| key={`${fileName}-diff`} | ||
| original={diffProps.original} | ||
| modified={diffProps.modified} | ||
| language={diffProps.language} | ||
| onMount={editorProps.onMount} | ||
| options={diffProps.options} | ||
| theme="vs-dark" | ||
| /> | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <MonacoEditor | ||
| key={`${fileName}-editor`} | ||
| value={editorProps.value} | ||
| defaultValue={editorProps.defaultValue} | ||
| defaultLanguage={editorProps.language} | ||
| onMount={editorProps.onMount} | ||
| onChange={editorProps.onChange} | ||
| options={editorProps.options} | ||
| theme="vs-dark" | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={containerStyle}> | ||
| <div ref={firstRef} style={editorContainerStyle}> | ||
| {editorComponents[fileName] && editorComponents[fileName]()} | ||
| </div> | ||
| <div ref={dragBarRef} style={dragBarStyle} /> | ||
| </div> | ||
| ); | ||
| return <div className="h-[85vh]">{renderEditor()}</div>; | ||
| }; | ||
|
|
||
| export default function ResizableLayoutEditor({ | ||
| accountId, | ||
| fileName, | ||
| blockView, | ||
| diffView, | ||
| consoleView, | ||
| onChangeCode, | ||
| onChangeSchema, | ||
| block_details, | ||
| originalSQLCode, | ||
| originalIndexingCode, | ||
| schema, | ||
| indexingCode, | ||
| onMount, | ||
| isCreateNewIndexer, | ||
| launchPadDefaultCode, | ||
| launchPadDefaultSchema, | ||
| contextCode, | ||
| contextSchema, | ||
| }) { | ||
| const { | ||
| dragBarRef: dragBarRefConsole, | ||
| firstRef: firstRefEditor, | ||
| secondRef: secondRefConsole, | ||
| } = useDragResize({ | ||
| direction: 'vertical', | ||
| initiallyHidden: 'second', | ||
| defaultSizeRelation: 3, | ||
| sizeThresholdFirst: 60, | ||
| sizeThresholdSecond: 20, | ||
| }); | ||
|
|
||
| const defaultCode = launchPadDefaultCode ? launchPadDefaultCode : contextCode ? contextCode : originalIndexingCode; | ||
| const defaultSchema = launchPadDefaultSchema ? launchPadDefaultSchema : contextSchema ? contextSchema : originalSQLCode; | ||
|
|
||
| return ( | ||
| <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}> | ||
| {/* Code Editor */} | ||
| <div ref={firstRefEditor} style={{ overflow: 'auto' }}> | ||
| <ResizableEditor | ||
| accountId={accountId} | ||
| fileName={fileName} | ||
| blockView={blockView} | ||
| diffView={diffView} | ||
| onChangeCode={onChangeCode} | ||
| onChangeSchema={onChangeSchema} | ||
| block_details={block_details} | ||
| indexingCode={indexingCode} | ||
| originalIndexingCode={defaultCode} | ||
| schema={schema} | ||
| originalSQLCode={defaultSchema} | ||
| onMount={onMount} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| export default React.memo(ResizableLayoutEditor); |
Oops, something went wrong.