Просмотр исходного кода

[editor] Make namespace and compute check async to speed up rendering of the AceEditor component

Johan Ahlen 5 лет назад
Родитель
Сommit
c99f3e5fe5

+ 9 - 1
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/AceLocationHandler.ts

@@ -111,6 +111,7 @@ export default class AceLocationHandler implements Disposable {
   subTracker: SubscriptionTracker = new SubscriptionTracker();
   availableDatabases = new Set<string>();
   verifyThrottle = -1;
+  updateTimeout = -1;
   sqlSyntaxWorkerSub?: HueSubscription;
 
   constructor(options: {
@@ -129,10 +130,17 @@ export default class AceLocationHandler implements Disposable {
     this.attachMouseListeners();
 
     this.subTracker.subscribe(this.executor.connector, this.updateAvailableDatabases.bind(this));
+    this.subTracker.trackTimeout(this.verifyThrottle);
+    this.subTracker.trackTimeout(this.updateTimeout);
     this.updateAvailableDatabases();
   }
 
   private updateAvailableDatabases() {
+    window.clearTimeout(this.updateTimeout);
+    if (!this.executor.namespace() || !this.executor.compute()) {
+      this.updateTimeout = window.setTimeout(this.updateAvailableDatabases.bind(this), 300);
+      return;
+    }
     dataCatalog
       .getChildren({
         connector: this.executor.connector(),
@@ -954,7 +962,7 @@ export default class AceLocationHandler implements Disposable {
   }
 
   verifyExists(tokens: Ace.HueToken[], allLocations: IdentifierLocation[]): void {
-    window.clearInterval(this.verifyThrottle);
+    window.clearTimeout(this.verifyThrottle);
     this.clearMarkedErrors('warning');
 
     if (!this.sqlSyntaxWorkerSub) {

+ 0 - 2
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -900,7 +900,6 @@
         <div class="clearfix margin-bottom-20"></div>
         <!-- /ko -->
 
-        <!-- ko if: namespace() && compute() -->
         <ace-editor-ko-bridge data-bind="
           vueEvents: {
             'ace-created': function (event) {
@@ -919,7 +918,6 @@
             }
           }
         "></ace-editor-ko-bridge>
-        <!-- /ko -->
         <!-- ko component: { name: 'hue-editor-droppable-menu', params: { editor: ace.bind($data), parentDropTarget: '.editor' } } --><!-- /ko -->
 
 ##         <div class="ace-editor" data-bind="