mbeditor 0.13.0 → 0.14.0

data/app/assets/javascripts/mbeditor/components/ModelGraph.js

@@ -527,12 +527,8 @@ var ModelGraph = (function () {
     var searchOpen = _searchOpen[0], setSearchOpen = _searchOpen[1];
     var _highlight = React.useState(0);
     var highlight = _highlight[0], setHighlight = _highlight[1];
-    var _focused = React.useState(null);
-    var focused = _focused[0], setFocused = _focused[1];
     var _hovered = React.useState(null);
     var hovered = _hovered[0], setHovered = _hovered[1];
-    var _pointer = React.useState({ x: 0, y: 0 });
-    var pointer = _pointer[0], setPointer = _pointer[1];
     var dragRef = React.useRef(null);
     var svgRef = React.useRef(null);
 
@@ -586,17 +582,56 @@ var ModelGraph = (function () {
       if (sceneRef.current) sceneRef.current.classList.remove('mg-focus-mode');
     }, []);
 
+    // The edge <g> elements touching each model, indexed once per scene
+    // instead of a querySelectorAll('[data-from=...],[data-to=...]') on every
+    // mouseenter — that scan walked the whole scene continuously as the
+    // pointer crossed a dense diagram. sceneChildrenRef is kept current just
+    // below sceneChildren's own memo, so a stale index is rebuilt exactly
+    // when the scene actually does.
+    var sceneChildrenRef = React.useRef(null);
+    var edgeIndexRef = React.useRef({ scene: null, map: {} });
+    var edgesFor = React.useCallback(function (name) {
+      var scene = sceneRef.current;
+      if (!scene) return [];
+      if (edgeIndexRef.current.scene !== sceneChildrenRef.current) {
+        var map = {};
+        Array.prototype.forEach.call(scene.querySelectorAll('[data-from]'), function (el) {
+          var from = el.getAttribute('data-from'), to = el.getAttribute('data-to');
+          (map[from] = map[from] || []).push(el);
+          if (to !== from) (map[to] = map[to] || []).push(el);
+        });
+        edgeIndexRef.current = { scene: sceneChildrenRef.current, map: map };
+      }
+      return edgeIndexRef.current.map[name] || [];
+    }, []);
+
+    // getBoundingClientRect forces a synchronous layout, and hovering has just
+    // written classes onto a <g> holding thousands of elements, so the layout
+    // it forces is the whole scene: measured at 10 ms a tick on a 420-model
+    // graph, against 0.9 ms when the style is clean. The pane's own rect moves
+    // only when the window or the panel layout does, so read it once a frame.
+    var rectRef = React.useRef(null);
+    var paneRect = React.useCallback(function () {
+      var el = svgRef.current;
+      if (!el) return null;
+      if (!rectRef.current) {
+        rectRef.current = el.getBoundingClientRect();
+        window.requestAnimationFrame(function () { rectRef.current = null; });
+      }
+      return rectRef.current;
+    }, []);
+
     var moveHoverCard = React.useCallback(function (ev) {
       var card = hoverCardRef.current;
       var el = svgRef.current;
       if (!card || !el) return;
-      var rect = el.getBoundingClientRect();
+      var rect = paneRect();
       var x = ev.clientX - rect.left;
       var y = ev.clientY - rect.top;
       // Flip before the card would run off the pane rather than after.
       card.style.left = (x > rect.width - 300 ? x - 290 : x + 18) + 'px';
       card.style.top = Math.min(y + 18, Math.max(0, rect.height - 240)) + 'px';
-    }, []);
+    }, [paneRect]);
 
     var enterModel = React.useCallback(function (name, ev) {
       if (dragRef.current) return;   // panning, not inspecting
@@ -604,19 +639,38 @@ var ModelGraph = (function () {
       var scene = sceneRef.current;
       if (scene) {
         scene.classList.add('mg-focus-mode');
-        var sel = '[data-from="' + name + '"],[data-to="' + name + '"]';
-        litRef.current = Array.prototype.slice.call(scene.querySelectorAll(sel));
+        litRef.current = edgesFor(name);
         litRef.current.forEach(function (el) { el.classList.add('mg-lit'); });
       }
       setModelHover(name);
       moveHoverCard(ev);
-    }, [clearLit, moveHoverCard]);
+    }, [clearLit, moveHoverCard, edgesFor]);
 
     var leaveModel = React.useCallback(function () {
       clearLit();
       setModelHover(null);
     }, [clearLit]);
 
