Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Publish Graphs as a Research Note #65

Open
IshaGupta18 opened this issue Jul 3, 2019 · 20 comments
Open

Publish Graphs as a Research Note #65

IshaGupta18 opened this issue Jul 3, 2019 · 20 comments
Labels
discussion enhancement New feature or request gsoc summer of code

Comments

@IshaGupta18
Copy link
Collaborator

Is your feature request related to a problem? Please describe.
Once we complete the integration with plots2, one of the features for Public Lab users could be to publish the created graphs as a Research Note.

Propose ideas to implement this feature
This is how I thought of doing it while I was writing my proposal.
image

However, I am not sure how to go about it exactly.

Do we store the graphs as images and render them in notes or how would we implement the partial thing exactly.

Additional context

I would love it if anyone could suggest a flow of things here. On how should we go about it.

@jywarren @namangupta01 @rexagod @gauravano @sagarpreet-chadha @IgorWilbert
@IshaGupta18 IshaGupta18 added enhancement New feature or request discussion labels Jul 3, 2019
@jywarren
Copy link
Member

jywarren commented Jul 3, 2019

Hi! Notice how when you drag a CSV into https://stable.publiclab.org/post, you get this power tag:

Screenshot 2019-07-03 at 1 24 39 PM

image

That's the "rich text" view. In Markdown, it's simply: [graph:/i/21643.csv]

When you hit Publish, you see this:

https://stable.publiclab.org/notes/warren/07-03-2019/test-csv

That's because this power tag, in format [graph:/i/21643.csv], gets converted into the following HTML/JS code:

<canvas class="inline-graph" id="graph-grid-101"></canvas>
<p class="graph-utils"><small><a href="/i/21643.csv"><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/21643.csv", "graph-grid-101");
})()
</script>
</p>

The substitution is done here: https://github.com/publiclab/plots2/blob/50f97ea138acaeb4db641f50be1835886945d2ef/app/models/concerns/node_shared.rb#L38-L54

And the output is driven from this template (as referenced in the substitution method above, which scans through the note body):

https://github.com/publiclab/plots2/blob/50f97ea138acaeb4db641f50be1835886945d2ef/app/views/grids/_graph.html.erb#L1-L16

See how this fits together?

@jywarren
Copy link
Member

jywarren commented Jul 3, 2019

Similarly, you could create a new graph powertag, like [simple-graph:/i/example.csv] which would get inserted in the same way. Don't worry about the drag-and-drop part yet, I can show you later. (see here for more)

For now, just focus on how the powertag [graph:/i/example.csv] gets converted into a displayed graph. If you make your own template at /app/views/grids/_simple_graph.html.erb you can start setting this up!

We actually have a test demonstrating the existing graph integration here:

https://github.com/publiclab/plots2/blob/50f97ea138acaeb4db641f50be1835886945d2ef/test/unit/node_shared_test.rb#L170-L174

You could make a similar test to show your own powertag!

@IshaGupta18
Copy link
Collaborator Author

Wow this is some pretty great stuff here. I can see how this ties up together, but I think I might want to do it a little differently. Since the graphs are already made, we could create a Research Note similar to this one but with the already plotted graphs, instead of drag and drop (since it already exists). Let me study this a little more deeply and I think we'll be good to go with a similar thing then. I'll post more doubts once I begin with this! Thanks a ton!

@IshaGupta18 IshaGupta18 mentioned this issue Jul 7, 2019
Closed
@IgorWilbert
Copy link
Member

@IshaGupta18 not sure if I understand how you want to do this. If there is no drag and drop to create a Research Note with a given graph, do you plan to attach the graph to the note with an "upload button", for example? If yes, why don't we do both? If I am not mistaken, in Image Sequencer it is possible to upload an image either selecting the file or using drag and drop. Maybe we could do the same but with graphs and "loading a preview" of them too. Also, if you need some help with UI or coding problems just ping ;)

@jywarren
Copy link
Member

jywarren commented Jul 8, 2019

