Group errors by line number and show count (microsoft#7299)

* Group errors by line number and show count

* address pr feedback

* revert changes in render method

* 2nd try

* whitespace

* i am determined to revert these changes.

* simplify error sort

* revert tsconfig change

* format document and remove trailing whitespace

Author: eanders-ms

webapp/src/errorList.tsx

@@ -3,6 +3,12 @@
 import * as React from "react";
 import * as sui from "./sui";
 
+type GroupedError = {
+    error: pxtc.KsDiagnostic,
+    count: number,
+    index: number
+};
+
 export interface ErrorListProps {
     onSizeChange: (state: pxt.editor.ErrorListState) => void;
     listenToErrorChanges: (key: string, onErrorChanges: (errors: pxtc.KsDiagnostic[]) => void) => void;
@@ -41,7 +47,7 @@ export class ErrorList extends React.Component<ErrorListProps, ErrorListState> {
     }
 
     render() {
-        const {isCollapsed, errors, exception} = this.state;
+        const { isCollapsed, errors, exception } = this.state;
         const errorsAvailable = !!errors?.length || !!exception;
         const collapseTooltip = lf("Collapse Error List");
 
@@ -52,12 +58,12 @@ export class ErrorList extends React.Component<ErrorListProps, ErrorListState> {
                 <div className="errorListHeader" role="button" aria-label={lf("{0} error list", isCollapsed ? lf("Expand") : lf("Collapse"))} onClick={this.onCollapseClick} onKeyDown={sui.fireClickOnEnter} tabIndex={0}>
                     <h4>{lf("Problems")}</h4>
                     <div className="ui red circular label countBubble">{exception ? 1 : errors.length}</div>
-                    <div className="toggleButton"><sui.Icon icon={`chevron ${isCollapsed ? 'up' : 'down'}`}/></div>
+                    <div className="toggleButton"><sui.Icon icon={`chevron ${isCollapsed ? 'up' : 'down'}`} /></div>
                 </div>
                 {!isCollapsed && <div className="errorListInner">
                     {exception && <div className="debuggerSuggestion" role="button" onClick={this.props.startDebugger} onKeyDown={sui.fireClickOnEnter} tabIndex={0}>
                         {lf("Debug this project")}
-                        <sui.Icon className="debug-icon" icon="icon bug"/>
+                        <sui.Icon className="debug-icon" icon="icon bug" />
                     </div>}
                     {errorListContent}
                 </div>}
@@ -88,7 +94,7 @@ export class ErrorList extends React.Component<ErrorListProps, ErrorListState> {
     }
 
     onErrorMessageClick(e: pxtc.LocationInfo, index: number) {
-        pxt.tickEvent('errorlist.goto', {errorIndex: index}, { interactiveConsent: true });
+        pxt.tickEvent('errorlist.goto', { errorIndex: index }, { interactiveConsent: true });
         this.props.goToError(e)
     }
 
@@ -115,8 +121,9 @@ export class ErrorList extends React.Component<ErrorListProps, ErrorListState> {
             return `${error.messageText}-${error.fileName}-${error.line}-${error.column}`
         }
 
+        const grouped = groupErrors(errors);
         return <div className="ui selection list">
-            {(errors).map((e, index) => <ErrorListItem key={errorKey(e)} index={index} error={e} revealError={this.onErrorMessageClick} />)}
+            {grouped.map((e, index) => <ErrorListItem key={errorKey(e.error)} index={index} error={e} revealError={this.onErrorMessageClick} />)}
         </div>
     }
 
@@ -129,7 +136,7 @@ export class ErrorList extends React.Component<ErrorListProps, ErrorListState> {
 
                     if (!location) return null;
 
-                    return <ErrorListItem key={index} index={index} stackframe={sf} location={location} revealError={this.onErrorMessageClick}/>
+                    return <ErrorListItem key={index} index={index} stackframe={sf} location={location} revealError={this.onErrorMessageClick} />
                 })}
             </div>
         </div>;
@@ -139,7 +146,7 @@ export class ErrorList extends React.Component<ErrorListProps, ErrorListState> {
 interface ErrorListItemProps {
     index: number;
     revealError: (location: pxtc.LocationInfo, index: number) => void;
-    error?: pxtc.KsDiagnostic;
+    error?: GroupedError;
     stackframe?: pxsim.StackFrameInfo;
     location?: pxtc.LocationInfo;
 }
@@ -156,22 +163,53 @@ class ErrorListItem extends React.Component<ErrorListItemProps, ErrorListItemSta
     }
 
     render() {
-        const {error, stackframe, location} = this.props
+        const { error, stackframe, location } = this.props
 
-        const message = stackframe ? lf("at {0} (line {1})", stackframe.funcInfo.functionName, location.line + 1)
-            : lf("Line {0}: {1}", error.endLine ? error.endLine + 1 : error.line + 1, error.messageText)
+        const message = stackframe ?
+            stackFrameMessageStringWithLineNumber(stackframe, location) :
+            errorMessageStringWithLineNumber(error.error);
+        const errorCount = stackframe ? 1 : error.count;
 
         return <div className={`item ${stackframe ? 'stackframe' : ''}`} role="button"
-                    onClick={this.onErrorListItemClick}
-                    onKeyDown={sui.fireClickOnEnter}
-                    aria-label={lf("Go to {0}: {1}", stackframe ? '' : 'error', message)}
-                    tabIndex={0}>
-            {message}
+            onClick={this.onErrorListItemClick}
+            onKeyDown={sui.fireClickOnEnter}
+            aria-label={lf("Go to {0}: {1}", stackframe ? '' : 'error', message)}
+            tabIndex={0}>
+            {message} {(errorCount <= 1) ? null : <div className="ui gray circular label countBubble">{errorCount}</div>}
         </div>
     }
 
     onErrorListItemClick() {
-        const location = this.props.stackframe ? this.props.location : this.props.error
+        const location = this.props.stackframe ? this.props.location : this.props.error.error
         this.props.revealError(location, this.props.index)
     }
 }
+
+function errorMessageStringWithLineNumber(error: pxtc.KsDiagnostic) {
+    return lf("Line {0}: {1}", error.endLine ? error.endLine + 1 : error.line + 1, error.messageText);
+}
+
+function stackFrameMessageStringWithLineNumber(stackframe: pxsim.StackFrameInfo, location: pxtc.LocationInfo) {
+    return lf("at {0} (line {1})", stackframe.funcInfo.functionName, location.line + 1);
+}
+
+function groupErrors(errors: pxtc.KsDiagnostic[]) {
+    const grouped = new Map<string, GroupedError>();
+    let index = 0;
+    for (const error of errors) {
+        const key = errorMessageStringWithLineNumber(error);
+        if (!grouped.has(key)) {
+            grouped.set(key, {
+                index: index++,
+                count: 1,
+                error
+            });
+        }
+        else {
+            grouped.get(key).count++;
+        }
+    }
+    const sorted: GroupedError[] = [];
+    grouped.forEach(value => sorted.push(value));
+    return sorted.sort((a, b) => a.index - b.index);
+}