Make breaks list pretty.

frontend/src/metabase/xray/components/InsightCard.jsx

 import React, { Component } from 'react'
 import {
     //formatListOfItems,
-    //formatTimeWithUnit,
+    formatTimeWithUnit,
     //inflect
 } from "metabase/lib/formatting";
 import Icon from "metabase/components/Icon";
@@ -234,16 +234,17 @@ export class StructuralBreaksInsight extends Component {
     static icon = "insight"
 
     render() {
-	const { breaks } = this.props
+	const { breaks, features: { resolution } } = this.props
 
 	const breakPoints = breaks.map( (point, idx) => {
+	    point = formatTimeWithUnit(point, resolution);
 	    if (idx == breaks.length - 1 && breaks.length > 1) {
 		return (
-			<span>and { point }</span>
+			<span>, and { point }</span>
 		)
 	    } else {
 		return (
-			<span>{ point }</span>
+			<span>{ idx > 0 && <span>, </span>}{ point }</span>
 		)
 	    }
 	})

src/metabase/feature_extraction/insights.clj

@@ -156,6 +156,7 @@
   (when resolution
     (some->> series
              (ts/breaks (ts/period-length resolution))
+             sort
              (map ts/from-double)
              not-empty
              (hash-map :breaks))))