Plots2: [Planning] New Dashboard Implementation Project (Outreachy)

Created on 9 Oct 2020  ·  58Comments  ·  Source: publiclab/plots2

This is an edit update made by @RuthNjeri:

Hi👋🏾 , I'll be working on the new dashboard design implementation. Components from the /tags page will be
reused for the new design. Feel free to share any feedback, comments, or concerns. The text below is highly based on my Outreachy proposal with some updates.

Break Down

All Posts Page

_These will be addressed individually during each page redesign_

Dashboard Page

Tests will be written for the tasks above where applicable, depending on the code written and feedback given.

Notes

  • The links within the cards do not switch colour when the cursor hovers on them. Should this change?
  • Confirm that the _profile/name_ page does not have the odd line folding on the cards
  • Some views use the old dashboard translation. This should be noted before deleting the dashboard section in the en.yml file
    -̶ ̶A̶ ̶l̶i̶n̶k̶ ̶t̶o̶ ̶t̶h̶e̶ ̶s̶u̶b̶s̶c̶r̶i̶p̶t̶i̶o̶n̶s̶ ̶p̶a̶g̶e̶ ̶a̶t̶ ̶t̶h̶e̶ ̶t̶o̶p̶,̶ ̶t̶o̶ ̶i̶n̶f̶o̶r̶m̶ ̶t̶h̶e̶ ̶u̶s̶e̶r̶ ̶t̶h̶a̶t̶ ̶t̶h̶e̶y̶ ̶c̶a̶n̶ ̶c̶o̶n̶f̶i̶g̶u̶r̶e̶ ̶t̶h̶e̶i̶r̶ ̶f̶e̶e̶d̶?̶

Additional Tasks If Time Allows

Below tasks have been moved to: https://github.com/publiclab/plots2/issues/9277

Translations

All Posts Page

Dashboard Page

  • [x] Follow more topics section
  • [x] Location section
  • [x] Blog Section
  • [x] Topics Section
  • [x] Notifications within the template

Accessibility

Relevant Links

  1. Original Project Description
  2. Outreachy Proposal Plan
  3. Outreachy Blogs

Designs

For a comprehensive look at the designs, have a look at this post

Dashboard

Screenshot 2020-12-02 at 19 51 22

All Posts Page

Screenshot 2020-12-02 at 19 31 47

discussion outreachy planning
Source
picture cesswairimu
🎉3

Most helpful comment

Wow @RuthNjeri just appreciating your breakout-issues and lists with links to each issue! Amazing organizational work here! Much appreciated 🎉

picture jywarren on 14 Dec 2020
❤2 🎉2

All 58 comments

Hello, I'm an outreachy applicant, new to FOSS and I'm interested in some of these tasks...

stacytonui picture stacytonui on 9 Oct 2020

Hello @stacytonui, this is a list of tasks for the main project that will be worked on during the internship period. Some of these features are still in discussion. I would suggest you browse through other issues. Please do let me know if you can't find anything I will help you find smth. Thanks

cesswairimu picture cesswairimu on 9 Oct 2020
👍1

Our newly designed Dashboard has been refined for months, and we are now ready to code it up and implement it on the Public Lab site.

Hi @cesswairimu I am yet to understand those tasks completely because I am still trying to acquaint myself with the codebase and the entire interface. I assume by now a complete draft of the design has been put together. I am requesting if you do have the design, make it accessible . TBH I am really struggling with the wall of text. A combination of visual and text will go a long way at onboarding us newcomers. I am yet to read introducing a draft style guide for public lab in its entirety.

nibble0101 picture nibble0101 on 9 Oct 2020

Hi @nibble0101 , feel free to ask any questions you might have about the project after you checkout the code base. As per designs we encourage the interns to come up with the design during the proposal drafting part on the PL website. During the implementation the mentors will discuss with the interns on different ways to improve on the designs had during the proposals. You can checkout some previous proposals here to get some ideas here https://publiclab.org/notes/liz/03-09-2020/call-for-outreachy-2020-proposals#Proposals

cesswairimu picture cesswairimu on 9 Oct 2020

@cesswairimu Thanks for the clarification and I'd really appreciate help finding an unassigned issue.

stacytonui picture stacytonui on 9 Oct 2020

@stacytonui cool, finding one for you in a few

cesswairimu picture cesswairimu on 9 Oct 2020

@stacytonui here you go https://github.com/publiclab/plots2/issues/8518

