buidl-labs / foamviz Goto Github PK

• Changing UI of the control panel according to Figma designs

• Add a legend

HIGH PRIORITY

• Making data granular.
• Performance optimization, currently the viz is unusable because of the jittery performance. My mac starts heating up after using the viz as well.

MEDIUM PRIORITY

• Disable reset button (at initial state)

• Add a control to rotate earth

• Adding formatting to currency and FOAM tokens (eg 1000 => 1,000)

LOW PRIORITY

• Transition in numbers increase/decrease via any library. An example library: https://github.hubspot.com/odometer/

Currently, Density of Points Viz is not very informative for end-user perspective.

To answer the question:
"What I am seeing?"

UX references:

Similar to

• Home page to house all 3 viz.
• Each viz on a separate URL.

1. Turn janky rendering experience to graceful loading:

Problem:

How to reproduce the issue? Disable cache in chrome.

The issue is recorded here:
https://www.loom.com/share/7874b7e0f05f4b8682c70de1dc76ad94

The bottom things load before than the "The FOAMViz project"

Potential Solution:

Take inspiration from: https://www.dharma.io/
See how things gracefully load. "Let the interface come to you"

2. Missing context:

Problem:

Users can't answer what is this project. Questions that come to mind:

1. What is FOAM?
2. What is the FOAMViz project?

Missing elements from above questions:

1. There is no link/mention of FOAM anywhere. We should deflect traffic to FOAM as well for the curious souls instead of them googling what is FOAM.
2. There is no "what" that describes what FOAMViz project is.

Potential Solution:

For eg:
See how Compound explains itself on https://compound.finance/
Using https://codesandbox.io/s/react-text-loop-playground-br4q1 we can add:

1. Heading:
   "Visualize statistics around POI's"
   "Visualize journey of cartographers"
   "Visualize the evolution of FOAM on planetary scale"

2. Subheading
   FOAMViz is an umbrella project over FOAM TCR's data that encompasses interactive tools to analyze ecosystem activity on FOAM's map.

Then gracefully land users to all the three visualizations.

3. FOAM Team's Feedback:

Problem:

• Allow the titles of the homepage sections to contain a hyperlink.

  • Currently you need to click on the image to be taken to the page

• Increase the text spacing

  • Use bulleted rather than number lists

https://www.loom.com/share/835ac949fdc649109b11f1e8c1b7b79c

• Add option in control panel to switch views between Density of Points & Staked Tokens

• Make changes to render the hexagon layer according to staked points value

What is the bug?
The issue is that viewport changes are sometimes not updated and got stuck for the user. And, 2D - 3D change button doesn't work.

