bocoup / coral-ask-election-2016 Goto Github PK

Request from Washington Post Graphics team:

The gray bars on top of the emoji graph in the topic section aren't large enough to show differences in size. The percentages below are effective enough. Can the gray bars be removed?

The script embed locks onto a div with id main:

<div id="root"></div><script type="text/javascript" src="./static/js/main.76efbf97.js"></script>

Many sites will have an element id="root". If so, it is likely that this interactive will take over the page in an unexpected way.

International should be bolded.

Request from The Washington Post graphics team:

On the Filter by Topic section, Please order the topics by percentage of responses, with the top vote-getter at the top of the list and the lowest vote-getter at the bottom of the list.

Reason: it'll make the results more easy for users to compare.

This css file should be loaded directly from the index.html. Only structural styling should be embedded in the React components.

For some reason the emoji image tags are being given a width and height in IE10,

presumably derived from the "natural" 150px height of the linked SVG image.

Additionally, the buttons are no longer receiving their proper styling because display: table-header-group opts the <button> out of more display rules in IE10 than in newer browsers. Wrapping the button in a div and setting that display rule on the div instead of the button will resolve the issue.

Font color changes - but background color does not.

• Do we create a custom build for each site, with configuration options built in to the bundle; or do we have an editable side-car file like config.json which can be edited on a per-site basis, and deploy the same bundle to all sites which will consume that for config?
• What is the latency on loading editorial text from google docs? What is the overhead on using a script to take that sheet and save it out as a code file to be hosted on S3, to reduce latency? Is that something that is within the capabilities and purview of a newsroom?
  • is there an opportunity to add content-editable areas within Coral, instead, that could be used to enter that data, and then surface that through a separate export feed?

Content needed for the interactive:

• title for interactive
• intro text
• address of coral installation/form embed (if not embedded separately)

Including tabletop triggers this warning:

Warning in ./~/tabletop/src/tabletop.js
Critical dependencies:
7:18-43 the request of a dependency is an expression
 @ ./~/tabletop/src/tabletop.js 7:18-43

Background on that error: webpack/webpack#196

Going to revisit this after app is fully working to determine if build needs to be somehow optimized, that thread makes it sound like we may be bundling code unnecessarily due to this issue.

😍😀😐😟😡😳😞🤔 🇺🇸

Cybersecurity, the economy, trade, education, energy and the environment, health care, crime, defense and national security, immigration, foreign policy, social issues

• Between form and bubble chart
• Between bubble chart & bar chart
• At bottom of page

This issue can serve as a place where @jde & I can toss JSON snippets back and forth to hammer out a good export format

While working on #118 @pbeshai & I noticed that the generic styles, such as h1, .btn etcetera, are rendered at the bottom of the CSS file; this means they actually override the more-specific styles like .form-toggle-button higher up in the document. This is unintuitive, because it means an integrator would have to not only change the definition of .form-toggle-button, but also re-order that rule to the end of overrides.css should they wish to alter the appearance of their document (as the two classes have the same CSS precedence, so the latter one wins).

I am investigating how we can change the order of our imports so that the generic styles end up going first.

Steps to reproduce:

1. Go here: https://s3-us-west-2.amazonaws.com/ask-stg/build/index.html
2. Click "Tell the..." to see the form
3. Icons are oversized
4. Entering information into the form causes page and form fields to jump around (try hitting the American Flag, and entering your Name or Location)

We should either put in a loading spinner or only replace the data when it comes back. It should be fast, but...

The data that's being passed into the component doesn't match what is being shown

Currently we have:

    // also re-emojify on click
    allLabels.on('click', () => {
      // re-emojify all nodes
      allLabels.nodes().forEach((node) => {
        twemoji.parse(node, icon => emojiSVGUrl(icon));
      });
    });

This only listens for clicking the emojis. but it looks like the form re-renders every time something changes in the form.... so maybe onChange in the form elements in the fix in EmbeddedAskForm

As we think about the letter format,

Dear [Secretary Clinton/Mr. Trump],

As you prepare to become president I'm feeling [emoji from 1]. I think your top priority should be [list item from 2]. If you achieve one thing in the next four years, I want it to be: [short answer from 3].

Thank you and good luck.

[name from 4], [location from 5]

I think we may need to talk about what we have to assume about how "locked-down" our form is, or else find some way next week to embed this editorial text into the ask form back-end; because I can infer data charts from the data regardless of question order, but I can't compose a letter with fixed interstitial text if they re-order or change the questions

something to think about

• Drive rendering of bubble chart from React
• Use <button> elements for bubble chart containers
• Make API configurable
• Get data rendering from Google Sheets
• Get letter rendering below bubble chart, filtered by bubble chart
• Connect emoji graph to topic bar chart filters
• Get letter rendering below topipc bar chart, filtered by bar charts
• Embed form
• Make form collapsible

The span tags overlap the other images; I can scale down the emoji to make them fit in the circle, but I'm investigating z-index and other tricks to ensure that the emoji themselves are the forefront clickable element.

Percentage label alignment is way off in IE, exacerbating the above problem:

My suggestion to use relative paths wasn't sound. This works when hitting the index file directly on the S3 bucket. When embedding, however, relative paths resolve to the embedded site, not the bucket.

We will be putting the build into a folder called 'coral-ask-election-2016' inside the same place the json files are installed.

Update all paths to use the following base path:

jsonURI + "coral-ask-election-2016/"

When the form loads, a javascript error is thrown reading the data packet:

selectors.js:115Uncaught (in promise) TypeError: Cannot read property 'count' of undefined(…)

This bug is visible here:
https://s3-us-west-2.amazonaws.com/ask-stg/build/index.html

Datafile:
https://s3-us-west-2.amazonaws.com/ask-stg/form-5818fffcba6bce0001ba8ab8-aggregation-digest.json

We need a base react scaffold w/ a build process, hot reloading, linting, the usual. Should we just use create-react-app?

Text with corrected spelling and capitalization is available in the Google spreadsheet here: https://docs.google.com/spreadsheets/d/18yAMk_ydGpPLHTZPrLox7oplvgc-4aswu1arO_IHY9I/edit#gid=904229865

Chrome desktop:

And on iPhone:

Provisional approach: Check for a hasRendered state property (per item key?) in React, set this in componentDidUpdate after rendering DOM elements the first time. If this prop is present, don't render the margin from React, so that D3 and CSS behave predictably.

TODO: Get help w/ CSS transitions so that we can have each emoji:

1. POP in nicely
2. Zoom quickly on mouseover
3. Go back to normal on mouseout

Can't be part of build, needs to be sidecar JSON

selected emoji is not distinguishable from not selected one.
should use similar 'selected' color as other parts of page.

All links in the build are absolute to the root of the server like so:

<script type="text/javascript" src="/static/js/main.6a0b6e5e.js"></script>

We need to be able to host the files in a subfolder. Please update all paths to be relative.

• Can we render emoji in plain text on different platforms/devices (Android, iOS, FireFox, etc)
• Can we render emoji in <text> elements in SVG, and size them arbitrarily?

Once we have a form sample,

• Can the form actually be used to pose a question w/ emoji responses?

We should test each component and make sure we're only re-rendering when we need to; this should help with things like #44

Click on crime

Because of this action.js

function shouldFetchResponses(state, answerId) {
  var _state$responses = state.responses;
  var collections = _state$responses.collections;
  var isFetching = _state$responses.isFetching;

  return !collections[answerId].length && !isFetching[answerId];
}

There is no collections[answerId] entry