cesswairimu picture cesswairimu on 9 Oct 2020

Hello. I am an Outreachy Applicant and want to contribute in Javascript and Bootstrap.
I am also interested in working on Reactjs as mentioned in the project description on Outreachy page.
(hope i have not done anything wrong posting this here.)

Asu1996 picture Asu1996 on 10 Oct 2020

Hi @Asu1996 , here is the js project https://github.com/publiclab/PublicLab.Editor . planning issue for that is here

cesswairimu picture cesswairimu on 12 Oct 2020

Hi, @cesswairimu can one use this as a reference in drafting the proposal?

RuthNjeri picture RuthNjeri on 22 Oct 2020

@RuthNjeri yeah, def

cesswairimu picture cesswairimu on 22 Oct 2020
👍1

Hello, @cesswairimu I have a question, while drafting the proposal I should come up with a design that I think will work for the project then work on my suggested changes during the internship?
Meaning I am free to try out something so long as it doesn't affect the code, right?

IjayAbby picture IjayAbby on 25 Oct 2020

hello @IjayAbby , yeah exactly

cesswairimu picture cesswairimu on 26 Oct 2020

Hello @cesswairimu kindly provide me feedback on my proposal link at https://publiclab.org/notes/inyangasi4/10-30-2020/outreachy-proposal-public-lab-new-dashboard-implementation-project.

IjayAbby picture IjayAbby on 31 Oct 2020

Hi! Just adding this UI flow issue which I believe will still be important on the new version of the Dashboard! Thanks!!!

UI flow issue for adding location from dashboard: https://github.com/publiclab/plots2/issues/8566

jywarren picture jywarren on 1 Dec 2020
👍2

Hi, @publiclab/comment-maintainers (not sure if I have used the right tag, adding @jywarren, @cesswairimu, @sagarpreet-chadha just incase ) I have updated the planning of the tasks needed, please provide feedback especially on the Seeking Clarity / Approval section. Thank you..

RuthNjeri picture RuthNjeri on 2 Dec 2020
🎉1

Hi 👋🏾 In the dashboard activity partial, we pass in the activity and notes...
I'm curious as to why we paginate the notes and not the activity...
Screenshot 2020-12-03 at 21 47 52

A̶l̶s̶o̶,̶ ̶m̶y̶ ̶c̶u̶r̶r̶e̶n̶t̶ ̶u̶n̶d̶e̶r̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶a̶s̶ ̶t̶o̶ ̶w̶h̶a̶t̶ ̶a̶l̶l̶ ̶p̶o̶s̶t̶s̶ ̶m̶e̶a̶n̶ ̶i̶s̶ ̶t̶h̶e̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶s̶e̶c̶t̶i̶o̶n̶ ̶o̶f̶ ̶t̶h̶e̶ ̶d̶a̶s̶h̶b̶o̶a̶r̶d̶,̶ ̶w̶i̶l̶l̶ ̶c̶r̶e̶a̶t̶e̶ ̶a̶ ̶P̶R̶ ̶s̶o̶o̶n̶,̶ ̶p̶l̶e̶a̶s̶e̶ ̶c̶o̶r̶r̶e̶c̶t̶ ̶m̶e̶ ̶i̶f̶ ̶I̶ ̶a̶m̶ ̶m̶i̶s̶t̶a̶k̶e̶n̶.̶.̶.̶t̶h̶a̶n̶k̶s̶
Or maybe all posts mean every Research note, Question, Wiki and, Comments created ordered according to most recent.. activity has a limit..

RuthNjeri picture RuthNjeri on 3 Dec 2020

@RuthNjeri to have pagination in View, we either have to use notes or activity, but it seems activity is super set of notes:
https://github.com/publiclab/plots2/blob/cbb807ba8e2302f09dafc0060475aa118e34c2c6/app/controllers/home_controller.rb#L139

So it makes more sense to use activity, but I think I am missing something.

Also noting the PR you are currently working on:
https://github.com/publiclab/plots2/pull/8800#pullrequestreview-545436066

Meanwhile I will ask @jywarren or @ebarry to comment on approval/need clarity part 😄

sagarpreet-chadha picture sagarpreet-chadha on 6 Dec 2020
😄1 👍1

Ah, i think the issue was that since in this context "activity" is all types, as Sagarpreet says -- not to be confused (as i was for a sec) with the "Activities" type of note, which is like a note whose content is a kind of activity guide for people (a tutorial, i guess).