I think we could start by implementing the [simple-graph:____.csv] filtering in wikis/notes, without also doing drag/drop at the same time, as a first step. We could for example, as a first step, make it so you have to just drag/drop a CSV as you do now, but then change [graph:____.csv] to [simple-graph:____.csv] and then your code would start working. Then later we could decide how we want to handle the dragging and dropping! How's that sound?

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 8, 2019 via email

@jywarren
Copy link
Member

jywarren commented Jul 8, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 8, 2019 via email

@jywarren
Copy link
Member

jywarren commented Jul 8, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 8, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

Okay, so I have been sleuthing through all the codes and files that come together and create the inline graph feature and I found a lot of interesting stuff, much of which I understood, but I still have some doubts one of them being, from where exactly are we sending this post request to /images
image

And in my study I found the entire trace: we go from show.html.erb to application_helper to node_shared which calls the partial _graph.html.erb which calls a functions in graph.js and presto! we get our inline graph.
But what I am not getting is this post request. Is it coming from drag_drop.js or where? Because I see this
image

when I drag and drop a CSV, so where is this coming from exactly. I would be following a similar track to achieve this new feature, so thats why I need so much clarity. Please let me know the last bits and pieces of this puzzle!

@jywarren @gauravano @Souravirus @namangupta01

@IshaGupta18
Copy link
Collaborator Author

There are some links between this flow that I have written which are missing. For example where exactly is this tag created with a particular name like this and this format of values?

@jywarren
Copy link
Member

Hi! The post request would come from dragdrop.js if from a comment textarea. But if from the editor at /post or /questions/new, then it's from the PublicLab.Editor project. Both post to the images controller to upload any filetype allowed. Then they get back a URL once it's uploaded. Hope that helps!

@jywarren
Copy link
Member

And, you can manually create the tag. But, if you drag in, PublicLab.editor will autogenerate it for you.

publiclab/PublicLab.Editor#137

And

publiclab/PublicLab.Editor#141

@IshaGupta18
Copy link
Collaborator Author

@jywarren thanks a lot for the comment! However, I wanted to tell you that I am struggling a lot with this ie I am not able to clearly find a way to implement it, despite going through almost everything. Is there a way that I could to you or someone who has worked with editor and nodes, to achieve this? Maybe a small 10-minute talk, in case you're free sometime? In the meanwhile, I'll try to read up more about it.

@IshaGupta18
Copy link
Collaborator Author

Maybe we can come a little before the open call or something? I also wanted to let you know that I am working on CODAP and UI testing a little. And I also listed the flow of things in the integration PR publiclab/plots2#5993 (comment)

@jywarren
Copy link
Member

I may be a bit busy this week at a conference, but I will give some hints here! Start by creating a new method in node_shared.rb, a copy of the existing graph method that can pattern match something similar like [simple-graph:/path/example.csv]

List the new method in this file right below the existing graph method:

https://github.com/publiclab/plots2/blob/75f3a7e23603c83fd0bfcd74cb38457f0e95fd86/app/helpers/application_helper.rb#L75-L90

Then upload a CSV in a wiki page to test on locally. You should be able to manually change the current default "graph" to "simple-graph" in the short code on your wiki, and see your new graph code generate. At first it'll be the same as the existing one. But if you make a new template like _simple-graph.html.erb, you'll be able to point your new method at that template instead.

Try opening a PR with the above elements. It doesn't have to be perfect but I can leave comments to help point out anything you've missed. This is a good working approach anyways as then everyone is on the same page and we can point at specific lines of code.

Just remember we don't have to make the entire system at once. We can do it piecemeal and it usually results in better modularization of code anyways!

@jywarren
Copy link
Member

So you can start by just copying the new files and methods and I can help you modify and customize them as a next step!

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 14, 2019 via email

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 14, 2019 via email

This was referenced Aug 1, 2019
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion enhancement New feature or request gsoc summer of code
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jywarren @IshaGupta18 @IgorWilbert