+    // Position is written straight onto the tooltip's DOM node, the way
+    // moveHoverCard does for the model card — routing every mousemove over an
+    // edge through React state re-ran the whole component body per pointer
+    // tick. edgePosRef holds the latest point for the tooltip's own initial
+    // inline style (read once on the render its `hovered` turns true), without
+    // itself triggering a render.
+    var edgeTooltipRef = React.useRef(null);
+    var edgePosRef = React.useRef({ x: 0, y: 0 });
+    var moveEdgeTooltip = React.useCallback(function (ev) {
+      var rect = paneRect();
+      if (!rect) return;
+      var x = ev.clientX - rect.left;
+      var y = ev.clientY - rect.top;
+      edgePosRef.current = { x: x, y: y };
+      var card = edgeTooltipRef.current;
+      if (!card) return;
+      card.style.left = (x > rect.width - 260 ? x - 240 : x + 14) + 'px';
+      card.style.top = (y + 14) + 'px';
+    }, [paneRect]);
+
     // Frame the whole graph on load. Without this the view starts at the
     // top-left of a canvas much larger than the pane and the diagram looks
     // empty until you go looking for it.
@@ -652,6 +706,19 @@ var ModelGraph = (function () {
 
     React.useEffect(function () { fitToPane(); }, [fitToPane]);
 
+    // `focused` used to be React state read inside sceneChildren's className,
+    // but centring a model is also how a click and a search pick land, and
+    // that made every centre rebuild all ~3,500 SVG elements and their event
+    // closures. Applied to the mounted DOM instead, the same way
+    // enterModel/litRef apply the hover highlight above.
+    var focusedRef = React.useRef(null);
+    var applyFocus = React.useCallback(function (name) {
+      var scene = sceneRef.current;
+      if (focusedRef.current) focusedRef.current.classList.remove('mg-focused');
+      focusedRef.current = scene ? scene.querySelector('[data-model="' + name + '"]') : null;
+      if (focusedRef.current) focusedRef.current.classList.add('mg-focused');
+    }, []);
+
     // Bring one model to the middle of the pane at the current zoom, and mark
     // it so it's findable in a dense graph once it gets there.
     var centreOn = React.useCallback(function (name) {
@@ -660,7 +727,7 @@ var ModelGraph = (function () {
       if (!el || !pos) return;
       var rect = el.getBoundingClientRect();
       var h = nodeHeight(pos.model);
-      setFocused(name);
+      applyFocus(name);
       setView(function (v) {
         // Close half the distance to actual size, so a model found while
         // fitted (often ~0.3) lands readable. Never zooms out: if you were
@@ -672,7 +739,7 @@ var ModelGraph = (function () {
           y: rect.height / 2 - (pos.y + h / 2) * k
         };
       });
-    }, [placed]);
+    }, [placed, applyFocus]);
 
     // Same mounting problem as the wheel listener: the fit effect can run
     // before the SVG exists and not again afterwards. Kept current so the
@@ -707,22 +774,6 @@ var ModelGraph = (function () {
       svgRef.current = el;
       if (!el) return;
 
-      // getBoundingClientRect forces a synchronous layout, and we had just
-      // written a new transform onto a <g> holding thousands of elements — so
-      // reading it per wheel tick made the browser re-lay-out the entire scene
-      // before the handler could continue. Measured at 27 ms a tick on a
-      // 300-model graph. The pane's own rect only changes when the window or
-      // the panel layout does, so cache it and refresh once per frame.
-      var rectRef = { current: null };
-      var invalidateRect = function () { rectRef.current = null; };
-      var paneRect = function () {
-        if (!rectRef.current) {
-          rectRef.current = el.getBoundingClientRect();
-          window.requestAnimationFrame(invalidateRect);
-        }
-        return rectRef.current;
-      };
-
       var onWheel = function (e) {
         e.preventDefault();
         var rect = paneRect();
@@ -739,7 +790,7 @@ var ModelGraph = (function () {
 
       // After layout, so the pane has a measurable size to fit into.
       window.requestAnimationFrame(function () { fitRef.current(); });
-    }, []);
+    }, [paneRect]);
 
     // Memoised so hovering a model does not rebuild every box and edge.
     // The highlight itself is applied by toggling DOM classes; only the
@@ -790,10 +841,7 @@ var ModelGraph = (function () {
                   if (line) line.classList.add('mg-edge-hovered');
                   setHovered({ index: i, edge: e });
                 },
-                onMouseMove: function (ev) {
-                  var rect = svgRef.current.getBoundingClientRect();
-                  setPointer({ x: ev.clientX - rect.left, y: ev.clientY - rect.top });
-                },
+                onMouseMove: moveEdgeTooltip,
                 onMouseLeave: function (ev) {
                   var line = ev.currentTarget.nextElementSibling;
                   if (line) line.classList.remove('mg-edge-hovered');
@@ -818,7 +866,8 @@ var ModelGraph = (function () {
               'g',
               {
                 key: m.name,
-                className: 'mg-node' + (focused === m.name ? ' mg-focused' : ''),
+                'data-model': m.name,
+                className: 'mg-node',
                 transform: 'translate(' + pos.x + ',' + pos.y + ')',
                 onMouseEnter: function (ev) { enterModel(m.name, ev); },
                 onMouseMove: function (ev) { moveHoverCard(ev); },
@@ -887,7 +936,12 @@ var ModelGraph = (function () {
             );
           })
       ];
-    }, [placed, graph, focused]);
+    }, [placed, graph]);
+    // Kept current so edgesFor (declared earlier, used from enterModel) can
+    // detect a scene rebuild without itself listing sceneChildren as a
+    // dependency — that would rebuild enterModel, and everything closing
+    // over it, on every scene rebuild too.
+    sceneChildrenRef.current = sceneChildren;
 
     if (loading) {
       return React.createElement('div', { className: 'ide-model-graph-empty' }, 'Building the model graph…');
@@ -1058,12 +1112,15 @@ var ModelGraph = (function () {
       hovered && React.createElement(
         'div',
         {
+          ref: edgeTooltipRef,
           className: 'mg-tooltip',
           // Offset from the cursor, and flipped left near the right edge so
-          // the tooltip never runs off the pane.
+          // the tooltip never runs off the pane. Only the initial placement is
+          // computed here — moveEdgeTooltip writes the DOM node directly as
+          // the pointer moves, so this style is live for one frame at most.
           style: {
-            left: pointer.x + (svgRef.current && pointer.x > svgRef.current.clientWidth - 260 ? -240 : 14) + 'px',
-            top: (pointer.y + 14) + 'px'
+            left: edgePosRef.current.x + (svgRef.current && edgePosRef.current.x > svgRef.current.clientWidth - 260 ? -240 : 14) + 'px',
+            top: (edgePosRef.current.y + 14) + 'px'
           }
         },
         React.createElement('div', { className: 'mg-tooltip-title' },

data/app/assets/javascripts/mbeditor/components/ProblemsPanel.js

@@ -44,6 +44,32 @@ var ProblemsPanel = (function () {
     return text.length > CODE_PREVIEW_LIMIT ? text.slice(0, CODE_PREVIEW_LIMIT) + '…' : text;
   }
 
+  // VS Code-style file group header: chevron, file-type icon, basename, then
+  // the containing directory in a dimmer colour. `path` is workspace-relative.
+  function fileGroupName(path) {
+    var slash = path.lastIndexOf('/');
+    return {
+      base: slash === -1 ? path : path.slice(slash + 1),
+      dir: slash === -1 ? '' : path.slice(0, slash)
+    };
+  }
+
+  function renderFileGroupHeader(path, count) {
+    var parts = fileGroupName(path);
+    return React.createElement(
+      'div',
+      { className: 'ide-problems-file-name' },
+      React.createElement('i', { className: 'fas fa-chevron-down', 'aria-hidden': 'true' }),
+      React.createElement('i', {
+        className: (window.getFileIcon ? window.getFileIcon(parts.base) : 'far fa-file-code'),
+        'aria-hidden': 'true'
+      }),
+      React.createElement('span', null, parts.base),
+      parts.dir && React.createElement('span', { className: 'ide-problems-dir' }, parts.dir),
+      React.createElement('span', { className: 'ide-problems-file-count' }, count)
+    );
+  }
+
   // Reading markers means walking every model, so callers that only want the
   // counts share this one pass. Exposed on the component for the status bar.
   function collect() {
@@ -111,7 +137,14 @@ var ProblemsPanel = (function () {
 
   var Panel = function ProblemsPanelComponent(_ref) {
     var onClose = _ref.onClose;
+    // Height is owned by MbeditorApp: the gutter that drags it lives between
+    // the editor card and this drawer, not inside it.
+    var height = _ref.height;
     var onOpenFile = _ref.onOpenFile;
+    // Called after `-a` has rewritten files on disk, so the app can re-read
+    // every open tab. Nothing else would: the write came from a subprocess,
+    // not from the editor, so the buffers and their markers are stale.
+    var onFilesRewritten = _ref.onFilesRewritten;
 
     var _problems = React.useState(collect);
     var problems = _problems[0], setProblems = _problems[1];
@@ -190,7 +223,10 @@ var ProblemsPanel = (function () {
       if (running) return;
       setRunning(mode);
       FileService.runRubocop(mode)
-        .then(function (data) { setWorkspace(data); })
+        .then(function (data) {
+          setWorkspace(data);
+          if (mode === 'autocorrect' && data && data.ok && onFilesRewritten) onFilesRewritten();
+        })
         ["catch"](function (e) {
           var res = e && e.response && e.response.data;
           setWorkspace(res || { ok: false, error: (e && e.message) || 'RuboCop failed', files: [] });
@@ -219,34 +255,6 @@ var ProblemsPanel = (function () {
       });
     };
 
-    var MIN_HEIGHT = 120;
-    var _height = React.useState(function () {
-      var saved = parseInt(window.localStorage.getItem('mbeditorProblemsHeight'), 10);
-      return (saved && saved >= MIN_HEIGHT) ? saved : 240;
-    });
-    var height = _height[0], setHeight = _height[1];
-    var heightRef = React.useRef(height);
-    heightRef.current = height;
-
-    // Same delta-based resize as the log drawer.
-    var onResizeMouseDown = function (e) {
-      e.preventDefault();
-      var startY = e.clientY;
-      var startHeight = heightRef.current;
-      var onMove = function (ev) {
-        var vh = window.innerHeight || document.documentElement.clientHeight || 0;
-        var maxH = vh > 0 ? Math.round(vh * 0.85) : Infinity;
-        setHeight(Math.min(maxH, Math.max(MIN_HEIGHT, startHeight + (startY - ev.clientY))));
-      };
-      var onUp = function () {
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-        window.localStorage.setItem('mbeditorProblemsHeight', String(heightRef.current));
-      };
-      document.addEventListener('mousemove', onMove);
-      document.addEventListener('mouseup', onUp);
-    };
-
     React.useEffect(function () {
       if (!window.monaco || !window.monaco.editor) return;
       // Debounced for the same reason the status-bar tally is: markers change
@@ -283,30 +291,44 @@ var ProblemsPanel = (function () {
         }).filter(function (entry) { return entry.markers.length > 0; })
       : problems.byFile;
 
+    // The workspace run and the marker set are different scopes, but they render
+    // in one panel under one set of severity chips. Counting only the markers
+    // made the header disagree with its own body: click RuboCop, get 400
+    // offenses listed under chips reading 0 / 0 / 0, and hiding "warning" left
+    // every workspace warning on screen. The chips describe what the panel is
+    // showing, so they have to cover both — and the filter has to reach both.
+    var wsFiles = (workspace && workspace.files) || [];
+    var wsCounts = { error: 0, warning: 0, info: 0 };
+    var wsShown = [];
+    wsFiles.forEach(function (file) {
+      var kept = [];
+      file.offenses.forEach(function (o) {
+        var kind = COP_SEVERITY_KIND[o.severity] || 'info';
+        wsCounts[kind] += 1;
+        if (severities[kind]) kept.push(o);
+      });
+      if (kept.length) wsShown.push({ path: file.path, offenses: kept });
+    });
+
     var total = problems.errors.length + problems.warnings.length + problems.infos.length;
 
     return React.createElement(
       'div',
       { className: 'ide-problems-drawer', style: { height: height + 'px' } },
-      React.createElement('div', {
-        className: 'ide-problems-resize',
-        title: 'Drag to resize',
-        onMouseDown: onResizeMouseDown
-      }),
       React.createElement(
         'div',
         { className: 'ide-problems-header' },
-        React.createElement('i', { className: 'fas fa-bug' }),
         React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        React.createElement('span', { className: 'ide-problems-total-pill' }, total + wsCounts.error + wsCounts.warning + wsCounts.info),
         // No prose summary: the severity chips below carry the same three
         // counts, and restating them was the longest thing in the header.
         React.createElement(
           'div',
           { className: 'ide-problems-severity-filter' },
           [
-            { kind: 'error', count: problems.errors.length },
-            { kind: 'warning', count: problems.warnings.length },
-            { kind: 'info', count: problems.infos.length }
+            { kind: 'error', count: problems.errors.length + wsCounts.error },
+            { kind: 'warning', count: problems.warnings.length + wsCounts.warning },
+            { kind: 'info', count: problems.infos.length + wsCounts.info }
           ].map(function (s) {
             var on = severities[s.kind];
             return React.createElement(
@@ -314,7 +336,7 @@ var ProblemsPanel = (function () {
               {
                 key: s.kind,
                 type: 'button',
-                className: 'ide-problems-sev-chip ide-problems-sev-' + s.kind + (on ? ' is-on' : ''),
+                className: 'ide-problems-sev-chip' + (on ? ' is-on' : ''),
                 title: (on ? 'Hide' : 'Show') + ' ' + SEVERITY_LABEL[s.kind].toLowerCase() + 's',
                 'aria-pressed': on ? 'true' : 'false',
                 onClick: function () { toggleSeverity(s.kind); }
@@ -324,49 +346,48 @@ var ProblemsPanel = (function () {
             );
           })
         ),
+        React.createElement('input', {
+          className: 'ide-problems-filter',
+          type: 'text',
+          placeholder: 'Filter…',
+          value: filter,
+          onChange: function (e) { setFilter(e.target.value); }
+        }),
         React.createElement(
           'div',
           { className: 'ide-problems-actions' },
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             disabled: !!running,
             title: 'Run rubocop over the whole workspace',
             onClick: function () { runRubocop('check'); }
           },
-            React.createElement('i', { className: running === 'check' ? 'fas fa-spinner fa-spin' : 'fas fa-play' }),
-            React.createElement('span', null, ' RuboCop')),
+            React.createElement('i', { className: running === 'check' ? 'fas fa-spinner fa-spin' : 'fas fa-play' })),
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             // Nothing to correct until a run says so, and rerunning `-a` on a
             // clean tree is a slow no-op.
             disabled: !!running || !workspace || !workspace.correctable,
             title: workspace && workspace.correctable
               ? 'Safe-autocorrect ' + workspace.correctable + ' offense(s) and rerun'
-              : 'Run RuboCop first',
+              : workspace
+                ? 'Nothing left that safe autocorrect can fix'
+                : 'Run RuboCop first',
             onClick: function () { runRubocop('autocorrect'); }
           },
-            React.createElement('i', { className: running === 'autocorrect' ? 'fas fa-spinner fa-spin' : 'fas fa-magic' }),
-            React.createElement('span', null, ' Fix')),
+            React.createElement('i', { className: running === 'autocorrect' ? 'fas fa-spinner fa-spin' : 'fas fa-magic' })),
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             disabled: !workspace || !(workspace.files || []).length,
             title: workspace && (workspace.files || []).length
               ? 'Open all ' + workspace.files.length + ' file(s) with offenses'
               : 'Run RuboCop first',
             onClick: openAllOffending
           },
-            React.createElement('i', { className: 'fas fa-folder-open' }),
-            React.createElement('span', null, ' Open all'))
+            React.createElement('i', { className: 'fas fa-folder-open' }))
         ),
-        React.createElement('input', {
-          className: 'ide-problems-filter',
-          type: 'text',
-          placeholder: 'Filter…',
-          value: filter,
-          onChange: function (e) { setFilter(e.target.value); }
-        }),
         React.createElement('button', {
-          type: 'button', className: 'ide-problems-btn',
+          type: 'button', className: 'ide-icon-btn',
           title: 'Close', onClick: onClose
         }, React.createElement('i', { className: 'fas fa-times' }))
       ),
@@ -378,19 +399,13 @@ var ProblemsPanel = (function () {
           { className: 'ide-problems-workspace' },
           workspace.error
             ? React.createElement('div', { className: 'ide-problems-empty' }, 'RuboCop: ' + workspace.error)
-            : (workspace.files || []).length === 0
+            : wsFiles.length === 0
               ? React.createElement('div', { className: 'ide-problems-empty' }, 'RuboCop found no offenses in the workspace')
-              : workspace.files.map(function (file) {
+              : wsShown.map(function (file) {
                   return React.createElement(
                     'div',
                     { className: 'ide-problems-file', key: 'ws:' + file.path },
-                    React.createElement(
-                      'div',
-                      { className: 'ide-problems-file-name' },
-                      React.createElement('i', { className: 'fas fa-gavel', 'aria-hidden': 'true' }),
-                      ' ' + file.path,
-                      React.createElement('span', { className: 'ide-problems-file-count' }, file.offenses.length)
-                    ),
+                    renderFileGroupHeader(file.path, file.offenses.length),
                     file.offenses.map(function (o, i) {
                       var kind = COP_SEVERITY_KIND[o.severity] || 'info';
                       return React.createElement(
@@ -474,12 +489,7 @@ var ProblemsPanel = (function () {
                 return React.createElement(
                   'div',
                   { className: 'ide-problems-file', key: entry.path },
-                  React.createElement(
-                    'div',
-                    { className: 'ide-problems-file-name' },
-                    entry.path,
-                    React.createElement('span', { className: 'ide-problems-file-count' }, entry.markers.length)
-                  ),
+                  renderFileGroupHeader(entry.path, entry.markers.length),
                   entry.markers.map(function (item, index) {
                     var marker = item.marker;
                     var kind = SEVERITY_KIND[marker.severity] || 'info';