Fix of oppia#16195: Highlight is not working properly in "Exploration…

… Overview" when on "Translations" fixed, State-graph not showing warning fixed (oppia#16209) * nits * fix 2 * done * done * done * done * done * dupated * done * Update core/templates/pages/exploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.ts Co-authored-by: Rijuta Singh <[email protected]> * riju Co-authored-by: Rijuta Singh <[email protected]>
anugoyal998 · Oct 10, 2022 · b0147ae · b0147ae
1 parent aca1f19
commit b0147ae
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 16 deletions.
diff --git a/...ation-editor-page/editor-tab/graph-directives/state-graph-visualization.component.spec.ts b/...ation-editor-page/editor-tab/graph-directives/state-graph-visualization.component.spec.ts
@@ -113,6 +113,24 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
       style: 'string',
       nodeClass: 'string',
       canDelete: true
+    },
+    state_4: {
+      depth: 3,
+      offset: 0,
+      reachable: true,
+      y0: 10,
+      x0: 10,
+      yLabel: 5,
+      xLabel: 5,
+      height: 10,
+      width: 100,
+      id: 'node_1',
+      label: 'This is a label for node 4',
+      reachableFromEnd: true,
+      secondaryLabel: '2nd',
+      style: 'string',
+      nodeClass: 'string',
+      canDelete: true
     }
   };
 
@@ -157,7 +175,7 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
     }).compileComponents();
   }));
 
