Correct annotation axesref

Author: VeraZab

src/components/fields/derived.js

@@ -7,6 +7,7 @@ import {
   capitalize,
   connectLayoutToPlot,
   connectToContainer,
+  getAllAxes,
   supplyLayoutPlotProps,
   striptags,
 } from 'lib';
@@ -195,7 +196,7 @@ export const LayoutNumericFraction = connectLayoutToPlot(
 
 export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {fullContainer: {xref, yref}, plotly, graphDiv} = context;
+    const {fullContainer: {xref, yref}} = context;
 
     let currentAxisRef;
     if (props.attr === 'axref') {
@@ -211,12 +212,19 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
 
     if (currentAxisRef === 'paper') {
       // If currentAxesRef is paper provide all axes options to user.
-      plotProps.options = [
-        {label: 'in pixels', value: 'pixel'},
-        ...computeAxesRefOptions(
-          plotly.Axes.list(graphDiv, props.attr.charAt(1))
-        ),
-      ];
+      if (props.attr === 'axref') {
+        plotProps.options = [
+          {label: 'in pixels', value: 'pixel'},
+          ...computeAxesRefOptions(getAllAxes(context.fullLayout), 'x'),
+        ];
+      }
+
+      if (props.attr === 'ayref') {
+        plotProps.options = [
+          {label: 'in pixels', value: 'pixel'},
+          ...computeAxesRefOptions(getAllAxes(context.fullLayout), 'y'),
+        ];
+      }
     } else {
       // If currentAxesRef is an actual axes then offer that value as the only
       // axes option.
@@ -232,7 +240,7 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
 
 export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {fullContainer: {axref, ayref}, graphDiv, plotly} = context;
+    const {fullContainer: {axref, ayref}} = context;
 
     let currentOffsetRef;
     if (props.attr === 'xref') {
@@ -246,12 +254,19 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
       );
     }
 
-    plotProps.options = [
-      {label: 'Canvas', value: 'paper'},
-      ...computeAxesRefOptions(
-        plotly.Axes.list(graphDiv, props.attr.charAt(0))
-      ),
-    ];
+    if (props.attr === 'xref') {
+      plotProps.options = [
+        {label: 'Canvas', value: 'paper'},
+        ...computeAxesRefOptions(getAllAxes(context.fullLayout), 'x'),
+      ];
+    }
+
+    if (props.attr === 'yref') {
+      plotProps.options = [
+        {label: 'Canvas', value: 'paper'},
+        ...computeAxesRefOptions(getAllAxes(context.fullLayout), 'y'),
+      ];
+    }
 
     if (currentOffsetRef !== 'pixel') {
       plotProps.updatePlot = v => {
@@ -279,27 +294,32 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
 
 export const PositioningRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {graphDiv, plotly} = context;
-
-    plotProps.options = [
-      {label: 'Canvas', value: 'paper'},
-      ...computeAxesRefOptions(
-        plotly.Axes.list(graphDiv, props.attr.charAt(0))
-      ),
-    ];
+    if (props.attr === 'xref') {
+      plotProps.options = [
+        {label: 'Canvas', value: 'paper'},
+        ...computeAxesRefOptions(getAllAxes(context.fullLayout), 'x'),
+      ];
+    }
 
+    if (props.attr === 'yref') {
+      plotProps.options = [
+        {label: 'Canvas', value: 'paper'},
+        ...computeAxesRefOptions(getAllAxes(context.fullLayout), 'y'),
+      ];
+    }
     plotProps.clearable = false;
   },
 });
 
-function computeAxesRefOptions(axes) {
+function computeAxesRefOptions(axes, refAxis) {
   const options = [];
   for (let i = 0; i < axes.length; i++) {
     const ax = axes[i];
-
-    // checking user data for title avoids default "Click to enter axis title"
-    const label = striptags(ax._input.title || ax._id);
-    options[i] = {label, value: ax._id};
+    if (ax._id.charAt(0) === refAxis) {
+      // checking user data for title avoids default "Click to enter axis title"
+      const label = striptags(ax._input.title || ax._id);
+      options.push({label, value: ax._id});
+    }
   }
 
   return options;

src/lib/connectAxesToLayout.js

@@ -21,13 +21,15 @@ function computeAxesOptions(axes, _) {
       ? ax.subplot + '.' + ax._name
       : ax.subplot
     ).trim();
-    const axisTitle = !ax.title.startsWith('Click') ? ax.title : null;
+
     options[i + 1] = {
       label,
       value,
       axisGroup: ax.axisGroup,
       title: striptags(
-        axisTitle ? `${label} Axis: ${axisTitle}` : capitalize(ax._id)
+        ax._input.title
+          ? `${label} Axis: ${ax._input.title}`
+          : capitalize(ax._id)
       ),
     };
   }