The issue is that because we are mixing the Rails "Comment" and "Node" types, we can't paginate a mixed set, as far as I know -- it pulls from 2 database tables. Maybe there's some magical SQL query... but in any case the new Dashboard won't need this at all -- it will have logic much closer to this, in the TagController index view:

https://github.com/publiclab/plots2/blob/cbb807ba8e2302f09dafc0060475aa118e34c2c6/app/controllers/tag_controller.rb#L53-L59

That runs this page, where you can see the kind of "per topic forums" the new Dashboard will have: https://publiclab.org/tags

image

jywarren picture jywarren on 6 Dec 2020
👍1

Hi, on the other clarifications, let me go through them one by one:

  • the sort by functionality in the 'All Posts' page is not needed -- i think by recency makes sense here, since it's supposed to be the "firehose" of all content. I don't think it's critical to have other sortings, although it might be interesting. But in general, i think we want to push people into the topics themselves, so using https://publiclab.org/tag/outreachy instead of viewing all topics together. This will increase the sense that these are individual communities or groups. I'm open to more sortings on the "All topics/All posts" page, but in general we're trying to reduce complexity where it doesn't serve our big goals, so maybe we can stick to just recency sorting for the time being. Thanks!!!
  • odd line folding -- sorry! This def needs more details. Take a look at the screenshot in my last comment of a listing of topics on the /tags page, whose template partials will be reused in the dashboard:

See how the top item in the top box -- Impacted Communities -- gets forced onto a new line, and the thumbnail image for its author (here grey) is left on its own above? That's the folding. I'm not actually sure what causes it but i wonder if the layout/css of that section is unnecessarily complex? Couldn't the thumbnail just be inline, or float: left, and the text just inp tags with careful margin/padding?

  • For the translation tasks, my assumption is that the translations will initially be for the en.yml files - yes - and it may bear looking at the Translations README file, which i think is linked from the main README. You could do translation last, if you prefer?

Thank you, @RuthNjeri and @Sagarpreet ! I hope this is helpful!!!

jywarren picture jywarren on 6 Dec 2020
😄1 👍1

Thanks for the clarifications @jywarren and @Sagarpreet ... it's becoming much more clearer now..
For the sorting in the 'All Posts' section, my current assumption is that sort by recency will be done at the controller level.

RuthNjeri picture RuthNjeri on 7 Dec 2020
🎉2 👍1

Yes, that's right. You can see in the current Tag Controller "show" action that the different sortings are all done there. Thanks, @RuthNjeri !!!

jywarren picture jywarren on 7 Dec 2020

@jywarren I also think that because the pages needed for the All Posts section, i.e the questions page, comments, wiki, and notes, can all display the content sorted according to recency the code for this will no longer be needed...

Screenshot 2020-12-07 at 20 02 19
Screenshot 2020-12-07 at 20 02 26
Screenshot 2020-12-07 at 20 02 33
Screenshot 2020-12-07 at 20 02 43

RuthNjeri picture RuthNjeri on 7 Dec 2020

That's great -- yes, and "the code for this will no longer be needed..." you mean the code in this pull request? OK, yes!

I think one reason /notes got lost is that it's not linked to from anywhere I know of. I think making it a feature from the dashboard will make it far more visible and the page redesign unifying the Notes+Questions+Wikis+Comments pages will be really great for site cohesiveness.

Thank you!!!

jywarren picture jywarren on 7 Dec 2020
😄1 👍1

Wow @RuthNjeri just appreciating your breakout-issues and lists with links to each issue! Amazing organizational work here! Much appreciated 🎉

jywarren picture jywarren on 14 Dec 2020
❤2 🎉2

Wow @RuthNjeri just appreciating your breakout-issues and lists with links to each issue! Amazing organizational work here! Much appreciated 🎉

Thanks! @cesswairimu pointed me in the right direction with this 😄

RuthNjeri picture RuthNjeri on 15 Dec 2020

Hi @RuthNjeri just noting that @noi5e wrote up some thoughts on system vs. unit testing here: https://publiclab.org/notes/noi5e/01-08-2021/everybody-struggles-outreachy-public-lab-internship-blog-1 which I appreciated and added to! It might be a good thing to keep in mind as you continue building out the dashboard. For example, what are overall, integrated behaviors we could write system tests for? Vs. what are basic, narrow behaviors we can write unit tests for?