-  beforeEach(() => {
+  beforeEach(fakeAsync(() => {
     fixture = TestBed.createComponent(StateGraphVisualization);
     component = fixture.componentInstance;
 
@@ -224,13 +242,16 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
     };
     component.currentStateId = 'state_1';
     component.ngOnInit();
-  });
+    tick();
+    flush();
+  }));
 
 
-  afterEach(() => {
+  afterEach(fakeAsync(() => {
     component.ngOnDestroy();
+    flush();
     fixture.destroy();
-  });
+  }));
 
   it('should call redrawGraph when graphData has updated', fakeAsync(() => {
     spyOn(component, 'redrawGraph').and.stub();
@@ -249,11 +270,12 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
   }));
 
   it('should initialize $scope properties after controller is initialized',
-    () => {
+    fakeAsync(() => {
       component.versionGraphData = graphData;
       component.ngOnInit();
+      tick();
 
-      expect(component.graphLoaded).toBe(false);
+      expect(component.graphLoaded).toBeTrue();
       expect(component.GRAPH_WIDTH).toBe(630);
       expect(component.GRAPH_HEIGHT).toBe(280);
       expect(component.VIEWPORT_WIDTH).toBe('10000px');
@@ -265,8 +287,10 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
 
       expect(component.augmentedLinks[0].style).toBe(
         'string');
-      expect(component.nodeList.length).toBe(2);
-    });
+      expect(component.nodeList.length).toBe(3);
+
+      flush();
+    }));
 
   it('should check if can navigate to node whenever node id is equal to' +
       ' current state id', fakeAsync(() => {
@@ -283,6 +307,8 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
 
   it('should get node complete title with its secondary label and' +
       ' warnings', () => {
+    spyOn(component, 'getNodeErrorMessage').and.returnValue('warning');
+
     expect(component.getNodeTitle(nodes.state_1)).toBe(
       'This is a label for node 1 Second label for node 1 ' +
         '(Warning: this state is unreachable.)');
@@ -291,6 +317,9 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
       'This is a label for node 3 This is a secondary label for ' +
         'state_3 (Warning: there is no path from this state to the ' +
         'END state.)');
+
+    expect(component.getNodeTitle(nodes.state_4)).toBe(
+      'This is a label for node 4 2nd (warning)');
   });
 
   it('should get truncated label with truncate filter', () => {
@@ -315,6 +344,9 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
   });
 
   it('should center the graph', fakeAsync(() => {
+    component.ngOnInit();
+    tick();
+
     component.graphData = graphData;
     component.centerAtCurrentState = true;
     component.graphBounds = {
@@ -366,6 +398,14 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
 
   it('should center graph when centerGraph flag is broadcasted and transform' +
     ' x and y axis to 0', fakeAsync(() => {
+    spyOn(component, 'getElementDimensions').and.returnValue({
+      w: 1000,
+      h: 1000
+    });
+
+    component.ngOnInit();
+    tick();
+
     spyOn(stateGraphLayoutService, 'getGraphBoundaries').and.returnValue({
       bottom: 20,
       left: 10,
@@ -396,11 +436,15 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
     tick();
     flush();
 
-    expect(component.overallTransformStr).toBe('translate(0,0)');
+    expect(component.innerTransformStr).toBe(
+      'translate(10,20)');
   }));
 
   it('should center graph when centerGraph flag is broadcasted and transform' +
     ' x and y axis to 10, 20', fakeAsync(() => {
+    component.ngOnInit();
+    tick();
+
     spyOn(component, 'getElementDimensions').and.returnValue({
       w: 1000,
       h: 1000
@@ -446,6 +490,7 @@ describe('State Graph Visualization Component when graph is redrawn', () => {
 
     expect(d3.event.transform.x).toBe(0);
     expect(d3.event.transform.y).toBe(0);
-    expect(component.overallTransformStr).toBe('translate(0,0)');
+    expect(component.overallTransformStr).toBe(
+      'translate(465,487.5)');
   }));
 });
diff --git a/...xploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.ts b/...xploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.ts
@@ -325,6 +325,8 @@ export class StateGraphVisualization
       warning = (
         'Warning: there is no path from this state to the END state.'
       );
+    } else {
+      warning = this.getNodeErrorMessage(node.label);
     }
 
     let tooltip = node.label;
@@ -451,15 +453,16 @@ export class StateGraphVisualization
       this.nodeList.push(this.nodeData[nodeId]);
     }
 
-    this.overallTransformStr = 'translate(0,0)';
-    this.innerTransformStr = 'translate(0,0)';
-
     if (this.allowPanning) {
       this.makeGraphPannable();
     }
 
     if (this.centerAtCurrentState) {
-      this.centerGraph();
+      // SetTimeout is required to ensure code runs
+      // once all the current call stack has finished execution.
+      setTimeout(() => {
+        this.centerGraph();
+      });
     }
   }
 
@@ -478,10 +481,17 @@ export class StateGraphVisualization
   }
 
   ngOnInit(): void {
+    this.overallTransformStr = 'translate(0,0)';
+    this.innerTransformStr = 'translate(0,0)';
+
     this.directiveSubscriptions.add(
       this.routerService.onCenterGraph.subscribe(() => {
-        this.centerGraph();
-        this.redrawGraph();
+        // SetTimeout is required to ensure code runs
+        // once all the current call stack has finished execution.
+        setTimeout(() => {
+          this.centerGraph();
+          this.redrawGraph();
+        });
       })
     );
 

diff --git a/...ranslation-tab/state-translation-status-graph/state-translation-status-graph.component.ts b/...ranslation-tab/state-translation-status-graph/state-translation-status-graph.component.ts
@@ -42,10 +42,12 @@ angular.module('oppia').component('stateTranslationStatusGraph', {
   template: require('./state-translation-status-graph.component.html'),
   controller: [
     '$scope', 'ExplorationStatesService', 'GraphDataService',
+    'RouterService',
     'StateEditorService', 'StateRecordedVoiceoversService',
     'StateWrittenTranslationsService', 'TranslationStatusService',
     function(
         $scope, ExplorationStatesService, GraphDataService,
+        RouterService,
         StateEditorService, StateRecordedVoiceoversService,
         StateWrittenTranslationsService, TranslationStatusService) {
       var ctrl = this;
@@ -78,6 +80,8 @@ angular.module('oppia').component('stateTranslationStatusGraph', {
         }
 
         $scope.$apply();
+
+        RouterService.onCenterGraph.emit();
       };
     }
   ]

diff --git a/...loration-editor-page/translation-tab/translator-overview/translator-overview.component.ts b/...loration-editor-page/translation-tab/translator-overview/translator-overview.component.ts
@@ -126,6 +126,8 @@ angular.module('oppia').component('translatorOverview', {
 
         $window.localStorage.setItem(
           LAST_SELECTED_TRANSLATION_LANGUAGE, $scope.languageCode);
+
+        RouterService.onCenterGraph.emit();
       };
 
       $scope.getTranslationProgressAriaLabel = function() {