CSV graph display in comments not loading

[jywarren]

This was a very obscure use case but probably affected by the new commenting code -- it looks like a pretty easy fix though, as we're mainly seeing some JS object turned directly into a string instead of some property of it being shown:

https://publiclab.org/questions/stevie/08-23-2019/what-are-best-practices-and-tools-to-help-clean-up-data-sets#c25527

@noi5e what do you think here?

<div class="comment-body" id="comment-body-25527">
  | <p>Hi <a href="/profile/crispinpierce">@crispinpierce</a> - are the 50 csv files each a 24-hour datalog?</p>
  |  
  | <p>I'm going to test out uploading a CSV to help debug here, too, so hang on a sec:</p>
  |  
  | <canvas class="inline-graph" id="graph-grid-49"></canvas>
  | <p class="graph-utils"><small><a href="/i/35299"><i class="fa fa-download"></i> CSV</a></small></p>
  | <style>
  | .graph-utils {
  | text-align: right;
  | }
  | .graph-utils a,
  | .graph-utils i {
  | color: #aaa;
  | }
  | </style>
  | <script>
  | (function(){
  | graphUrl("/i/35299", "graph-grid-49");
  | })()
  | </script>
  | [object Object]</p>
  |  
  | </div>
  |  
  |  

The [object Object] line seems off, but I'm not sure what's going on. Here's the code in the template:

plots2/app/views/grids/_graph.html.erb

Lines 1 to 16 in e646cfd

	<canvas class="inline-graph" id="<%= idName %>"></canvas>
	<p class="graph-utils"><small><a href="<%= url %>"><i class="fa fa-download"></i> CSV</a></small></p>
	<style>
	.graph-utils {
	text-align: right;
	}
	.graph-utils a,
	.graph-utils i {
	color: #aaa;
	}
	</style>
	<script>
	(function(){
	graphUrl("<%= url %>", "<%= idName %>");
	})()
	</script>

Maybe it's trying to insert the graph but it's inserting an object instead of a DOM element? That seems plausible. Thanks @ebarry for noticing this!

[jywarren]

And, sorry this was such an esoteric obscure feature! It should've had a test but I believe it predated system tests?

[noi5e]

@jywarren Hmm, yeah, that is super weird! In my experience, the object Object thing DOES happen when objects are converted back and forth from strings and so forth. So I think you're correct it's probably something like that happening.

I remember toward the end of the Outreachy internship, you mentioned once in a meeting that comments and posts will go through some kind of processing library to enable CSV insert like this. What's the name of that library, and where is it called in the codebase?

It seems like that would be the place to look, maybe the library needs an update or isn't playing nice with other scripts on the page or something.

I can't remember doing anything that touched on comment pre-processing. I think I could've gone there, but chose to work on a React rebuild instead.

[jywarren]

OK, cool, thanks -- let's see.

Here's the filter; i believe it's fetching the template, inserting things, and it actually seems OK, because it's inserting /something/:

plots2/app/models/concerns/node_shared.rb

Lines 57 to 73 in 4b3557e

	# rubular regex: http://rubular.com/r/hBEThNL4qd
	def self.graph_grid(body, _page = 1)
	body.gsub(/(?<![\>`])(\<p\>)?\[graph\:(\S+)\]/) do |_tagname|
	url = Regexp.last_match(2)
	a = ActionController::Base.new
	randomSeed = rand(1000).to_s
	output = a.render_to_string(template: "grids/_graph",
	layout: false,
	locals: {
	url: url,
	randomSeed: randomSeed,
	idName: 'graph-grid-' + randomSeed,
	type: "graph"
	})
	output
	end
	end

Just looking in the same commit as those changes, i see #1689

blast from the past!

So i bet this is via Chart.js: we'd used "chart.js": "v2.7.0" back then.

There's no breaking version bump:

plots2/package.json

Line 30 in 4b3557e

"chart.js": "^2.9.4",

But, let's see... https://github.com/chartjs/Chart.js/issues

There is a v3.4.1 now available. But i think we're still using v2.9 so...

[jywarren]

Ah, looks like the CSVs themselves aren't loading, possibly due to CORS or something on the new Google Storage API?

[jywarren]

Yes! OK, asking @icarito

[icarito]

Yes my javascript console reads:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://storage.googleapis.com/production-public-files/public/system/images/photos/000/035/463/original/File_4_trimmed.csv. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Will look into how to add this to GCP Storage.