Actually, this isn't required or anything, but one thing is that Rails unit tests are usually focused just on model behaviors, like node.some_method -- outside of the context of a controller, for example. But, we actually have views which we re-use a lot, and i recently read about a way to unit test view fragments, or partial views!

OK, this is really just a dive down a rabbit hole -- to be clear you don't have to do anything with this info, it's just "fun" 😭 😂

https://github.blog/2020-12-15-encapsulating-ruby-on-rails-views/

Basically they've made a way to run a view fragment (or partial) by itself, not within a page or a controller. Then they can run tests on just that little view! It really is like unit tests for views. And, we've actually done a hacky version of this ourselves -- we use the NodeShared.nodes_grid() method to generate HTML - and we unit test it!

https://github.com/publiclab/plots2/blob/main/test/unit/node_shared_test.rb#L4

OK, either you two will like this or you'll be like uhhhhhh who would get excited about this??? I'll just go ahead and cc @cesswairimu and @Sagarpreet in case they're more likely to enjoy it 😂 🙉

That's it --- happy weekend, all of you!!

jywarren picture jywarren on 9 Jan 2021

Thanks @jywarren 😄
I'll definitely have a look at it.

RuthNjeri picture RuthNjeri on 9 Jan 2021

Hmm, that's pretty cool - I didn't know you could do that in Rails.

Uzay-G picture Uzay-G on 9 Jan 2021

@jywarren Hahaha!!! Oh boy, I love testing 😂 😂 😂 . Jokes aside though, that is actually pretty cool that they pulled off unit testing for views.

noi5e picture noi5e on 9 Jan 2021
😄1

Hi @RuthNjeri just noting that @noi5e wrote up some thoughts on system vs. unit testing here: https://publiclab.org/notes/noi5e/01-08-2021/everybody-struggles-outreachy-public-lab-internship-blog-1 which I appreciated and added to! It might be a good thing to keep in mind as you continue building out the dashboard. For example, what are overall, integrated behaviors we could write system tests for? Vs. what are basic, narrow behaviors we can write unit tests for?

Actually, this isn't required or anything, but one thing is that Rails unit tests are usually focused just on model behaviors, like node.some_method -- outside of the context of a controller, for example. But, we actually have views which we re-use a lot, and i recently read about a way to unit test view fragments, or partial views!

OK, this is really just a dive down a rabbit hole -- to be clear you don't have to do anything with this info, it's just "fun" 😭 😂

https://github.blog/2020-12-15-encapsulating-ruby-on-rails-views/

Basically they've made a way to run a view fragment (or partial) by itself, not within a page or a controller. Then they can run tests on just that little view! It really is like unit tests for views. And, we've actually done a hacky version of this ourselves -- we use the NodeShared.nodes_grid() method to generate HTML - and we unit test it!

https://github.com/publiclab/plots2/blob/main/test/unit/node_shared_test.rb#L4

OK, either you two will like this or you'll be like uhhhhhh who would get excited about this??? I'll just go ahead and cc @cesswairimu and @Sagarpreet in case they're more likely to enjoy it 😂 🙉

That's it --- happy weekend, all of you!!

Hi @jywarren 😄

I finally read Will's (@noi5e) blog which was amazing! I definitely learnt a thing or two about system tests..
I've read the blog on ViewComponent. I do think that having view components would be a great thing to have in improving reusability with the views.... I am not sure if I am sold on unit testing the views yet 😅 ... I used RSpec a while back and when they discontinued controller testing, this is what they had to say..

For new Rails apps: we don't recommend adding the rails-controller-testing gem to your application. The official recommendation of the Rails team and the RSpec core team is to write request specs instead. Request specs allow you to focus on a single controller action, but unlike controller tests involve the router, the middleware stack, and both rack requests and responses. This adds realism to the test that you are writing, and helps avoid many of the issues that are common in controller specs

I look at testing the views only in a similar way as testing the controller only... I think views are an integral part of an integration test/ system test. Because they rely on both the controller, routes, and models. Though I know that I still have a lot to learn about testing and there are definitely situations where it is beneficial to test the views.

RuthNjeri picture RuthNjeri on 11 Jan 2021

Ah, we've never migrated to RSpec but that's really interesting to hear -- thanks for the link!

jywarren picture jywarren on 12 Jan 2021
😄1

