[WIP] Continued refinements to cytoscape visualization #9902

17sushmita · 2021-07-12T09:58:14Z

Fixes #9880
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

PR is descriptively titled 📑 and links the original issue above 🔗
tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with rake test
code is in uniquely-named feature branch and has no merge conflicts 📁
screenshots/GIFs are attached 📎 in case of UI updation
ask @publiclab/reviewers for help, in a comment below

Changes made till now-

tag names on node text outline in same color as node.
removed redundant edges because of bidirectional data at https://publiclab.org/tag/graph.json

Responsive

Highlight tags/nodes on hovering instead of tapping on desktop.
Highlight tag/nodes on taphold and go to tag page on tap.
Display only top 100 tags on mobile devices to make it more readable and clear.

Before-(https://publiclab.org/stats/graph)

After-(https://unstable.publiclab.org/stats/graph)

Mobile view before-

Mobile view after-

On hover-

gitpod-io · 2021-07-12T09:58:16Z

codeclimate · 2021-07-12T09:59:41Z

app/models/tag.rb

        }
      end
      data["edges"] = []
      data["tags"].each do |tag|
        Tag.related(tag["name"], 10).each do |related_tag|
-          data["edges"] << { "from" => tag["name"], "to" => related_tag.name }
+          reverse = {"from" => related_tag.name, "to" => tag["name"]}


Space inside { missing.

codeclimate · 2021-07-12T09:59:41Z

app/models/tag.rb

        }
      end
      data["edges"] = []
      data["tags"].each do |tag|
        Tag.related(tag["name"], 10).each do |related_tag|
-          data["edges"] << { "from" => tag["name"], "to" => related_tag.name }
+          reverse = {"from" => related_tag.name, "to" => tag["name"]}


Space inside } missing.

codeclimate · 2021-07-12T09:59:41Z

app/models/tag.rb

        }
      end
      data["edges"] = []
      data["tags"].each do |tag|
        Tag.related(tag["name"], 10).each do |related_tag|
-          data["edges"] << { "from" => tag["name"], "to" => related_tag.name }
+          reverse = {"from" => related_tag.name, "to" => tag["name"]}
+          unless (data["edges"].include? reverse)


Don't use parentheses around the condition of an unless.

codeclimate · 2021-07-12T09:59:41Z

app/models/tag.rb

