Question pages and charts

[berekuk]

Since I had to merge #71 urgently, this is a new PR for finishing question pages and implementing history/charts.

I'll merge the code from #63 into this branch too.

Also, suggestions on a question page layout are very welcome!

• What should the order of blocks be? For now, I put the "footer" before the description, since description can be quite long and I don't truncate it.
• Should we expand qualityIndicators data somehow since we have more space on a separate page?
• Where should the platform name link? To the platform's website? To the separate page on metaforecast?
• Should we display probability in a larger font / highlight it somehow, since it's the key information? (I think since it's in color it should be good enough as it is)
• Any other ideas?

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
metaforecast	✅ Ready (Inspect)	Visit Preview	May 9, 2022 at 2:27PM (UTC)

[berekuk]

Checklist by @NunoSempere from #63 (easier to continue here than there but see #63 for relevant comments):

To do:

• [x] Use real rather than fake data. I'm hoping the graphql interface can be used for this, rather than having to interact with it directly
• [ ] Reduce the chart size. Take https://manifold.markets/ or https://polymarket.com/ as reference points
  • As a sidenote, I think I'm accustomed to much bigger fonts than normal, so my personal preference shouldn't really be a guiding factor here.
• [ ] Add functionality so that charts can be embedded
• [x] Only display the yes in the case of a binary question
• [ ] Add the ability to combine many questions at once, maybe with shorthand labels in the url query
• [ ] Add bells and whistles: Different options, allow one to consider different time periods, show quality indicators, add zoom ability, add other functionality in https://polymarket.com/ (they recently did a really nice chart refactoring)
• [ ] Incorporate some feedback from twitter, and generally from @ClayGraubard or @uvafan
• [ ] Embed into EA Forum/LessWrong

[berekuk]

It's alive! See e.g. https://metaforecast-git-questions-page-2-quantified-uncertainty.vercel.app/questions/predictit-7595

[NunoSempere]

It's alive! See e.g. https://metaforecast-git-questions-page-2-quantified-uncertainty.vercel.app/questions/predictit-7595

Omg, this is beautiful

[NunoSempere]

Some suggestions:

• What should the order of blocks be? For now, I put the "footer" before the description, since description can be quite long and I don't truncate it.
  • I'm thinking of title, chart, description. And then I'm not sure
  • Right now the chart has its own title, but it's enough for there to be just one title.
  • Not sure about the quality indicators and the summary probability
• Should we expand qualityIndicators data somehow since we have more space on a separate page? Yes, please. Not sure about location though, probably below the chart?
• Where should the platform name link? To the platform's website? To the separate page on metaforecast? For now, to the platforms' website. But when the charts are a bit more polished, probably to the individual questions' page.
• Should we display probability in a larger font / highlight it somehow, since it's the key information? (I think since it's in color it should be good enough as it is).
• Any other ideas? I'm going to either do some mockups or get @ClayGraubard to do them.

[NunoSempere]

Maybe something like

[berekuk]

I think we should also incorporate capture functionality on question pages. It doesn't make much sense to me to keep it separate.

[berekuk]

Note to self: figure out what to do with guesstimate questions. They are currently broken since they're not stored in the database. Maybe they should just be fetched and stored in questions like everything else?

[NunoSempere]

Maybe they should just be fetched and stored in questions like everything else?

This would be in principle fine, but there are too many of them. But we can get a hq preview to display? Or else we can embed them as an iframe?

[berekuk]

Turns out history entries weren't sorted and charts didn't display the full history because of this, should be better now.

[NunoSempere]

Note: Display first 5 candidates by current probability, e.g., https://metaforecast-55a1k0bby-quantified-uncertainty.vercel.app/questions/predictit-7667 doesn't display the recent candidate in https://www.predictit.org/markets/detail/7667/Who-will-win-the-2022-Michigan-Republican-gubernatorial-nomination

[berekuk]

• [x] Improved tooltips
• [x] Fixed a few bugs
• [x] Added typings
• [x] Removed /capture, refactored CaptureQuestion significantly
  • also fixed metaculus embed in capture which broke recently due to platform check
• [x] Added a condition for frontpage questions - don't add any which don't have 1+ week of history, as we discussed

One thing I don't like in the current version is how it looks on mobile, it'd be better to display the legend below the chart to allow for more width.

Other stuff:

• there's bug when option names don't show properly if the chart is empty, I haven't figured out why yet
• it'd be nice to show full option name on hover if it's shortened
• it'd be nice to highlight the VictoryLine when on hover
• I've encountered a client/server mismatch warning in JS console, should investigate why it happens

[berekuk]

Except for guesstimate, which this branch still doesn't handle, I think this almost ready for prod.

[NunoSempere]

I've noticed that the dates in the x-axis are cropped off ^

[berekuk]

Ok, now I think it's ready.

Changes since my previous comments: 1) Handle guesstimate:

• I don't fetch all guesstimate models in platform code (yet), but question(id: "guesstimate-...") graphql endpoint fetches the guesstimate model just-in-time and upserts it into metaforecast database
  • history relation didn't work correctly otherwise
  • I don't really like that graphql queries modify the database state, but it shouldn't cause any problems, and I still think that we should just pull all guesstimate models into our DB anyway, eventually 2) Layout & other improvements:
• I added the platform name and stars count at the top of the page, so that it's more clear that the data was pulled from somewhere else; this duplicates the same data in indicators, but it's not a big deal
• Everything is aligned to the left (I could unpack my reasoning here if this seems worse than before)
• I rewrote chart legend in HTML, so the code for measuring element widths is not necessary anymore
• Legend items are hoverable, show the full name in tooltip (example here) and highlight the line in chart for a given item
• Use tailwind colors in charts 3) Chart renders on client-side only
• the reason for that is timezones; they make it impossible to render the chart on the server side correctly
• while there are possible workarounds, e.g. we could round the timestamps to dates calculated for EST or GMT, it could be confusing (some people would see the predictions from the future)
• also, Victory's js bundle is kinda large, and it's better to lazy-load it

[OAGr]

This is really neat, happy to see this in!