Actually we've often had problems with functional tests (of our controllers) missing problems with routes. System tests has helped plug this hole, but they are resource intensive. We instead tried to write simple integration tests for all major pages - https://github.com/publiclab/plots2/blob/main/test/integration/public_pages_test.rb

https://relishapp.com/rspec/rspec-rails/docs/request-specs/request-spec - that does sound interesting if it covers routing. But maybe i'm a little out of date, do integration tests already cover routing though? I think we used to use integration tests as the closest thing to full-stack testing we had, until system tests allowed us to test JavaScript and user interaction as well. Now, apart from probably being more efficient than system tests, it doesn't seem integration tests are incredibly useful?

jywarren picture jywarren on 12 Jan 2021
❤1

The way I see it, with system tests being resource-intensive, we end up being specific on what to include as the system test unless we have a separate repo dedicated to QA 😅 . With the specificity in mind, the integration tests will fill in the gaps to 'atleast' test what system tests have not covered...

RuthNjeri picture RuthNjeri on 12 Jan 2021

Hi Ruth!!! I'm loving the dashboard on stable, and I am noticing a few things that emerge when its run on a real database too!

image

See how power tags (i.e. those with key:value format) are showing up in trending? I wonder if we can filter those out. And also, can we make a special case for filtering out first-time-poster since that by definition will likely be the most used but not that useful in a search?

jywarren picture jywarren on 3 Feb 2021

For such filtering, perhaps we could base on some of this work -- https://github.com/publiclab/plots2/issues/6924 or https://github.com/publiclab/plots2/pull/4232

jywarren picture jywarren on 3 Feb 2021

That sounds great @jywarren, I'll create an issue to work on that.

RuthNjeri picture RuthNjeri on 4 Feb 2021

Hi @RuthNjeri i have some very small style related changes that should be a really easy tweak, but wanted to note them here if you'd be willing to give them a look?

image

I was hoping we could:

  1. make Add your location to see work near you | About location privacy and View all posts be the same font and size as Click to add topics
  2. Move View all posts down below the Follow more topics box and next to All topics -- they kind of belong together, maybe, and just below the box seems reasonable?
  3. (actually I don't see any Trending topics on mine, i wonder if they're all filtered out because i already subscribe? Maybe this is its own slightly larger issue?)
  4. add a little more margin above Follow more topics header -- more like this:

image

Thank you, Ruth, and if you don't get to these, no big deal!

jywarren picture jywarren on 9 Feb 2021

Hi @RuthNjeri i have some very small style related changes that should be a really easy tweak, but wanted to note them here if you'd be willing to give them a look?

image

I was hoping we could:

  1. make Add your location to see work near you | About location privacy and View all posts be the same font and size as Click to add topics
  2. Move View all posts down below the Follow more topics box and next to All topics -- they kind of belong together, maybe, and just below the box seems reasonable?
  3. (actually I don't see any Trending topics on mine, i wonder if they're all filtered out because i already subscribe? Maybe this is its own slightly larger issue?)
  4. add a little more margin above Follow more topics header -- more like this:

image

Thank you, Ruth, and if you don't get to these, no big deal!

Hi @jywarren those changes are totally doable... I'll look into them...I'll also investigate the trending topics issue

RuthNjeri picture RuthNjeri on 9 Feb 2021

thank you!!

On Tue, Feb 9, 2021 at 11:46 AM Ruth notifications@github.com wrote:

Hi @RuthNjeri https://github.com/RuthNjeri i have some very small style
related changes that should be a really easy tweak, but wanted to note them
here if you'd be willing to give them a look?

[image: image]
https://user-images.githubusercontent.com/24359/107395599-f6b61c00-6aca-11eb-8061-833ae6b8ffc3.png

I was hoping we could:

  1. make Add your location to see work near you | About location privacy
    and View all posts be the same font and size as Click to add topics
  2. Move View all posts down below the Follow more topics box and next
    to All topics -- they kind of belong together, maybe, and just below
    the box seems reasonable?
  3. (actually I don't see any Trending topics on mine, i wonder if
    they're all filtered out because i already subscribe? Maybe this is its own
    slightly larger issue?)
  4. add a little more margin above Follow more topics header -- more
    like this:

[image: image]
https://user-images.githubusercontent.com/24359/107395877-38df5d80-6acb-11eb-8726-08335a2da99d.png

Thank you, Ruth, and if you don't get to these, no big deal!