@@ -387,13 +387,16 @@ def self.graph_data(limit = 250)
        .limit(limit).each do |tag|
        data["tags"] << {
          "name" => tag.name,
-          "count" => tag.count
+          "count" => tag.count,


Avoid comma after the last item of a hash.

codecov · 2021-07-12T10:03:57Z

Codecov Report

Merging #9902 (12f013c) into main (1aaf43b) will increase coverage by 0.05%.
The diff coverage is 81.48%.

❗ Current head 12f013c differs from pull request most recent head ccf4c85. Consider uploading reports for the commit ccf4c85 to get more accurate results

@@            Coverage Diff             @@
##             main    #9902      +/-   ##
==========================================
+ Coverage   82.06%   82.12%   +0.05%     
==========================================
  Files          98       98              
  Lines        5945     5952       +7     
==========================================
+ Hits         4879     4888       +9     
+ Misses       1066     1064       -2

Impacted Files	Coverage Δ
app/channels/room_channel.rb	`71.42% <0.00%> (ø)`
app/controllers/tag_controller.rb	`80.42% <33.33%> (+0.61%)`	⬆️
app/helpers/application_helper.rb	`85.41% <66.66%> (ø)`
app/controllers/stats_controller.rb	`71.57% <100.00%> (ø)`
app/models/node.rb	`91.04% <100.00%> (+0.02%)`	⬆️
app/models/tag.rb	`97.53% <100.00%> (+0.03%)`	⬆️
app/models/user.rb	`86.12% <100.00%> (+0.09%)`	⬆️

codeclimate · 2021-07-12T11:55:18Z

Code Climate has analyzed commit ccf4c85 and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	1

View more on Code Climate.

17sushmita · 2021-07-12T12:37:14Z

Just a small tweak we can do is to hide the edges when highlighting a single node on hover for some clear representation. e.g-

What do you think @jywarren @ebarry @cesswairimu

noi5e · 2021-07-12T17:41:35Z

@17sushmita This definitely improves the visuals a LOT! What do you think of the codeclimate issues? They seem like pretty easy fixes that aren't too complicated.

17sushmita · 2021-07-12T18:04:20Z

@17sushmita This definitely improves the visuals a LOT! What do you think of the codeclimate issues? They seem like pretty easy fixes that aren't too complicated.

Yes I've fixed the style issues. But the complexity issue is about maximum allowed no of lines in a method is 25 and this method is of 26 lines. How to fix this🤔.
Also, I'm planning to make more refinements to the cytoscape visualisation so this PR is not completed yet.

noi5e · 2021-07-12T19:46:06Z

Also, I'm planning to make more refinements to the cytoscape visualisation so this PR is not completed yet.

Got it!

Yes I've fixed the style issues. But the complexity issue is about maximum allowed no of lines in a method is 25 and this method is of 26 lines. How to fix this🤔.

Oh, I see. I was referring to these, but I now see that they're outdated so never mind:

Regarding the "greater than 25" lines, I would just skip those suggestions. I guess you could get around them by collapsing queries like these into one line, but that makes readability a lot worse:

Tag.joins(:node)
        .group(:tid)
        .where('node.status': 1)
        .where('term_data.name NOT LIKE (?)', '%:%')
        .where.not(name: 'first-time-poster')
        .order(count: :desc)
        .limit(limit).each do |tag|
        data["tags"] << {
          "name" => tag.name,
          "count" => tag.count
        }

jywarren · 2021-07-12T20:13:38Z

Love this!!!! I'll bypass the final recommendation. Is this ready for merge then? Thank you!!!

17sushmita · 2021-07-12T20:15:30Z

Love this!!!! I'll bypass the final recommendation. Is this ready for merge then? Thank you!!!

I am planning to make more refinements to the cytoscape view. However, you can merge this one too and I will create a new PR or I'll add commits to this one only.

17sushmita · 2021-07-12T20:19:13Z

and also what do you think about the above suggested change to hide the other edges on highlighting a node? Should we do this or it looks fine this way only?

jywarren · 2021-07-12T20:21:40Z

Love it. Let's do it in increments. 🎉

hide the other edges on highlighting a node

Yes, that looked nice too! Let's keep a bulleted list of the improvements you've made. If people like them or not, we'll have a place we can point to each distinct change that was made, which will make it easier to discuss. Thanks, @17sushmita and thanks @noi5e and all who reviewed!!!

* test cytoscape changes on unstable * minor refactoring of previous commit

codeclimate bot reviewed Jul 12, 2021

View reviewed changes

17sushmita added 2 commits July 12, 2021 17:23

test cytoscape changes on unstable

f81f031

minor refactoring of previous commit

ccf4c85

17sushmita force-pushed the cytoscape-refinements branch from 4780b1b to ccf4c85 Compare July 12, 2021 11:54

noi5e approved these changes Jul 12, 2021

View reviewed changes

jywarren merged commit 4b3557e into publiclab:main Jul 12, 2021

reginaalyssa pushed a commit to reginaalyssa/plots2 that referenced this pull request Oct 16, 2021

[WIP] Continued refinements to cytoscape visualization (publiclab#9902)

593b8c2

* test cytoscape changes on unstable * minor refactoring of previous commit

billymoroney1 pushed a commit to billymoroney1/plots2 that referenced this pull request Dec 28, 2021

[WIP] Continued refinements to cytoscape visualization (publiclab#9902)

9c7100c

* test cytoscape changes on unstable * minor refactoring of previous commit

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Continued refinements to cytoscape visualization #9902

[WIP] Continued refinements to cytoscape visualization #9902

17sushmita commented Jul 12, 2021 •

edited

gitpod-io bot commented Jul 12, 2021

codeclimate bot Jul 12, 2021

codeclimate bot Jul 12, 2021

codeclimate bot Jul 12, 2021

codeclimate bot Jul 12, 2021

codecov bot commented Jul 12, 2021 •

edited

codeclimate bot commented Jul 12, 2021

17sushmita commented Jul 12, 2021

noi5e commented Jul 12, 2021

17sushmita commented Jul 12, 2021

noi5e commented Jul 12, 2021

jywarren commented Jul 12, 2021

17sushmita commented Jul 12, 2021

17sushmita commented Jul 12, 2021

jywarren commented Jul 12, 2021

[WIP] Continued refinements to cytoscape visualization #9902

[WIP] Continued refinements to cytoscape visualization #9902

Conversation

17sushmita commented Jul 12, 2021 • edited

Changes made till now-

Responsive

gitpod-io bot commented Jul 12, 2021

codeclimate bot Jul 12, 2021

Choose a reason for hiding this comment

codeclimate bot Jul 12, 2021

Choose a reason for hiding this comment

codeclimate bot Jul 12, 2021

Choose a reason for hiding this comment

codeclimate bot Jul 12, 2021

Choose a reason for hiding this comment

codecov bot commented Jul 12, 2021 • edited

Codecov Report

codeclimate bot commented Jul 12, 2021

17sushmita commented Jul 12, 2021

noi5e commented Jul 12, 2021

17sushmita commented Jul 12, 2021

noi5e commented Jul 12, 2021

jywarren commented Jul 12, 2021

17sushmita commented Jul 12, 2021

17sushmita commented Jul 12, 2021

jywarren commented Jul 12, 2021

17sushmita commented Jul 12, 2021 •

edited

codecov bot commented Jul 12, 2021 •

edited