@pie-lib/charting 5.24.0 → 5.25.0

package/src/__tests__/__snapshots__/mark-label.test.jsx.snap

@@ -1,67 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MarkLabel snapshot renders 1`] = `
-<AutosizeInput
-  injectStyles={true}
-  inputClassName=""
-  inputRef={[Function]}
-  inputStyle={
-    Object {
-      "background": "transparent",
-      "boxSizing": "border-box",
-      "minWidth": undefined,
-      "paddingLeft": 0,
-      "paddingRight": 0,
-      "textAlign": "center",
+<div>
+  <AutosizeInput
+    injectStyles={true}
+    inputClassName=""
+    inputRef={[Function]}
+    inputStyle={
+      Object {
+        "background": "transparent",
+        "boxSizing": "border-box",
+        "minWidth": undefined,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "textAlign": "center",
+      }
     }
-  }
-  minWidth={1}
-  onBlur={[Function]}
-  onChange={[Function]}
-  style={
-    Object {
-      "left": 0,
-      "minWidth": undefined,
-      "pointerEvents": "auto",
-      "position": "fixed",
-      "top": 0,
-      "transform": "rotate(undefineddeg)",
-      "transformOrigin": "left",
-      "visibility": "unset",
+    minWidth={1}
+    onBlur={[Function]}
+    onChange={[Function]}
+    style={
+      Object {
+        "left": 0,
+        "marginTop": "0",
+        "minWidth": undefined,
+        "pointerEvents": "auto",
+        "position": "fixed",
+        "top": 0,
+        "transform": "rotate(undefineddeg)",
+        "transformOrigin": "left",
+        "visibility": "unset",
+      }
     }
-  }
-/>
+  />
+</div>
 `;
 
 exports[`MarkLabel snapshot renders 2`] = `
-<AutosizeInput
-  injectStyles={true}
-  inputClassName=""
-  inputRef={[Function]}
-  inputStyle={
-    Object {
-      "background": "transparent",
-      "boxSizing": "border-box",
-      "minWidth": undefined,
-      "paddingLeft": 0,
-      "paddingRight": 0,
-      "textAlign": "center",
+<div>
+  <AutosizeInput
+    injectStyles={true}
+    inputClassName=""
+    inputRef={[Function]}
+    inputStyle={
+      Object {
+        "background": "transparent",
+        "boxSizing": "border-box",
+        "minWidth": undefined,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "textAlign": "center",
+      }
     }
-  }
-  minWidth={1}
-  onBlur={[Function]}
-  onChange={[Function]}
-  style={
-    Object {
-      "left": 0,
-      "minWidth": undefined,
-      "pointerEvents": "auto",
-      "position": "fixed",
-      "top": 0,
-      "transform": "rotate(undefineddeg)",
-      "transformOrigin": "left",
-      "visibility": "unset",
+    minWidth={1}
+    onBlur={[Function]}
+    onChange={[Function]}
+    style={
+      Object {
+        "left": 0,
+        "marginTop": "0",
+        "minWidth": undefined,
+        "pointerEvents": "auto",
+        "position": "fixed",
+        "top": 0,
+        "transform": "rotate(undefineddeg)",
+        "transformOrigin": "left",
+        "visibility": "unset",
+      }
     }
-  }
-/>
+  />
+</div>
 `;

package/src/actions-button.jsx

@@ -20,10 +20,10 @@ export class ActionsButton extends React.Component {
 
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    categories: PropTypes.array,
     addCategory: PropTypes.func.isRequired,
     deleteCategory: PropTypes.func.isRequired,
-    language: PropTypes.string.isRequired,
+    language: PropTypes.string,
+    categories: PropTypes.array,
   };
 
   handleActionsClick = (event) => {
@@ -91,6 +91,7 @@ const styles = (theme) => ({
     cursor: 'pointer',
     fontSize: theme.typography.fontSize,
     color: color.tertiary(),
+    padding: theme.spacing.unit,
   },
   actionsPaper: {
     padding: theme.spacing.unit,

package/src/axes.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import { AxisLeft, AxisBottom } from '@vx/axis';
+import Checkbox from '@material-ui/core/Checkbox';
+
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import { AlertDialog } from '@pie-lib/config-ui';
-import { AxisLeft, AxisBottom } from '@vx/axis';
+import { TickCorrectnessIndicator } from './common/correctness-indicators';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
 import MarkLabel from './mark-label';
-import Checkbox from '@material-ui/core/Checkbox';
 
 export class TickComponent extends React.Component {
   static propTypes = {
@@ -126,6 +128,7 @@ export class TickComponent extends React.Component {
       error,
       autoFocus,
       hiddenLabelRef,
+      showCorrectness,
     } = this.props;
 
     if (!formattedValue) {
@@ -150,7 +153,7 @@ export class TickComponent extends React.Component {
       <g>
         <foreignObject
           x={bandWidth ? barX : x - barWidth / 2}
-          y={6}
+          y={18}
           width={barWidth}
           height={4}
           style={{ pointerEvents: 'none', overflow: 'visible' }}
@@ -178,6 +181,12 @@ export class TickComponent extends React.Component {
             correctness={correctness}
             error={error && error[index]}
             limitCharacters
+            correctnessIndicator={
+              showCorrectness &&
+              correctness && (
+                <TickCorrectnessIndicator correctness={correctness} interactive={interactive} classes={classes} />
+              )
+            }
           />
         </foreignObject>
 
@@ -313,6 +322,7 @@ TickComponent.propTypes = {
   changeEditableEnabled: PropTypes.bool,
   autoFocus: PropTypes.bool,
   onAutoFocusUsed: PropTypes.func,
+  showCorrectness: PropTypes.bool,
 };
 
 export class RawChartAxes extends React.Component {
@@ -334,6 +344,7 @@ export class RawChartAxes extends React.Component {
     changeEditableEnabled: PropTypes.bool,
     autoFocus: PropTypes.bool,
     onAutoFocusUsed: PropTypes.func,
+    showCorrectness: PropTypes.bool,
   };
 
   state = { height: 0, width: 0 };
@@ -376,6 +387,7 @@ export class RawChartAxes extends React.Component {
       autoFocus,
       onAutoFocusUsed,
       error,
+      showCorrectness,
     } = this.props;
 
     const { axis, axisLine, tick } = classes;
@@ -425,6 +437,7 @@ export class RawChartAxes extends React.Component {
         x: props.x,
         y: props.y,
         formattedValue: props.formattedValue,
+        showCorrectness,
       };
 
       return <TickComponent {...properties} />;
@@ -491,6 +504,27 @@ const ChartAxes = withStyles(
     customColor: {
       color: `${color.tertiary()} !important`,
     },
+    correctnessIcon: {
+      borderRadius: theme.spacing.unit * 2,
+      color: color.defaults.WHITE,
+      fontSize: '16px',
+      width: '16px',
+      height: '16px',
+      padding: '2px',
+      border: `1px solid ${color.defaults.WHITE}`,
+      boxSizing: 'unset', // to override the default border-box in IBX
+    },
+    incorrectIcon: {
+      backgroundColor: color.incorrectWithIcon(),
+    },
+    correctIcon: {
+      backgroundColor: color.correct(),
+    },
+    tickContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
   }),
   { withTheme: true },
 )(RawChartAxes);

package/src/bars/common/bars.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
 import { Group } from '@vx/group';
-import { color } from '@pie-lib/render-ui';
 import { Bar as VxBar } from '@vx/shape';
 import { withStyles } from '@material-ui/core/styles/index';
 import debug from 'debug';
+
+import { color } from '@pie-lib/render-ui';
+import { types } from '@pie-lib/plot';
 import { bandKey } from '../../utils';
 import DraggableHandle, { DragHandle } from '../../common/drag-handle';
+import { CorrectCheckIcon } from './correct-check-icon';
 
 const log = debug('pie-lib:chart:bars');
 const histogramColors = [
@@ -64,6 +66,7 @@ export class RawBar extends React.Component {
       value: PropTypes.string,
       label: PropTypes.string,
     }),
+    correctData: PropTypes.array,
   };
 
   constructor(props) {
@@ -144,6 +147,7 @@ export class RawBar extends React.Component {
       correctness,
       barColor,
       defineChart,
+      correctData,
     } = this.props;
     const { scale, range } = graphProps;
     const { dragValue, isHovered } = this.state;
@@ -156,9 +160,11 @@ export class RawBar extends React.Component {
     const barX = xBand(bandKey({ label }, index));
     const rawY = range.max - v;
     const yy = range.max - rawY;
+    const correctValue = correctData ? correctData.find((d) => d.label === label) : null;
     log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
 
     const Component = interactive ? DraggableHandle : DragHandle;
+    const isHistogram = !!barColor;
 
     return (
       <g
@@ -176,6 +182,40 @@ export class RawBar extends React.Component {
           className={classes.bar}
           style={{ fill: fillColor }}
         />
+        {correctness &&
+          correctness.value === 'incorrect' &&
+          (() => {
+            const correctVal = parseFloat(correctValue && correctValue.value);
+            if (isNaN(correctVal)) return null;
+            const correctPxHeight = scale.y(range.max - correctVal);
+            const actualPxHeight = barHeight;
+            const diffPx = Math.abs(correctPxHeight - actualPxHeight);
+            const yDiff = scale.y(correctVal);
+            const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
+            const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
+
+            return (
+              <>
+                <VxBar
+                  x={barX + 2} // add 2px for the stroke (the dashed border)
+                  y={yToRender}
+                  width={barWidth - 4} // substract 4px for the total stroke
+                  height={diffPx}
+                  className={classes.bar}
+                  style={{
+                    stroke: indicatorBarColor,
+                    strokeWidth: 2,
+                    strokeDasharray: '5,2',
+                    fill: 'none',
+                  }}
+                />
+                {/* adjust the position based on whether it's a histogram or not, because the histogram does not have space for the icon on the side */}
+                <foreignObject x={barX + barWidth - (isHistogram ? 24 : 14)} y={yDiff - 12} width={24} height={24}>
+                  <CorrectCheckIcon dashColor={indicatorBarColor} />
+                </foreignObject>
+              </>
+            );
+          })()}
         <Component
           x={barX}
           y={v}
@@ -194,15 +234,27 @@ export class RawBar extends React.Component {
   }
 }
 
-const Bar = withStyles(() => ({
+const Bar = withStyles((theme) => ({
   bar: {
     fill: color.defaults.TERTIARY,
   },
+  correctIcon: {
+    backgroundColor: color.correct(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '10px',
+    width: '10px',
+    height: '10px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    boxSizing: 'unset', // to override the default border-box in IBX
+  },
 }))(RawBar);
 
 export class Bars extends React.Component {
   static propTypes = {
     data: PropTypes.array,
+    correctData: PropTypes.array,
     onChangeCategory: PropTypes.func,
     defineChart: PropTypes.bool,
     xBand: PropTypes.func,
@@ -211,7 +263,7 @@ export class Bars extends React.Component {
   };
 
   render() {
-    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram } = this.props;
+    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram, correctData } = this.props;
 
     return (
       <Group>
@@ -227,6 +279,7 @@ export class Bars extends React.Component {
             onChangeCategory={(category) => onChangeCategory(index, category)}
             graphProps={graphProps}
             correctness={d.correctness}
+            correctData={correctData}
             barColor={
               histogram &&
               (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])

package/src/bars/common/correct-check-icon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const CorrectCheckIcon = ({ dashColor }) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="11" fill="white" stroke={dashColor || '#7E8494'} strokeWidth="2" strokeDasharray="5 5" />
+    <mask id="path-2-outside-1_3089_3799" maskUnits="userSpaceOnUse" x="2" y="3" width="19" height="18" fill="black">
+      <rect fill="white" x="2" y="3" width="19" height="18" />
+      <path d="M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z" />
+    </mask>
+    <path
+      d="M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z"
+      fill="#0EA449"
+    />
+    <path
+      d="M5.0625 16L5.92942 15.5015L5.92668 15.4968L5.0625 16ZM5.0625 8L4.19831 7.4968L4.19559 7.50153L5.0625 8ZM18.9062 8L19.7732 7.50152L19.7704 7.49681L18.9062 8ZM18.9062 16L18.0421 15.4968L18.0393 15.5015L18.9062 16ZM15.5312 10.5312L16.2384 11.2384L17.9455 9.53125H15.5312V10.5312ZM15.5 10.5312L14.831 9.78796L12.894 11.5312H15.5V10.5312ZM14.4688 9.46875L13.7616 8.76164L13.7585 8.76482L14.4688 9.46875ZM11 12.9688L10.2929 13.6759L11.0032 14.3861L11.7103 13.6727L11 12.9688ZM8.46875 11.5L9.13771 12.2433L9.17684 12.2081L9.21204 12.169L8.46875 11.5ZM8.46875 12.5312L9.17586 11.8241L9.15726 11.8055L9.13771 11.788L8.46875 12.5312ZM10.4688 14.5312L11.212 13.8623L11.1945 13.8427L11.1759 13.8241L10.4688 14.5312ZM12 20V19C9.479 19 7.18657 17.6879 5.92941 15.5015L5.0625 16L4.19559 16.4985C5.81343 19.3121 8.771 21 12 21V20ZM5.0625 16L5.92668 15.4968C4.6714 13.341 4.66824 10.6918 5.92941 8.49847L5.0625 8L4.19559 7.50153C2.58176 10.3082 2.5786 13.7215 4.19832 16.5032L5.0625 16ZM5.0625 8L5.92668 8.50319C7.18712 6.33851 9.48502 5 12 5V4V3C8.76498 3 5.81288 4.72399 4.19832 7.49681L5.0625 8ZM12 4V5C14.4816 5 16.7805 6.33661 18.0421 8.50319L18.9062 8L19.7704 7.49681C18.157 4.72589 15.2059 3 12 3V4ZM18.9062 8L18.0393 8.49847C19.3005 10.6918 19.2973 13.341 18.0421 15.4968L18.9062 16L19.7704 16.5032C21.3902 13.7215 21.387 10.3082 19.7732 7.50153L18.9062 8ZM18.9062 16L18.0393 15.5015C16.7811 17.6898 14.4876 19 12 19V20V21C15.1999 21 18.1564 19.3102 19.7732 16.4985L18.9062 16ZM15.5312 10.5312V9.53125H15.5V10.5312V11.5312H15.5312V10.5312ZM15.5 10.5312L16.169 11.2745C16.9447 10.5764 16.8883 9.44281 16.2071 8.76164L15.5 9.46875L14.7929 10.1759C14.7696 10.1525 14.7344 10.0966 14.7344 10.0117C14.7344 9.92377 14.7735 9.83972 14.831 9.78796L15.5 10.5312ZM15.5 9.46875L16.2071 8.76164C15.5353 8.08987 14.4334 8.08987 13.7616 8.76164L14.4688 9.46875L15.1759 10.1759C15.1167 10.235 15.0442 10.2578 14.9844 10.2578C14.9245 10.2578 14.8521 10.235 14.7929 10.1759L15.5 9.46875ZM14.4688 9.46875L13.7585 8.76482L10.2897 12.2648L11 12.9688L11.7103 13.6727L15.179 10.1727L14.4688 9.46875ZM11 12.9688L11.7071 12.2616L10.2384 10.7929L9.53125 11.5L8.82414 12.2071L10.2929 13.6759L11 12.9688ZM9.53125 11.5L10.2384 10.7929C9.55719 10.1117 8.42362 10.0553 7.72546 10.831L8.46875 11.5L9.21204 12.169C9.16028 12.2265 9.07623 12.2656 8.98828 12.2656C8.90344 12.2656 8.84748 12.2304 8.82414 12.2071L9.53125 11.5ZM8.46875 11.5L7.79979 10.7567C7.04591 11.4352 7.04591 12.5961 7.79979 13.2745L8.46875 12.5312L9.13771 11.788C9.19301 11.8377 9.23438 11.9208 9.23438 12.0156C9.23438 12.1105 9.19301 12.1935 9.13771 12.2433L8.46875 11.5ZM8.46875 12.5312L7.76164 13.2384L9.76164 15.2384L10.4688 14.5312L11.1759 13.8241L9.17586 11.8241L8.46875 12.5312ZM10.4688 14.5312L9.72546 15.2002C10.4236 15.976 11.5572 15.9195 12.2384 15.2384L11.5312 14.5312L10.8241 13.8241C10.8475 13.8008 10.9034 13.7656 10.9883 13.7656C11.0762 13.7656 11.1603 13.8048 11.212 13.8623L10.4688 14.5312ZM11.5312 14.5312L12.2384 15.2384L16.2384 11.2384L15.5312 10.5312L14.8241 9.82414L10.8241 13.8241L11.5312 14.5312Z"
+      fill="white"
+      mask="url(#path-2-outside-1_3089_3799)"
+    />
+  </svg>
+);

package/src/chart.jsx

@@ -73,6 +73,12 @@ export class Chart extends React.Component {
     language: PropTypes.string,
     mathMlOptions: PropTypes.object,
     labelsCharactersLimit: PropTypes.number,
+    correctData: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        value: PropTypes.number,
+      }),
+    ),
   };
 
   static defaultProps = {
@@ -223,6 +229,7 @@ export class Chart extends React.Component {
       mathMlOptions = {},
       language,
       labelsCharactersLimit,
+      correctData,
     } = this.props;
     let { chartType } = this.props;
 
@@ -244,7 +251,7 @@ export class Chart extends React.Component {
 
     log('[render] common:', common);
 
-    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 80 };
+    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 130 };
     const { scale } = common.graphProps;
     const xBand = dataToXBand(scale.x, categories, width, chartType);
 
@@ -300,10 +307,11 @@ export class Chart extends React.Component {
             changeEditableEnabled={changeEditableEnabled}
             top={top}
             error={error}
+            showCorrectness={chartType === 'linePlot' || chartType === 'dotPlot'}
           />
           {addCategoryEnabled ? (
-            <foreignObject x={width - 8} y={height - 8} width={100} height={40}>
-              <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'center' }}>
+            <foreignObject x={width} y={height - 16} width={width} height={height}>
+              <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'flex-start' }}>
                 <ActionsButton
                   categories={categories}
                   addCategory={this.addCategory}
@@ -324,6 +332,7 @@ export class Chart extends React.Component {
               defineChart={defineChart}
               onChange={this.changeData}
               onChangeCategory={this.changeCategory}
+              correctData={correctData}
             />
           </g>
         </Root>

package/src/common/__tests__/__snapshots__/drag-handle.test.jsx.snap

@@ -5,8 +5,11 @@ exports[`BasePoint snapshot renders 1`] = `
   className="className"
   classes={
     Object {
+      "correctIcon": "RawDragHandle-correctIcon-5",
+      "correctnessIcon": "RawDragHandle-correctnessIcon-7",
       "handle": "RawDragHandle-handle-1",
       "handleContainer": "RawDragHandle-handleContainer-3",
+      "incorrectIcon": "RawDragHandle-incorrectIcon-6",
       "svgOverflowVisible": "RawDragHandle-svgOverflowVisible-4",
       "transparentHandle": "RawDragHandle-transparentHandle-2",
     }

package/src/common/correctness-indicators.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+
+export const CorrectnessIndicator = ({ scale, x, y, classes, r, correctness, interactive }) => {
+  if (!correctness || !interactive) return null;
+  const cx = scale ? scale.x(x) : x;
+  const cy = scale ? scale.y(y) : y;
+  const isCorrect = correctness.value === 'correct';
+  const iconClass = isCorrect ? classes.correctIcon : classes.incorrectIcon;
+
+  // the icon is 16px + 2px padding + 1px border, so total size is 22px
+  return (
+    <foreignObject x={cx - 11} y={cy - 11} width={22} height={22}>
+      {isCorrect ? (
+        <Check className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />
+      ) : (
+        <Close className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />
+      )}
+    </foreignObject>
+  );
+};
+
+export const SmallCorrectPointIndicator = ({ scale, x, r, correctness, classes, correctData, label }) => {
+  if (correctness && correctness.value === 'incorrect') {
+    const correctVal = parseFloat(correctData.find((d) => d.label === label)?.value);
+    if (isNaN(correctVal)) return null;
+    const correctPxY = scale.y(correctVal);
+    const yToRender = correctPxY - 7.5;
+    const xToRender = scale.x(x) - 7.5;
+
+    // small circle has 10px font + 2px padding + 1px border, so total size is 15px
+    return (
+      <foreignObject x={xToRender} y={yToRender} width={15} height={15}>
+        <Check
+          className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
+          title={correctness.label}
+        />
+      </foreignObject>
+    );
+  }
+
+  return null;
+};
+
+export const TickCorrectnessIndicator = ({ classes, correctness, interactive }) => {
+  if (!correctness || !interactive) return null;
+
+  return correctness.value === 'correct' ? (
+    <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />
+  ) : (
+    <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} title={correctness.label} />
+  );
+};

package/src/common/drag-handle.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+
 import { gridDraggable, utils, types } from '@pie-lib/plot';
 import { color as enumColor } from '@pie-lib/render-ui';
 import { correct, incorrect, disabled } from './styles';
@@ -20,6 +23,7 @@ const RawDragHandle = ({
   isHovered,
   correctness,
   color,
+  isPlot,
   ...rest
 }) => {
   const { scale } = graphProps;
@@ -55,20 +59,14 @@ const RawDragHandle = ({
         </filter>
       </defs>
 
-      {correctness && (
-        <rect
-          y={10}
-          width={width}
-          filter="url(#bottomShadow)"
-          className={classNames(
-            classes.handle,
-            'handle',
-            className,
-            !interactive && 'non-interactive',
-            interactive && correctness && correctness.value,
+      {correctness && interactive && !isPlot && (
+        <foreignObject x={width / 2 - 14} y={0} width={40} height={40}>
+          {correctness.value === 'correct' ? (
+            <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />
+          ) : (
+            <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} title={correctness.label} />
           )}
-          {...rest}
-        />
+        </foreignObject>
       )}
     </svg>
   );
@@ -90,7 +88,7 @@ RawDragHandle.propTypes = {
   color: PropTypes.string,
 };
 
-export const DragHandle = withStyles(() => ({
+export const DragHandle = withStyles((theme) => ({
   handle: {
     height: '10px',
     fill: 'transparent',
@@ -118,6 +116,22 @@ export const DragHandle = withStyles(() => ({
   svgOverflowVisible: {
     overflow: 'visible !important',
   },
+  correctIcon: {
+    backgroundColor: enumColor.correct(),
+  },
+  incorrectIcon: {
+    backgroundColor: enumColor.incorrectWithIcon(),
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: enumColor.defaults.WHITE,
+    fontSize: '16px',
+    padding: '2px',
+    border: `4px solid ${enumColor.defaults.WHITE}`,
+    width: '16px',
+    height: '16px',
+    boxSizing: 'unset', // to override the default border-box in IBX
+  },
 }))(RawDragHandle);
 
 export const D = gridDraggable({

package/src/line/common/__tests__/__snapshots__/drag-handle.test.jsx.snap

@@ -5,8 +5,13 @@ exports[`BasePoint snapshot renders 1`] = `
   className="className"
   classes={
     Object {
+      "correctIcon": "RawDragHandle-correctIcon-5",
+      "correctnessIcon": "RawDragHandle-correctnessIcon-7",
+      "disabledPoint": "RawDragHandle-disabledPoint-4",
       "handle": "RawDragHandle-handle-1",
+      "incorrectIcon": "RawDragHandle-incorrectIcon-6",
       "line": "RawDragHandle-line-3",
+      "smallIcon": "RawDragHandle-smallIcon-8",
       "transparentHandle": "RawDragHandle-transparentHandle-2",
     }
   }

package/src/line/common/__tests__/__snapshots__/line.test.jsx.snap

@@ -95,6 +95,7 @@ exports[`RawLine snapshot renders 1`] = `
       }
     }
     key="point-0-0"
+    label="A"
     onDrag={[Function]}
     onDragStart={[Function]}
     onDragStop={[Function]}
@@ -130,6 +131,7 @@ exports[`RawLine snapshot renders 1`] = `
       }
     }
     key="point-1-1"
+    label="B"
     onDrag={[Function]}
     onDragStart={[Function]}
     onDragStop={[Function]}