Hi @jywarren https://github.com/jywarren those changes are totally
doable... I'll look into them...I'll also investigate the trending topics
issue

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/8513#issuecomment-776077363,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAF6J6F7Z572RINHELRYE3S6FRHTANCNFSM4SKK46TA
.

jywarren picture jywarren on 9 Feb 2021

Hi Ruth - i noticed something and tried to fix it but I failed; due to these lines, the dashboard map doesn't quite load (and actually everywhere else too!) upon page load - it only loads some data once you interact with the map. I tried expanding the event listener and other strategies for a deferred load once the whole page is ready, but wasn't able to get it to work.

https://github.com/publiclab/plots2/blob/b2742cc63d0584dfadb13fa701c6c74b5951ec24/app/assets/javascripts/leafletHelper.js#L147-L157

I wonder, do you have any ideas for how we could get this to trigger once the page is ready? Previously we also ran it at script runtime (you can see the history for this file) but that didn't work either since presumably the map was not ready yet. I'd really appreciate some help with this one, i got a bit stuck!

jywarren picture jywarren on 23 Feb 2021
👍1

Hi @jywarren I'll have a look at this and let you know what I find...

RuthNjeri picture RuthNjeri on 23 Feb 2021

Hi @jywarren I looked at the console when the dashboard is loading and noticed this error
Screenshot 2021-02-24 at 20 01 15

In the _mapDependencies file, the heatmap.js has been listed before the leaflet-heatmap.js
https://github.com/publiclab/plots2/blob/03e9b2717153cbfe8d42c4ee795d2919ef0aa237/app/views/map/_mapDependencies.html.erb#L25-L26

When I looked into the sources folder in the console, I could not find heatmap.js...
could it be an issue...of a dependency not being present because the leaflet heatmap plugin requires it?

Screenshot 2021-02-24 at 20 01 24

RuthNjeri picture RuthNjeri on 24 Feb 2021

I don't think that's the issue, I loaded the site in incognito and the heatmap.js file was present
Screenshot 2021-02-24 at 20 13 59

RuthNjeri picture RuthNjeri on 24 Feb 2021

Hi @jywarren I am trying to find a way to test this locally since Google does not load the maps in development mode...
what steps were you using to test this locally?

I have looked into JQuery event listeners like .ready and .load attached to the document/ they window...but I think you have already tried this?

My current challenge is testing this locally...

RuthNjeri picture RuthNjeri on 24 Feb 2021

I'm not sure i tried all the jquery listener combinations, just the Leaflet
ones. Hmm, i thought it was possible to turn on the map but ... hmm do we
need a local Google or Mapbox API key? I believe either would be free to
sign up for: https://docs.mapbox.com/help/glossary/access-token/

https://developers.google.com/maps/documentation/javascript/get-api-key

I wonder though... either we need to insert them in the right places, OR we
need to add "localhost" to the allowed origins...

OK i tried allowing localhost and gitpod.io -- can you try now? Thanks
Ruth! And no worries, if you get stuck on this one i can take a look!

On Wed, Feb 24, 2021 at 1:54 PM Ruth notifications@github.com wrote:

Hi @jywarren https://github.com/jywarren I am trying to find a way to
test this locally since Google does not load the maps in development mode...
what steps were you using to test this locally?

I have looked into JQuery event listeners like .ready and .load attached
to the document/ they window...but I think you have already tried this?

My current challenge is testing this locally...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/8513#issuecomment-785297643,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAF6J2LV6WVPEBFZ6PLSB3TAVDMTANCNFSM4SKK46TA
.

jywarren picture jywarren on 24 Feb 2021

I tried testing it out on Gitpod and noticed the map is still not loaded,
Screenshot 2021-02-24 at 23 23 48
This is also the case for localhost
Screenshot 2021-02-24 at 23 24 04

I've seen that I can create the tokens using the links you shared, I'll try this again tomorrow and let you know how it goes...

RuthNjeri picture RuthNjeri on 24 Feb 2021

Also, I think allowing the Gitpod url in the map box and Google map account is difficult because the URL that loads the site on Gitpod is always changing..

I think allowing localhost is better... not sure of the format but I've seen this post describe how to do it for Google maps https://stackoverflow.com/questions/39329874/googlemaps-api-key-for-localhostand this one for map box https://docs.mapbox.com/accounts/guides/tokens/#add-url-restrictions-to-access-tokens

RuthNjeri picture RuthNjeri on 24 Feb 2021

