Guard against rendering SVG images with invalid data
Guard against rendering SVG images with invalid data

Summary:
Some of the SVG images that we're using in production aren't returning valid `Graphie` props from
their `JSONP` calls.

As an example, if you open [this item](https://www.khanacademy.org/math/arithmetic/multiplication-division/multi-digit-multiplication/e/multiplication_4/edit/xc04ed29b7867ffa7) on the live site,
you'll see a console error related to `this._range` being `undefined` in the `Graphie` component that
underlies the `SVGImage` being loaded in the question area, as the JSONP call returns:

```
{range: null, labels: Array[0]}
```

This is fine on the website, since the image just doesn't load and life goes on. But in the mobile
apps, we're kicking users out of exercises **thousands** of times a day due to this error.

For reference, here are two examples of bad images that are being loaded in live problems:

- web+graphie://ka-perseus-graphie.s3.amazonaws.com/bee50188cf20768ecf4ccceae552b6c96433e4bf
- web+graphie://ka-perseus-graphie.s3.amazonaws.com/2c265018182ab227e1370790f14a29557d5efee3

I've done some digging into _why_ those images are returning bad data. If you reverse-load them
into [graphie-to-png](http://graphie-to-png.kasandbox.org/), you'll notice that they don't do any drawing:

```
var ORDER = 0;
var SMALL_FACTOR = 9;
var BIG_FACTOR = 8302;
var DUMMY = [null,null,null,null];
var dummy = undefined;

                    graph.multiplier = new Multiplier(BIG_FACTOR, SMALL_FACTOR);
                    DUMMY = Array(graph.multiplier.getNumHints()  - 1);
```

Thus, graphie-to-png never sets `currRange`, which is initialized to `null`. (See [here](https://github.com/Khan/graphie-to-png/blob/master/templates/plain_graph.html#L159).) Perhaps we
should be initializing `currRange` to `[[0, 0], [0, 0]]`; but even then, existing images would
continue returning `null`, if I understand the system correctly.

Test Plan:
- Open up the linked item's JSON in Perseus ([link](http://localhost:9000/#content=%7B%22question%22%3A%7B%22content%22%3A%22%24%5C%5Clarge%7B95%20%5C%5Ctimes%207963%20%3D%20%7B%3F%7D%7D%24%20%5Cn%5Cn%20%5Cn%5Cn%20%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fbee50188cf20768ecf4ccceae552b6c96433e4bf%29%5Cn%5Cn%5B%5B%E2%98%83%20numeric-input%201%5D%5D%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fbee50188cf20768ecf4ccceae552b6c96433e4bf%22%3A%7B%22width%22%3A400%2C%22height%22%3A342%7D%7D%2C%22widgets%22%3A%7B%22numeric-input%201%22%3A%7B%22type%22%3A%22numeric-input%22%2C%22alignment%22%3A%22default%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22static%22%3Afalse%2C%22answers%22%3A%5B%7B%22maxError%22%3A0%2C%22status%22%3A%22correct%22%2C%22strict%22%3Afalse%2C%22value%22%3A756485%2C%22simplify%22%3A%22optional%22%2C%22message%22%3A%22%22%7D%5D%2C%22size%22%3A%22normal%22%2C%22coefficient%22%3Afalse%2C%22labelText%22%3A%22%22%7D%2C%22version%22%3A%7B%22major%22%3A0%2C%22minor%22%3A0%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22calculator%22%3Afalse%2C%22chi2Table%22%3Afalse%2C%22periodicTable%22%3Afalse%2C%22tTable%22%3Afalse%2C%22zTable%22%3Afalse%7D%2C%22itemDataVersion%22%3A%7B%22major%22%3A0%2C%22minor%22%3A1%7D%2C%22hints%22%3A%5B%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fa1142db73023b8130b18ef6c1342fb54d1a6d6f8%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fa1142db73023b8130b18ef6c1342fb54d1a6d6f8%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fb7639774dcc91f1c83b9afaf69d9f14686975380%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fb7639774dcc91f1c83b9afaf69d9f14686975380%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F2891d4419024992d7cd9649e1ff0767f88ff66b6%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F2891d4419024992d7cd9649e1ff0767f88ff66b6%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F178b4c2ae852aba8450a06d7841935454c8484b7%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F178b4c2ae852aba8450a06d7841935454c8484b7%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F53039a2796e787e80ace10a736a74539f5131418%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F53039a2796e787e80ace10a736a74539f5131418%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fba7555e5603f6726ba23aec38be5d64b1ab7a29a%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fba7555e5603f6726ba23aec38be5d64b1ab7a29a%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F88abce6c1639d968757cc5b27d69ef3371538246%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F88abce6c1639d968757cc5b27d69ef3371538246%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fd222e6368706b01612784cf48a53f5e2d1c0a1b0%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fd222e6368706b01612784cf48a53f5e2d1c0a1b0%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Atrue%2C%22content%22%3A%22%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F151ea929cf138e8c71386b8d29d26ceb071c85b1%29%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F151ea929cf138e8c71386b8d29d26ceb071c85b1%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%2C%7B%22replace%22%3Afalse%2C%22content%22%3A%22%5Cn%5Cn%20%20%24%5C%5Clarge%7B95%20%5C%5Ctimes%207963%20%3D%20756485%7D%24%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F88c45c592738300d6c34abd07a5bf4c7231e845e%22%3A%7B%22width%22%3A520%2C%22height%22%3A320%7D%7D%2C%22widgets%22%3A%7B%7D%7D%5D%7D))
    - Verify that it renders as before.
    - Verify that there is no console error!

Reviewers: alex, emily

Reviewed By: emily

Subscribers: jared, #ios

Differential Revision: https://phabricator.khanacademy.org/D27354

ariabuckles/perseus,ariabuckles/perseus,ariabuckles/perseus,learningequality/perseus,ariabuckles/perseus,learningequality/perseus