fix(Export): Request uri too large error (#954)

package.json

@@ -53,6 +53,7 @@
     "iframe-resizer": "^3.6.6",
     "jquery": "^3.6.0",
     "jwt-decode": "^3.1.2",
+    "lz-string": "^1.4.4",
     "mathjax": "^3.2.2",
     "ng-file-upload": "^12.2.13",
     "ng-recaptcha": "^10.0.0",

src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts

@@ -1068,9 +1068,11 @@ export class DataExportComponent implements OnInit {
    */
   exportMatchComponent(nodeId: string, component: any): void {
     const components = this.getComponentsParam(nodeId, component.id);
-    this.dataExportService.retrieveStudentDataExport(components).then((result: any) => {
-      this.generateMatchComponentExport(nodeId, component);
-    });
+    this.dataExportService
+      .retrieveStudentData(components, true, false, true)
+      .then((result: any) => {
+        this.generateMatchComponentExport(nodeId, component);
+      });
   }
 
   generateMatchComponentExport(nodeId: string, component: any): void {
@@ -1249,9 +1251,11 @@ export class DataExportComponent implements OnInit {
 
   exportDialogGuidanceComponent(nodeId: string, component: any): void {
     const components = this.getComponentsParam(nodeId, component.id);
-    this.dataExportService.retrieveStudentDataExport(components).then((result: any) => {
-      this.generateDialogGuidanceComponentExport(nodeId, component);
-    });
+    this.dataExportService
+      .retrieveStudentData(components, true, false, true)
+      .then((result: any) => {
+        this.generateDialogGuidanceComponentExport(nodeId, component);
+      });
   }
 
   generateDialogGuidanceComponentExport(nodeId: string, component: any): void {
@@ -1263,7 +1267,7 @@ export class DataExportComponent implements OnInit {
 
   exportOpenResponseComponent(nodeId: string, component: any): void {
     const components = this.getComponentsParam(nodeId, component.id);
-    this.dataExportService.retrieveStudentDataExport(components).then(() => {
+    this.dataExportService.retrieveStudentData(components, true, false, true).then(() => {
       this.generateOpenResponseComponentExport(nodeId, component);
     });
   }
@@ -1948,9 +1952,11 @@ export class DataExportComponent implements OnInit {
 
   exportEmbeddedComponent(nodeId: string, component: any): void {
     const components = this.getComponentsParam(nodeId, component.id);
-    this.dataExportService.retrieveStudentDataExport(components).then((result: any) => {
-      this.generateEmbeddedComponentExport(nodeId, component);
-    });
+    this.dataExportService
+      .retrieveStudentData(components, true, false, true)
+      .then((result: any) => {
+        this.generateEmbeddedComponentExport(nodeId, component);
+      });
   }
 
   generateEmbeddedComponentExport(nodeId: string, component: any): void {

src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.ts

@@ -14,7 +14,7 @@ export class DiscussionComponentDataExportStrategy extends AbstractDataExportStr
   export() {
     this.controller.showDownloadingExportMessage();
     const components = [{ nodeId: this.nodeId, componentId: this.component.id }];
-    this.dataExportService.retrieveStudentDataExport(components).then((result) => {
+    this.dataExportService.retrieveStudentData(components, true, false, true).then((result) => {
       const columnNames = [];
       const columnNameToNumber = {};
       let rows = [this.generateDiscussionComponentHeaderRow(columnNames, columnNameToNumber)];

src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.ts

@@ -16,7 +16,7 @@ export class LabelComponentDataExportStrategy extends AbstractComponentDataExpor
   export(): void {
     this.controller.showDownloadingExportMessage();
     const components = [{ nodeId: this.component.nodeId, componentId: this.component.id }];
-    this.dataExportService.retrieveStudentDataExport(components).then((result) => {
+    this.dataExportService.retrieveStudentData(components, true, false, true).then((result) => {
       let rows = [this.generateComponentHeaderRow(this.columnNames)];
       rows = rows.concat(this.generateComponentWorkRows(this.component));
       this.addLabelHeaders(rows, this.maxNumLabels);

src/assets/wise5/classroomMonitor/dataExport/strategies/OneWorkgroupPerRowDataExportStrategy.ts

@@ -27,7 +27,7 @@ export class OneWorkgroupPerRowDataExportStrategy extends AbstractDataExportStra
       }
     }
 
-    this.dataExportService.retrieveOneWorkgroupPerRowExport(selectedNodes).then((result) => {
+    this.dataExportService.retrieveStudentData(selectedNodes, true, true, true).then(() => {
       var rows = [];
       var projectId = this.configService.getProjectId();
       var projectTitle = this.projectService.getProjectTitle();

src/assets/wise5/classroomMonitor/dataExport/strategies/RawDataExportStrategy.ts

@@ -25,7 +25,7 @@ export class RawDataExportStrategy extends AbstractDataExportStrategy {
         selectedNodesMap = this.getSelectedNodesMap(selectedNodes);
       }
     }
-    this.dataExportService.retrieveRawDataExport(selectedNodes).then((result) => {
+    this.dataExportService.retrieveStudentData(selectedNodes, true, true, true).then(() => {
       var runId = this.configService.getRunId();
       var data: any = {};
       var workgroups = this.configService.getClassmateUserInfosSortedByWorkgroupId();

src/assets/wise5/classroomMonitor/dataExport/strategies/StudentWorkDataExportStrategy.ts

@@ -19,7 +19,7 @@ export class StudentWorkDataExportStrategy extends AbstractDataExportStrategy {
         selectedNodesMap = this.getSelectedNodesMap(selectedNodes);
       }
     }
-    this.dataExportService.retrieveStudentDataExport(selectedNodes).then((result) => {
+    this.dataExportService.retrieveStudentData(selectedNodes, true, false, true).then((result) => {
       var runId = this.configService.getRunId();
       var rows = [];
       var rowCounter = 1;

src/assets/wise5/services/dataExportService.ts

@@ -2,21 +2,28 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ConfigService } from './configService';
 import { TeacherDataService } from './teacherDataService';
-import { UtilService } from './utilService';
+import { compressToEncodedURIComponent } from 'lz-string';
 
 @Injectable()
 export class DataExportService {
   constructor(
     private ConfigService: ConfigService,
     private http: HttpClient,
-    private TeacherDataService: TeacherDataService,
-    private UtilService: UtilService
+    private TeacherDataService: TeacherDataService
   ) {}
 
-  retrieveStudentDataExport(selectedNodes = []): Promise<any> {
-    let params = this.createHttpParams('true', 'false', 'true');
-    for (const selectedNode of selectedNodes) {
-      params = params.append('components', JSON.stringify(selectedNode));
+  retrieveStudentData(
+    selectedNodes = [],
+    includeStudentWork: boolean,
+    includeEvents: boolean,
+    includeAnnotations: boolean
+  ): Promise<any> {
+    let params = this.createHttpParams(includeStudentWork, includeEvents, includeAnnotations);
+    if (selectedNodes.length > 0) {
+      params = params.set(
+        'components',
+        compressToEncodedURIComponent(JSON.stringify(selectedNodes))
+      );
     }
     return this.TeacherDataService.retrieveStudentData(params);
   }
@@ -88,35 +95,23 @@ export class DataExportService {
       });
   }
 
-  retrieveOneWorkgroupPerRowExport(selectedNodes = []): Promise<any> {
-    let params = this.createHttpParams('true', 'true', 'true');
-    for (const selectedNode of selectedNodes) {
-      params = params.append('components', JSON.stringify(selectedNode));
-    }
-    return this.TeacherDataService.retrieveStudentData(params);
-  }
-
   retrieveStudentAssetsExport(): Promise<any> {
     window.location.href = this.getExportURL(this.ConfigService.getRunId(), 'studentAssets');
     return new Promise((resolve) => {
       resolve([]);
     });
   }
 
-  retrieveRawDataExport(selectedNodes: any[] = []): Promise<any> {
-    let params = this.createHttpParams('true', 'true', 'true');
-    for (const selectedNode of selectedNodes) {
-      params = params.append('components', JSON.stringify(selectedNode));
-    }
-    return this.TeacherDataService.retrieveStudentData(params);
-  }
-
-  private createHttpParams(studentWork: string, events: string, annotations: string): HttpParams {
+  private createHttpParams(
+    includeStudentWork: boolean,
+    includeEvents: boolean,
+    includeAnnotations: boolean
+  ): HttpParams {
     return new HttpParams()
       .set('runId', this.ConfigService.getRunId())
-      .set('getStudentWork', studentWork)
-      .set('getEvents', events)
-      .set('getAnnotations', annotations);
+      .set('getStudentWork', includeStudentWork)
+      .set('getEvents', includeEvents)
+      .set('getAnnotations', includeAnnotations);
   }
 
   getExportURL(runId: number, exportType: string): string {

src/assets/wise5/services/teacherDataService.ts

@@ -10,6 +10,7 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { DataService } from '../../../app/services/data.service';
 import { Node } from '../common/Node';
+import { compressToEncodedURIComponent } from 'lz-string';
 
 @Injectable()
 export class TeacherDataService extends DataService {
@@ -166,8 +167,9 @@ export class TeacherDataService extends DataService {
       .set('getStudentWork', 'true')
       .set('getAnnotations', 'false')
       .set('getEvents', 'false');
-    for (const component of this.getAllRelatedComponents(node)) {
-      params = params.append('components', JSON.stringify(component));
+    const components = this.getAllRelatedComponents(node);
+    if (components.length > 0) {
+      params = params.set('components', compressToEncodedURIComponent(JSON.stringify(components)));
     }
     return this.retrieveStudentData(params);
   }