Ah, but i thought it'd be ok if it's just changing subdomains. But maybe i
have to add *.gitpod.io -- let me try that.

On Wed, Feb 24, 2021 at 3:57 PM Ruth notifications@github.com wrote:

Also, I think allowing the Gitpod url in the mabxox and Google map account
is difficult because the URL that loads the site on Gitpod is always
changing..

I think allowing local host is better... not sure of the format but I've
seen this post describe how to do it for Google maps
https://stackoverflow.com/questions/39329874/googlemaps-api-key-for-localhostand
this one for map box
https://docs.mapbox.com/accounts/guides/tokens/#add-url-restrictions-to-access-tokens

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/8513#issuecomment-785379289,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAF6J5KSB6NUKLSMWU5NQLTAVR4LANCNFSM4SKK46TA
.

jywarren picture jywarren on 26 Feb 2021
👍1

Is it just google or also mapbox?

On Fri, Feb 26, 2021 at 4:01 PM Jeffrey Yoo Warren jywarren@gmail.com
wrote:

Ah, but i thought it'd be ok if it's just changing subdomains. But maybe i
have to add *.gitpod.io -- let me try that.

On Wed, Feb 24, 2021 at 3:57 PM Ruth notifications@github.com wrote:

Also, I think allowing the Gitpod url in the mabxox and Google map
account is difficult because the URL that loads the site on Gitpod is
always changing..

I think allowing local host is better... not sure of the format but I've
seen this post describe how to do it for Google maps
https://stackoverflow.com/questions/39329874/googlemaps-api-key-for-localhostand
this one for map box
https://docs.mapbox.com/accounts/guides/tokens/#add-url-restrictions-to-access-tokens

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/8513#issuecomment-785379289,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAF6J5KSB6NUKLSMWU5NQLTAVR4LANCNFSM4SKK46TA
.

jywarren picture jywarren on 26 Feb 2021

Thanks! It will help a lot with the testing... I tried creating my own API keys with map box but the URLs are so specific and somehow different..I'd need to create some more specific URLs with the Mapbox...

if Google is allowed, we won't see the 410 'gone' message on the console...so that would be easy to tell...

RuthNjeri picture RuthNjeri on 26 Feb 2021

OK, the google one is done and added, and I checked; we don't have URL origin limits on our MapBox keys so that one should be OK. Tell me how it works!

jywarren picture jywarren on 27 Feb 2021

Hi @jywarren I am testing it now,
I no longer see the Google map "gone" message...but I see several for the mapbox...I don't know if this is an issue yet..

But on v2/dashboard the map is being loaded with the needed markers
Screenshot 2021-03-01 at 17 56 58
Screenshot 2021-03-01 at 17 57 35

On the stable site it is being loaded as well

Screenshot 2021-03-01 at 18 11 24

The changes I made to display the map on the dashboard are only on the v2/dashboard page of the stable site...

The same leaflet is present on the /profile page

Screenshot 2021-03-01 at 18 13 03

In the /dashboard page, the map is not loaded because there is no leaflet slider present...
Screenshot 2021-03-01 at 18 07 01

Is there another page you were referring to that is not loading the map? Perhaps there's something I am missing...

RuthNjeri picture RuthNjeri on 1 Mar 2021

Hi Ruth, what I'm seeing is that the maps load with no layers enabled, so nothing can be seen until they're manually turned on.

But even when I turn on the "PL People" layer, i don't see any markers until I interact with the map in some way.

I'm not actually sure but i thought perhaps the fact that no layers are "on" upon initial load might have been new. I remember only that i had to interact with the map in some way for markers to begin loading and showing, but now it seems to be 2 steps - enable the layer, then interact to get them to load.

Exceptions are:

  • on the profile page, the user's own location is loaded on initial load at the center of the map
  • on https://stable.publiclab.org/map#11/41.78513707423634/-71.37074410915376, nodes are loaded but and the PL People layer is enabled. But while nodes do appear, the PL People layer does not until I interact with the map, forcing a refresh.

Finally, I see maps in the sidebar of tagged pages (wikis like below) loading with no layers enabled:

image

https://stable.publiclab.org/wiki/gulf-coast

Is this what you're seeing too? Ideally at least the people layer should be shown by default. Maybe I messed something up while tweaking these?

jywarren picture jywarren on 1 Mar 2021

But this is odd. I realize that the PL People layer is part of the LEL library: https://github.com/publiclab/leaflet-environmental-layers/blob/2f3723a12e70009120500f3b7603680ec7d3cbe8/src/PLpeopleLayer.js#L41-L49

