plotly · aliwelchoo · Jul 21, 2023 · Jul 21, 2023 · Jul 21, 2023 · Jul 21, 2023
diff --git a/devtools/test_dashboard/index-mathjax3.html b/devtools/test_dashboard/index-mathjax3.html
@@ -24,6 +24,10 @@ <h4>no MathJax: Apple: $2, Orange: $3</h4>
    <div id="graph"></div>
  </div>
  <div id="snapshot"></div>
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>

  <script>
    window.MathJax = {

diff --git a/devtools/test_dashboard/index-mathjax3chtml.html b/devtools/test_dashboard/index-mathjax3chtml.html
@@ -22,6 +22,10 @@
    <div id="graph"></div>
  </div>
  <div id="snapshot"></div>
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>

  <script>
    window.MathJax = window.MathJax || {

diff --git a/devtools/test_dashboard/index-strict.html b/devtools/test_dashboard/index-strict.html
@@ -21,6 +21,10 @@
    <div id="graph"></div>
  </div>
  <div id="snapshot"></div>
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>

  <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
  <script charset="utf-8" id="source" src="../../build/plotly.js"></script>

diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html
@@ -20,7 +20,10 @@
    <div id="graph"></div>
  </div>
  <div id="snapshot"></div>
-
+  <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
+    <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+    <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
+  </div>
  <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
  <script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
  <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>

diff --git a/src/plot_api/accessibility.js b/src/plot_api/accessibility.js
@@ -1,5 +1,6 @@
 'use strict';

+var Lib = require('../lib');
 var c2m = require('chart2music');
 var Fx = require('../components/fx');

@@ -9,24 +10,23 @@ function enable(gd) {
    var accessibilityVars = gd._context.accessibility;
    var library = accessibilityVars.library;
    var options = accessibilityVars.options;
+    var info = accessibilityVars.info;
+    var closedCaptionsOptions = accessibilityVars.closedCaptions;
    if(!supportedAccessibilityLibraries.includes(library)) {
        // 'Accessibility not implemented for library: ' + library
        return;
    }
    if(library === 'chart2music') {
        var c2mData = {};
        var labels = [];
-        var info = options.info;
-        delete options.info;
        var fullData = gd._fullData;
-
        for(var i = 0; i < fullData.length; i++) {
            var trace = fullData[i] ? fullData[i] : {};
            var type = trace.type;
-            var x = trace.x ? trace.x : [];
-            var y = trace.y ? trace.y : [];
-            var name = trace.name ? trace.name : i;
-            var text = trace.text ? trace.text : [];
+            var x = trace.x !== undefined ? trace.x : [];
+            var y = trace.y !== undefined ? trace.y : [];
+            var name = trace.name !== undefined ? trace.name : i;
+            var text = trace.text !== undefined ? trace.text : [];
            if(type === 'scatter') {
                var traceData = [];
                if('y' in trace) {
@@ -38,6 +38,7 @@ function enable(gd) {
                                label: text[p] ? text[p] : p
                            });
                    }
+                    if(traceData.length === 0) continue;
                    c2mData[name] = traceData;
                    labels.push(name);
                }
@@ -46,16 +47,43 @@ function enable(gd) {
                return;
            }
        }
+        var closedCaptions;
+        if(closedCaptionsOptions.generate) {
+            closedCaptions = document.createElement('div'); // should this be Lib.getGraphDiv()?
+            closedCaptions.id = closedCaptionsOptions.elId;
+            closedCaptions.className = closedCaptionsOptions.elClassname;
+            gd.parentNode.insertBefore(closedCaptions, gd.nextSibling); // this does get generated
+            // TODO we need a better generator
+        } else {
+            closedCaptions = document.getElementById(closedCaptionsOptions.elId);
+            if(closedCaptions === null) {
+                // TODO maybe handle this better for the developer?
+                return;
+            }
+        }

-        var closedCaptions = document.createElement('div');
-        closedCaptions.id = 'cc';
-        closedCaptions.className = 'closed_captions';
-        gd.appendChild(closedCaptions); // this does get generated
+        var titleText = 'Chart';
+        if((gd._fullLayout.title !== undefined) && (gd._fullLayout.title.text !== undefined)) {
+            titleText = gd._fullLayout.title.text;
+        }

-        var titleText = gd._fullLayout.title.text ? gd._fullLayout.title.text : 'Chart';
-        var xaxisText = gd._fullLayout.xaxis.title.text ? gd._fullLayout.xaxis.title.text : 'X Axis';
-        var yaxisText = gd._fullLayout.yaxis.title.text ? gd._fullLayout.yaxis.title.text : 'Y Axis';
-        options.onFocusCallback = function(dataInfo) {
+        var xAxisText = 'X Axis';
+        if((gd._fullLayout.xaxis !== undefined) &&
+            (gd._fullLayout.xaxis.title !== undefined) &&
+            (gd._fullLayout.xaxis.title.text !== undefined)) {
+            xAxisText = gd._fullLayout.xaxis.title.text;
+        }
+        var yAxisText = 'Y Axis';
+        if((gd._fullLayout.yaxis !== undefined) &&
+            (gd._fullLayout.yaxis.title !== undefined) &&
+            (gd._fullLayout.yaxis.title.text !== undefined)) {
+            yAxisText = gd._fullLayout.yaxis.title.text;
+        }
+        // Arguably should pass all config as copy to C2M
+        // If C2M eventually modifies them in any way (minus w/ _ prefix)
+        // It will always break transition/redraw logic in react
+        var options2 = Lib.extendDeepAll({}, options);
+        options2.onFocusCallback = function(dataInfo) {
            Fx.hover(gd, [{
                curveNumber: labels.indexOf(dataInfo.slice),
                pointNumber: dataInfo.index
@@ -66,16 +94,16 @@ function enable(gd) {
            type: 'line',
            axes: {
                x: {
-                    label: xaxisText
+                    label: xAxisText
                },
                y: {
-                    label: yaxisText
+                    label: yAxisText
                },
            },
            element: gd,
            cc: closedCaptions,
            data: c2mData,
-            options: options,
+            options2: options,
            info: info
        });
    }

diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
@@ -2676,7 +2676,6 @@ function react(gd, data, layout, config) {
            setPlotContext(gd, config);
            configChanged = diffConfig(oldConfig, gd._context);
        }
-
        gd.data = data || [];
        helpers.cleanData(gd.data);
        gd.layout = layout || {};
@@ -2747,7 +2746,6 @@ function react(gd, data, layout, config) {

            Plots.doCalcdata(gd);
            subroutines.doAutoRangeAndConstraints(gd);
-
            seq.push(function() {
                return Plots.transitionFromReact(gd, restyleFlags, relayoutFlags, oldFullLayout);
            });
@@ -3663,7 +3661,6 @@ function deleteFrames(gd, frameList) {
 */
 function purge(gd) {
    gd = Lib.getGraphDiv(gd);
-
    var fullLayout = gd._fullLayout || {};
    var fullData = gd._fullData || [];

@@ -3681,7 +3678,6 @@ function purge(gd) {

    // in contrast to _doPlots.purge which does NOT clear _context!
    delete gd._context;
-
    return gd;
 }


diff --git a/src/plot_api/plot_config.js b/src/plot_api/plot_config.js
@@ -478,9 +478,11 @@ var configAttributes = {
        dflt: {
            library: 'chart2music',
            enabled: true,
-            options: {info: {}}
+            options: {},
+            info: {},
+            closedCaptions: {generate: false, elId: 'c2m-plotly-cc', elClassname: 'c2m-plotly-closed_captions'}
        },
-        description: ['Accessibility options: which library to use; whether to enable and the options to pass to the library.',
+        description: ['Accessibility options: which library to use; whether to enable, options to pass to the library, info to pass to the library, closedCaptions to control how plotly renders the closed-captions element.',
            'chart2music is supported and options here include Options and Info from https://www.chart2music.com/docs/API/Config. '
        ].join(' ')
    },

diff --git a/test/jasmine/assets/create_graph_div.js b/test/jasmine/assets/create_graph_div.js
@@ -5,6 +5,11 @@ module.exports = function createGraphDiv() {
    gd.id = 'graph';
    document.body.appendChild(gd);

+    var closedCaptions = document.createElement('div');
+    closedCaptions.id = 'c2m-plotly-cc';
+    closedCaptions.className = 'c2m-plotly-closed_captions';
+    document.body.appendChild(closedCaptions); // this does get generated
+
    // force the graph to be at position 0,0 no matter what
    gd.style.position = 'fixed';
    gd.style.left = 0;

diff --git a/test/jasmine/tests/transition_test.js b/test/jasmine/tests/transition_test.js
@@ -558,11 +558,10 @@ describe('Plotly.react transitions:', function() {
        var data = [{y: [1, 2, 1]}];
        var layout = {transition: {duration: 10}};
        var config = {scrollZoom: true};
-
        Plotly.react(gd, data, layout, config)
        .then(function() {
            assertSpies('first draw', [
-                [Plots, 'transitionFromReact', 0]
+                [Plots, 'transitionFromReact', 0] // so Plots.transitionFromReact should equal 0, ie didn't get called
            ]);
        })
        .then(function() {
@@ -581,7 +580,7 @@ describe('Plotly.react transitions:', function() {
        })
        .then(function() {
            assertSpies('no config change', [
-                [Plots, 'transitionFromReact', 1]
+                [Plots, 'transitionFromReact', 1] // react is not calling transitionFromReact, why?
            ]);
        })
        .then(done, done.fail);

diff --git a/test/plot-schema.json b/test/plot-schema.json
@@ -104,6 +104,21 @@
  }
 },
 "config": {
+  "accessibility": {
+   "description": "Accessibility options: which library to use; whether to enable, options to pass to the library, info to pass to the library, closedCaptions to control how plotly renders the closed-captions element. chart2music is supported and options here include Options and Info from https://www.chart2music.com/docs/API/Config. ",
+   "dflt": {
+    "closedCaptions": {
+     "elClassname": "c2m-plotly-closed_captions",
+     "elId": "c2m-plotly-cc",
+     "generate": false
+    },
+    "enabled": true,
+    "info": {},
+    "library": "chart2music",
+    "options": {}
+   },
+   "valType": "any"
+  },
  "autosizable": {
   "description": "Determines whether the graphs are plotted with respect to layout.autosize:true and infer its container size.",
   "dflt": false,
-Original file line number
+Diff line change
@@ -24,6 +24,10 @@ <h4>no MathJax: Apple: $2, Orange: $3</h4>
         <div id="graph"></div>
       </div>
       <div id="snapshot"></div>
+      <div style="position:absolute; border-top: .3em solid #eee; bottom: 0px; left: 0; width: 100%">
             Copy link

  
      
    
  

  
      

  
    Collaborator


      

  

  
    
      

      
            marthacryan
  

      

      

      


        Sep 17, 2024


      
    

  


        
      
  
  
  
    

    There was a problem hiding this comment.


  

 
  
    

    Choose a reason for hiding this comment

    
      The reason will be displayed to describe this comment to others. Learn more.
    

    
      
      


  


  
    
      I'm not sure if we want this to be included in every test dashboard by default. Maybe we could add a special flag for that?
    
  
  


    

        
      
  
  
    
  
  
  
    
    Sorry, something went wrong.
  

  
    
  
    
      

              Uh oh!

              
There was an error while loading. Please reload this page.


  
  


          
      
  
    
    
      
        
            
    All reactions
+        <div style="margin-top: -1.2em; padding-left: 3px; font-weight: bold; color: #555; width:100%;">Closed Captions</div>
+        <div id="c2m-plotly-cc" style="width: 100%; height: 40px; padding: 18px 0 0 15px; color: #333">Test</div>
             Copy link

  
      
    
  

  
      

  
    Collaborator


      

  

  
    
      

      
            marthacryan
  

      

      

      


        Sep 17, 2024


      
    

  


        
      
  
  
  
    

    There was a problem hiding this comment.


  

 
  
    

    Choose a reason for hiding this comment

    
      The reason will be displayed to describe this comment to others. Learn more.
    

    
      
      


  


  
    
      We could have something more informative than "Test" here as the default value.
    
  
  


    

        
      
  
  
    
  
  
  
    
    Sorry, something went wrong.
  

  
    
  
    
      

              Uh oh!

              
There was an error while loading. Please reload this page.


  
  


          
      
  
    
    
      
        
            
    All reactions
+      </div>
       <script>
         window.MathJax = {
-          Expand Down