Depth Display Errors

Description

The items in the event list will sometimes "invent" a depth for an event when the event's actual depth is null. This behavior is incorrect.

It seems like this is caused by a problem with the distance pipe. The pipe blindly assumes the value it is given is a valid number and immediately calls toFixed(3) on it. This results in an exception being thrown. It is unclear how Angular is handling this exception or what is returned in the HTML.

Regardless, some input validation in this pipe should fix the problem.

Steps to reproduce

• Load the map/list with search results for all events in 1913
• Enable Only List Earthquakes Shown on Map
• Use the Zoom to Region button to zoom in on Hawaii

This should result in two (very similar) Hawaii events 11 km SE of Naalehu, Hawaii being displayed on the map and list. This typically displays a depth of 15.0 km in the list and an empty value in the pop-up if selected (as shown in the above screenshot). The actual depth value value is null.

The depth shown might vary as the Angular behavior is unknown. If this does not produce the erroneous results, try following the steps again from the beginning. Short-circuiting the steps by just reloading the final page does not seem to be as reliable, but might also work.

Acceptance Criteria

• Event list no longer "invents" depth values for events when the actual event depth is null
• The browser console no longer reports unhandled exceptions when event depths are null
• Some placeholder (possible empty string or —) is rendered in the depth output when the event depth is null

/cc @ehunter