So why do we have markers set up for it here?
https://github.com/publiclab/plots2/blob/b2742cc63d0584dfadb13fa701c6c74b5951ec24/app/assets/javascripts/leafletHelper.js#L26-L52

We can move this whole thread to its own issue if you want but isn't it basically the last item in the project? And, if this is getting more complicated, it definitely doesn't have to be your job to fix the whole thing 😅 sorry, just digging in to better understand what's going on here. Thanks for your help, Ruth!

jywarren picture jywarren on 1 Mar 2021

Thanks, Jeff! Initially, I thought it was about the map itself, I now understand it has to do with the markers...I finally understand what the "bug" is and where I need to start digging...

No need to move it to another issue yet, unless we need to break it down...I'll keep posting what I find...thanks!

RuthNjeri picture RuthNjeri on 1 Mar 2021
❤1 🎉1

Hi, @jywarren 👋🏾 I've gotten a few answers...I think....

On initial page load, this function setupLEL is the first to load and calls displayMapContent(map, markers_hash, options.mainContent); at the end of the function.
https://github.com/publiclab/plots2/blob/30a6a38865dbcfb63d8eda6bcc54130491b0689b/app/assets/javascripts/leafletHelper.js#L116-L144

The displayMapContent function needs the map, markers_hash, and options.mainContent passed
The options.mainContent is passed from the params passed in the function setupLEL(map, markers_hash = null, params = {}). Within the setupLEL function, the options.mainContent is set as options.mainContent = params.mainContent || ""; depending on whether the params were set. If not, it defaults to ""

When I was testing the displayMapContent when loading the v2/dashboard page to check what is passed as the mainContent, I got ""
https://github.com/publiclab/plots2/blob/30a6a38865dbcfb63d8eda6bcc54130491b0689b/app/assets/javascripts/leafletHelper.js#L147
Screenshot 2021-03-03 at 20 09 03

This means, that when the setupLEL(map, markers_hash = null, params = {}) was called, the params were not passed.
In the displayMapContent if the mainContent is not present, no markers/layers will load.
https://github.com/publiclab/plots2/blob/30a6a38865dbcfb63d8eda6bcc54130491b0689b/app/assets/javascripts/leafletHelper.js#L148

I did some digging to check which views call setupLEL and what they pass as the arguments.
Screenshot 2021-03-03 at 20 14 40

If you look closely, every view apart from the index.html.erb and the map.html.erb either passes a unique_id or nothing as the params. I did some further digging and noticed, that this unique_id is a random generated number in most cases
Screenshot 2021-03-03 at 20 16 24

When I looked at the index.html.erb and map.html.erb to look at what is passed as params(options), it was either

    var markers_hash = new Map();
    var options = {
      mainContent: "people",
      setHash: setHash
    }
    setupLEL(map, markers_hash, options);

or 

      var options = {
        layers: ['PLpeople'],
        mainContent: "content",
        setHash: false
      }
      setupLEL(map, markers_hash, options);

So , I used the latter to see if passing options in the _leaflet.html.erb which is used in the v2/dashboard page would load some data on initial page load, and it worked...
Before
Screenshot 2021-03-03 at 20 20 57

After this code
Screenshot 2021-03-03 at 20 20 39
Screenshot 2021-03-03 at 20 22 30

I think it has more to do with what params are passed than attaching event listeners on the displayMapContent function

What do you think?

RuthNjeri picture RuthNjeri on 3 Mar 2021

Also, I found this line of code confusing line 153 mainContent = (mainContent === "content") ? null : mainContent;
if the mainContent is set to "content", we switch it to null or else we use mainContent ? shouldn't it be
mainContent = (mainContent === "content") ? mainContent:null;
https://github.com/publiclab/plots2/blob/30a6a38865dbcfb63d8eda6bcc54130491b0689b/app/assets/javascripts/leafletHelper.js#L153-L160

The mainContent is passed in the ContentMap function online 160

RuthNjeri picture RuthNjeri on 3 Mar 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

divyabaid16 picture divyabaid16  ·  3Comments
keshavsethi picture keshavsethi  ·  3Comments
milaaraujo picture milaaraujo  ·  3Comments
grvsachdeva picture grvsachdeva  ·  3Comments
RuthNjeri picture RuthNjeri  ·  3Comments