Applied no-mixed-operators linting rule

2026-03-04 02:30:45 +00:00 · 2016-12-06 19:36:32 +01:00
parent e60418a986
commit 776b4d72eb
14 changed files with 41 additions and 37 deletions
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -24,7 +24,6 @@
    "react/jsx-filename-extension": 0,
    "react/jsx-no-target-blank": 0,
    "react/no-find-dom-node": 0,
-    "no-mixed-operators": 0,
    "no-restricted-properties": 0,
    "class-methods-use-this": 0,
  }
--- a/client/app/scripts/charts/node-networks-overlay.js
+++ b/client/app/scripts/charts/node-networks-overlay.js
@@ -26,7 +26,7 @@ function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
  const bars = networks.map((n, i) => (
    <rect
      x={x(i)}
-      y={offset - barHeight * 0.5}
+      y={offset - (barHeight * 0.5)}
      width={x.bandwidth()}
      height={barHeight}
      rx={rx}
--- a/client/app/scripts/charts/node-shape-heptagon.js
+++ b/client/app/scripts/charts/node-shape-heptagon.js
@@ -30,10 +30,11 @@ export default function NodeShapeHeptagon({id, highlighted, size, color, metric}
  const metricStyle = { fill: getMetricColor(metric) };
  const className = classNames('shape', { metrics: hasMetric });
  const fontSize = size * CANVAS_METRIC_FONT_SIZE;
+  const halfSize = size * 0.5;

  return (
    <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId, size, height, -size * 0.5, size * 0.5 - height)}
+      {hasMetric && getClipPathDefinition(clipId, size, height, -halfSize, halfSize - height)}
      {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
      <path className="border" stroke={color} {...pathProps(0.5)} />
      <path className="shadow" {...pathProps(0.45)} />
--- a/client/app/scripts/charts/node-shape-hexagon.js
+++ b/client/app/scripts/charts/node-shape-hexagon.js
@@ -48,8 +48,13 @@ export default function NodeShapeHexagon({id, highlighted, size, color, metric})

  return (
    <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId,
-        size * (1 + hexCurve * 2), height, -size * hexCurve, (size - height) * shadowSize * 2)}
+      {hasMetric && getClipPathDefinition(
+        clipId,
+        size * (1 + (hexCurve * 2)),
+        height,
+        -(size * hexCurve),
+        (size - height) * (shadowSize * 2)
+      )}
      {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
      <path className="border" stroke={color} {...pathProps(0.5)} />
      <path className="shadow" {...pathProps(shadowSize)} />
--- a/client/app/scripts/charts/node-shape-stack.js
+++ b/client/app/scripts/charts/node-shape-stack.js
@@ -5,8 +5,8 @@ export default function NodeShapeStack(props) {
  const contrastMode = isContrastMode();
  const Shape = props.shape;
  const [dx, dy] = contrastMode ? [0, 8] : [0, 5];
-  const dsx = (props.size * 2 + (dx * 2)) / (props.size * 2);
-  const dsy = (props.size * 2 + (dy * 2)) / (props.size * 2);
+  const dsx = (props.size + dx) / props.size;
+  const dsy = (props.size + dy) / props.size;
  const hls = [dsx, dsy];

  return (
--- a/client/app/scripts/charts/nodes-chart-edges.js
+++ b/client/app/scripts/charts/nodes-chart-edges.js
@@ -26,8 +26,8 @@ class NodesChartEdges extends React.Component {
            !(selectedNetworkNodes.contains(edge.get('source')) &&
              selectedNetworkNodes.contains(edge.get('target')));
          const blurred = !highlighted && (otherNodesSelected ||
-                                           !focused && noMatches ||
-                                             !focused && noSelectedNetworks);
+                                           (!focused && noMatches) ||
+                                             (!focused && noSelectedNetworks));

          return (
            <EdgeContainer
--- a/client/app/scripts/charts/nodes-chart-nodes.js
+++ b/client/app/scripts/charts/nodes-chart-nodes.js
@@ -21,11 +21,9 @@ class NodesChartNodes extends React.Component {
      && (selectedNodeId === node.get('id')
      || (adjacentNodes && adjacentNodes.includes(node.get('id')))));
    const setBlurred = node => node.set('blurred',
-      selectedNodeId && !node.get('focused')
-      || searchQuery && !searchNodeMatches.has(node.get('id'))
-        && !node.get('highlighted')
-      || selectedNetwork
-        && !(node.get('networks') || makeList()).find(n => n.get('id') === selectedNetwork));
+      (selectedNodeId && !node.get('focused'))
+      || (searchQuery && !searchNodeMatches.has(node.get('id')) && !node.get('highlighted'))
+      || (selectedNetwork && !(node.get('networks') || makeList()).find(n => n.get('id') === selectedNetwork)));

    // make sure blurred nodes are in the background
    const sortNodes = (node) => {
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -266,9 +266,10 @@ class NodesChart extends React.Component {
    // move origin node to center of viewport
    const zoomScale = state.scale;
    const translate = [state.panTranslateX, state.panTranslateY];
-    const centerX = (-translate[0] + (state.width + props.margins.left
-      - DETAILS_PANEL_WIDTH) / 2) / zoomScale;
-    const centerY = (-translate[1] + (state.height + props.margins.top) / 2) / zoomScale;
+    const viewportHalfWidth = ((state.width + props.margins.left) - DETAILS_PANEL_WIDTH) / 2;
+    const viewportHalfHeight = (state.height + props.margins.top) / 2;
+    const centerX = (-translate[0] + viewportHalfWidth) / zoomScale;
+    const centerY = (-translate[1] + viewportHalfHeight) / zoomScale;
    stateNodes = stateNodes.mergeIn([props.selectedNodeId], {
      x: centerX,
      y: centerY
@@ -283,10 +284,10 @@ class NodesChart extends React.Component {
    stateNodes = stateNodes.map((node, nodeId) => {
      const index = adjacentLayoutNodeIds.indexOf(nodeId);
      if (index > -1) {
-        const angle = offsetAngle + Math.PI * 2 * index / adjacentCount;
+        const angle = offsetAngle + ((Math.PI * 2 * index) / adjacentCount);
        return node.merge({
-          x: centerX + radius * Math.sin(angle),
-          y: centerY + radius * Math.cos(angle)
+          x: centerX + (radius * Math.sin(angle)),
+          y: centerY + (radius * Math.cos(angle))
        });
      }
      return node;
--- a/client/app/scripts/charts/nodes-layout.js
+++ b/client/app/scripts/charts/nodes-layout.js
@@ -237,8 +237,8 @@ function layoutSingleNodes(layout, opts) {
    }

    // default margins
-    offsetX = offsetX || margins.left + nodeWidth / 2;
-    offsetY = offsetY || margins.top + nodeHeight / 2;
+    offsetX = offsetX || (margins.left + nodeWidth) / 2;
+    offsetY = offsetY || (margins.top + nodeHeight) / 2;

    const columns = Math.ceil(Math.sqrt(singleNodes.size));
    let row = 0;
@@ -251,8 +251,8 @@ function layoutSingleNodes(layout, opts) {
          col = 0;
          row += 1;
        }
-        singleX = col * (nodesep + nodeWidth) + offsetX;
-        singleY = row * (ranksep + nodeHeight) + offsetY;
+        singleX = (col * (nodesep + nodeWidth)) + offsetX;
+        singleY = (row * (ranksep + nodeHeight)) + offsetY;
        col += 1;
        return node.merge({
          x: singleX,
@@ -263,8 +263,8 @@ function layoutSingleNodes(layout, opts) {
    });

    // adjust layout dimensions if graph is now bigger
-    result.width = Math.max(layout.width, singleX + nodeWidth / 2 + nodesep);
-    result.height = Math.max(layout.height, singleY + nodeHeight / 2 + ranksep);
+    result.width = Math.max(layout.width, singleX + (nodeWidth / 2) + nodesep);
+    result.height = Math.max(layout.height, singleY + (nodeHeight / 2) + ranksep);
    result.nodes = nodes;
  }

@@ -290,12 +290,12 @@ export function shiftLayoutToCenter(layout, opts) {
  if (layout.width < width) {
    const xMin = layout.nodes.minBy(n => n.get('x'));
    const xMax = layout.nodes.maxBy(n => n.get('x'));
-    offsetX = (width - (xMin.get('x') + xMax.get('x'))) / 2 + margins.left;
+    offsetX = ((width - (xMin.get('x') + xMax.get('x'))) / 2) + margins.left;
  }
  if (layout.height < height) {
    const yMin = layout.nodes.minBy(n => n.get('y'));
    const yMax = layout.nodes.maxBy(n => n.get('y'));
-    offsetY = (height - (yMin.get('y') + yMax.get('y'))) / 2 + margins.top;
+    offsetY = ((height - (yMin.get('y') + yMax.get('y'))) / 2) + margins.top;
  }

  if (offsetX || offsetY) {
--- a/client/app/scripts/components/details-card.js
+++ b/client/app/scripts/components/details-card.js
@@ -33,15 +33,15 @@ class DetailsCard extends React.Component {
      const scaleY = origin.height / (window.innerHeight - MARGINS.bottom - MARGINS.top) / 2;
      const scaleX = origin.width / WIDTH / 2;
      const centerX = window.innerWidth - MARGINS.right - (WIDTH / 2);
-      const centerY = (panelHeight) / 2 + MARGINS.top;
-      const dx = (origin.left + origin.width / 2) - centerX;
-      const dy = (origin.top + origin.height / 2) - centerY;
+      const centerY = (panelHeight / 2) + MARGINS.top;
+      const dx = (origin.left + (origin.width / 2)) - centerX;
+      const dy = (origin.top + (origin.height / 2)) - centerY;
      transform = `translate(${dx}px, ${dy}px) scale(${scaleX},${scaleY})`;
    } else {
      // stack effect: shift top cards to the left, shrink lower cards vertically
      const shiftX = -1 * this.props.index * OFFSET;
      const position = this.props.cardCount - this.props.index - 1; // reverse index
-      const scaleY = position === 0 ? 1 : (panelHeight - 2 * OFFSET * position) / panelHeight;
+      const scaleY = (position === 0) ? 1 : (panelHeight - (2 * OFFSET * position)) / panelHeight;
      if (scaleY !== 1) {
        transform = `translateX(${shiftX}px) scaleY(${scaleY})`;
      } else {
--- a/client/app/scripts/components/matched-text.js
+++ b/client/app/scripts/components/matched-text.js
@@ -84,7 +84,7 @@ class MatchedText extends React.Component {
  render() {
    const { match, text, truncate, maxLength } = this.props;

-    const showFullValue = !truncate || match && match.start + match.length > truncate;
+    const showFullValue = !truncate || (match && (match.start + match.length) > truncate);
    const displayText = showFullValue ? text : text.slice(0, truncate);

    if (!match) {
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -264,7 +264,7 @@ class Terminal extends React.Component {
    this.props.dispatch(clickCloseTerminal(this.getPipeId()));

    const bcr = ReactDOM.findDOMNode(this).getBoundingClientRect();
-    const minWidth = this.state.characterWidth * 80 + (8 * 2);
+    const minWidth = (this.state.characterWidth * 80) + (8 * 2);
    openNewWindow(`terminal.html#!/state/${paramString}`, bcr, minWidth);
  }

--- a/client/app/scripts/utils/array-utils.js
+++ b/client/app/scripts/utils/array-utils.js
@@ -6,6 +6,6 @@ export function uniformSelect(array, size) {
  }

  return _.range(size).map(index =>
-    array[parseInt(index * array.length / (size - 1 + 1e-9), 10)]
+    array[parseInt(index * (array.length / (size - (1 - 1e-9))), 10)]
  );
 }
--- a/client/app/scripts/utils/metric-utils.js
+++ b/client/app/scripts/utils/metric-utils.js
@@ -6,7 +6,7 @@ import { formatMetricSvg } from './string-utils';
 import { colors } from './color-utils';

 export function getClipPathDefinition(clipId, size, height,
-  x = -size * 0.5, y = size * 0.5 - height) {
+  x = -size * 0.5, y = (size * 0.5) - height) {
  return (
    <defs>
      <clipPath id={clipId}>
@@ -44,7 +44,7 @@ export function getMetricValue(metric, size) {
  let displayedValue = Number(value).toFixed(1);
  if (displayedValue > 0 && (!max || displayedValue < max)) {
    const baseline = 0.1;
-    displayedValue = valuePercentage * (1 - baseline * 2) + baseline;
+    displayedValue = (valuePercentage * (1 - (baseline * 2))) + baseline;
  } else if (displayedValue >= m.max && displayedValue > 0) {
    displayedValue = 1;
  }