How to reproduce?
Simply open the viz for a cartographer, do some interactions (viewport changes) & go back to the home route and come again (to any cartographer's journey).

What's the technical issue?
The viewport isn't reset to its initial state when navigated through react-router.

How to solve it?
Learning about how react-router interacts with the web app and solve accordingly.

When user is panning on POIAnalytics, debounce dragEnd.

https://www.npmjs.com/package/lodash.debounce

Two approaches are to fetch data points residing inside 2x of the user's viewport OR fetching the entire world's data all at once. Need to test performance and rendering time in both these cases.

Visualization density of points:

When density of points in a particular area achieves critical mass -> tweet that with a view of that area on foamviz and a link back to foamviz.

The view can be:

1. A screenshot.
2. A gif rendering out the towers from bottom to the top.

Live demo ready for Wednesday expectations:

1. Viz 1 working with panning and zooming and fetching new data.
2. Viz 2 working and UX similar to flight mapper.

Days:
Monday - today
Tuesday
Wednesday

Timeline broken into 2 parts:

1. Execution timeline
2. Testing timeline - buffer of 1 day (i.e Wednesday)

Days remaining for step 1:
Monday
Tuesday

Fixes in Viz 1

HIGH PRIORITY

• Merge PR by cleaning code in the PR, into the main codebase. Deploying it live. @dhruv10 ideally like you to do it so that you are aware of what fixes I did to ensure you get to know how I fixed it. Let me know if you are unable to deliver this by being aware of timelines, and I will take over.

Fixes in Viz 2

HIGH PRIORITY

• Initial viewport config
• Custom error box
• Correction of API data
• Rendering arc layer with different colors

MEDIUM PRIORITY

• Remove white area by repeating base color
• UI improvements in Profile panel (lower width, font-fixes etc.)
• Width of arc layer
• Coloring of time-series panel
• Loader while fetching data
• Map 2D to 3D switch button
• Profile Panel: height of panel, padding, change map view buttons height, color, margin between data
• Time-series panel: play button css, position of time series panel like flightmapper, make the slider smooth
• Adjust viewport acc to data on initial view load
• Add scatter plot layer
• hexagon bins in time-series using d3

Common fixes in Viz 1 and Viz 2

MEDIUM PRIORITY

• Changing base map tile to OSM dark
• A pleasing loading state...
• Title bar to be dynamic
• favicon to be changed
• FOAM title in viz's panel

Mapping fixes with the timeline:

Monday - High Priority.
Tuesday - Medium Priority.
Wednesday - Testing

• Review comments on the PR: #74

Feedback Recorded Here: https://www.loom.com/share/7997372a33174f259674a7c261d40e22

These are from: https://web.dev/measure/

My reaction to above is summarized in this video: https://www.youtube.com/watch?v=umDr0mPuyQc

Prioritizing to solve specific issues over common issues

Common Issues Todo List

Medium Priority:

• HomePage issue in #10

• Adding FOAM navbar

• Mobile Optimization - making it responsive

Good to have features:

• Using OSM's blue map

Viz Specific Issues:

1. VizPOIAnalytics #78
2. VizCartographerJourney #79
3. VizDataGlobe #76

Breathing space in control panel:

Currently, elements are too tightly placed together.

• Combine similar issues.
• Close stale/old issues.

https://www.loom.com/share/49c57ae8bfd6409cbcbf931f11c0f800

Medium Priority:

• Add FOAM's navbar

• Improve UI for "Waiting for user location message"

• Remove loader at every drag

• Keyboard arrow keys not working in location search box

Currently, the headings are in cryptic format i.e "VizCartographerJourney"

Please give feedback on the following visualizations:

• POIAnalytics Viz: https://foamviz.surge.sh/#/poi-analytics
• Journey of a Cartographer Viz: https://foamviz.surge.sh/#/cartographer-journey/

Sample of cartographer journey: https://foamviz.surge.sh/#/cartographer-journey/0xe2d128323cf7560a6e7a82726d7b425aedc7a556

Pre-notes

The time slider on Cartographer Journey is a little buggy. Fixes are en-route.

Sample format for feedback:

POIAnalytics

inset feedback for https://foamviz.surge.sh/#/poi-analytics

Cartographer Journey

inset feedback for https://foamviz.surge.sh/#/cartographer-journey

• Change title from "React App" to "FOAMViz| Density of points"
• Change icon to FOAM's favicon.

Subheading Fixes:

• Net Value Staked to "Net value of FOAM tokens staked"
• FOAM Tokens Staked subheading change to "Total FOAM tokens staked on the planet"

Should we also reverse the order? First total FOAM tokens staked -> then their value in USD?

Tooltip Fixes

Make them more informative + order changes.

First I would like to know number of points in a particular bar (eg: x points staked)
Then I would like to know amount staked in this particular bar. (eg: x*y where y = sum of each point's staked amount))
Then I would like to know USD value of total points staked in this particular bar. (eg: x*y*z where z = FOAM's exchange rate in USD)

Currently, the visualizations lack:

• Context of what they represent.
• Context of how somebody uses them.
• Differentiation between power users and casual users.

Attributes to think about:

• Reduction of cognitive load (maybe checklist/onboarding video/joyride + explanatory gif videos)

Also, can the visualizations become a better way of interacting with FOAM? As Caleb just integrated web3 tools inside FOAM.tools to make the experience more efficient, I see integration as tool which can serve a path. Question is what kind of path would be delta 4 so that people find our tools to be a better tool for using the FOAM Map. Some ideas:

1. Viz 3 can serve as an overall signal for challenges, voting etc happening on the map. The visualization in my mind is of playing age of empires when you are being attacked - an attack sound comes through the speaker - and the interface provides direction to the attack if the current viewport isn't where the attack is happening. A relevant example of live events on the globe is here: https://blocks.wizb.it/. This lets overall users flocking to FOAM to direct their effects accordingly on the map.
2. As soon as you reach the specified area, there should be a way to zoom in and transition to viz 1, sort of like if you want deeper analytics -> jump to a better tool. I imagine a fighter pilot simulation, where when you are cruising you are using viz3, and when you want to attack, appropriate focus controls come over your viewport to offer you precision.
3. Inspired from Dota + Age of empires, each challenger, voter, cartographer is a virtual game character on FOAM's map. Imagine these guys actually battling it out on a challenge on the FOAM map.

On that note, FOAM could pave the path for:

1. A better no trust version of Age of Empires.
2. A better no trust version of the flight simulator.

Ready player one is a good movie to watch to take inspiration from.

• Add lighting in hexagon layers as given in https://deck.gl/#/examples/core-layers/hexagon-layer. Use Phong shading, ambient light techniques given in https://github.com/uber/deck.gl/blob/7.3-release/examples/website/3d-heatmap/app.js

• Load the hexagon layer tower in an animated way like constructing them from the ground to upwards

Visualizing Density of Points:

• Visualization using: Hexagon Layer in deck.gl
• Properties:
  • Each hexagon shows aggregate number of POI's in that area.
  • Height of hexagon is proportional to the number of POI's aggregated in that area.
• On Hover Information:
  • Specs:
    • Properties from deck.gl
      • pickable: true
      • autoHighlight: true
    • Properties to be displayed in tooltip:
      • Latitude.
      • Longitude.
      • Number of POI's that are aggregated.
      • Accumulated value of FOAM tokens.
      • Accumulated value of FOAM tokens in USD.
      • Cartographers involved.
  • Example:
    • Latitude: 51.0
    • Longitude: -0.11
    • POI's: 5
    • Accumulated sum of FOAM tokens: 5000
    • Accumulated value of FOAM tokens: $300
    • Cartographers involved: 3

Visualizing staked tokens:

• Visualization using: Hexagon Layer in deck.gl
• Each hexagon height corresponds to the staked POI
• On Hover Information:
  • Specs:
    • Properties from deck.gl
      • pickable: true
      • autoHighlight: true
    • Properties to be displayed in tooltip:
      • Latitude.
      • Longitude.
      • FOAM tokens staked.
      • Cartographer details:
        • Name
        • FOAM.tools link
        • View cartographer journey.
  • Example:
    • Latitude: 51.0
    • Longitude: -0.11
    • FOAM tokens staked: 50
    • Cartographer:
      • Alex
      • View on FOAM tools - link
      • View journey - link

To plot the journey of a user (cartographer + challenger) we need to fetch all of their points - listed points, challenging points, and others. We need to capture every point's name, geohash, deposit, createdAt, and status.

An official FOAM API (example) gives these details only for the listed points.

Now, to fetch these details for other points we are following a quiet long process (replicating working of https://foam.tools) which is described as follows:

1. Fetching a user's all points they have interacted with using blocklytics API (example)
2. Filtering out challenged points and storing it an array
3. Converting challenge_id into poll_id for each of them
4. Getting listingHash from poll_id using another FOAM's API (example) for every point in the array.
5. Then again calling another FOAM API (example) that gives us the required data for a cartographer using listinghash

This is a really long process and takes time even when we are parallelly making requests for unrelated data. Can we reduce this process somehow?

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /src/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it in the .dependabot/config.yml file in this repo.

View the update logs.

GitHub hosts the images this way :p

1. Statistics around POI's
   

2. Cartographer's Journey
   

3. Globe viz
   

I am inspired by the Scavenger hunt Blockcities is organizing.

Our version of competition could be to get people excited to build the tallest tower in the world (probably incentivize the winners by FOAM tokens?)

Since tallest towers are a function of the density of points in a small area, this would invariably lead to people ganging up in clans and then making towers. Imagine the Pokemon Go AR craze where people were roaming around finding pokemons mapped to FOAM.

A contrarian take on the above would be introducing a function of staked tokens into the mix. Currently, our viz has 2 separate modes of calculating tower lengths and a metric could be devised to merge these 2 seperate modes into 1 mode. Now somebody with a lot of money (batman) could plot one huge tower by staking bags of points and leave other clans in the dust.

Get YouTube live streamers working their magic on top of these.

Outcome:
POI activity https://foam.tools/#/stats/activity goes 10x.

https://hoodmaps.com/delhi-neighborhood-map

Medium Priority:

• Add FOAM's navbar

• Color of address input box gets inverted when focused

• List top cartographers on viz-2 home page for a better UX

Our specific use case is to fetch data according to the user's current viewport and render using an aggregation layer (Hexagon layer ideally)

To achieve this we called a method at capturing onDragEnd event that fetched data for the user's current viewport using FOAM's API and updates the state so that the layer gets re-rendered with the new data points. But there are precision issues irrespective of zoom level which affects the aggregation and the same viewport shows different visualization. You can try at foamviz

Issues observed similar problem #935, #906 and #647 at around zoom level 14+. The latter issue mentions:

deck.gl offers two solutions. Layers have an fp64 prop that enables 64 bit GPU calculations. This solves the problem at the cost of some performance. You probably won't notice the difference unless you have a lot of icons (not sure where the limit is for IconLayer, maybe >100K).
The other solution is to use the METER_OFFSET projection mode. You'd convert your icon positions to meter offsets from a center lng/lat.

Since Hexagon layer only supports COORDINATE_SYSTEM.LNGLAT (default) we shifted to GridLayer and tried fp64 with COORDINATE_SYSTEM.LNGLAT_DEPRECATED since we're using deck.gl version 7.3.2 but it didn't work out, not even in CPUGridLayer. Maybe it didn't support the GPU of the device we tested, anyway It doesn't seem a scalable solution since the users might not have a supported GPU. So, we're only left with METER_OFFSET projection mode.

This issue gives a hint on how to convert COORDINATE_SYSTEM.LNGLAT to COORDINATE_SYSTEM.METER_OFFSET but there's some problem in the calculation as we're able to render points on screen but they rendered at a place very far from where they should have been also they show unexpected behavior of disappearing after changing the viewport a few times. Since no documentation is provided on conversion of lng-lat to meter-offset apart from issue #1165 and people have upvoted the implementation so the only reason for the precision issue is how the decl.gl renders the layer internally.
You can check our implementation in feature-precison-issue branch

Performance optimization in all the three visualizations.

Ideal:

From: https://firstround.com/review/how-superhuman-built-an-engine-to-find-product-market-fit/

Tools:
https://developers.google.com/web/tools/chrome-devtools/evaluate-performance

Todo List:

Speculation that these would have compounding effects:

• API optimizations.

  • Thinking from a global state that is funneling data to all the three visualizations. For eg: we fetch all the points for viz3, that solves viz1 all points + viz2 some of the cartographer points. Should we start fetching all data on the home page itself? or make an external server that updates every 10 minutes to fetch live data from FOAM and we use this server for our visualizations.

• Storing fetched data in a cache.

Instead of using inline styles eg, please use something from the below:

1. https://cssinjs.org/react-jss?v=v10.0.0
2. https://www.styled-components.com/

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /src/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it in the .dependabot/config.yml file in this repo.

View the update logs.

For viz 3:

1. fixing the heroku deployment problem
2. updating foamviz with new server API

For viz 2:

1. asking FOAM team and Caleb to reduce the loading time of viz2

The white screen is the bug. The user is clueless at that stage what happened.

Redirect to use user's location.

High Priority/ Critical constraints:

1. Jittery animation and delayed rendering of towers in viz-poi-analytics

2. Long fetching time in viz-cartographer-journey
   The new Blocklytics API has already been integrated but we still need improvement in order to have a good UX

3. Viewport issues in viz-cartographer-journey

4. HomePage fixes
   They will be addressed in the last as they are design-related issues

Medium Priority fixes

1. Color of the Loader keeps shuffling to grey/ black
2. Back arrow in Part of foamviz project in foam-navar in each viz
3. Customizing loader in viz-cartographer-journey like fetching 0xadsfw23.. cartographer's data
4. Inconsistent layout of boxes in desktop view (fix all to say 2.5vh)
5. Granularity slider click isn't working but able to drag
6. Design consistency in viz-cartographer-journey top-five-cartographer box
7. All tooltips need to have a colon
8. Tooltip upgrades for viz-data-globe as mentioned here

Low priority fixes:

1. Elaborate viz-poi-analytics loader GPS location content
2. Remove text from viz-cartographer-journey loader on the first page of viz
3. Update README file

All issues need to be stress-tested on the mobile screen as well and make sure nothing breaks

• Deploy each viz on separate URL's.
• Redirect to SSL https://surge.sh/help/using-https-by-default