fix(devtools-extension): sort sdkNodes by timestamp, reset state on ClearFlow, clean import

Author: ryanbas21

packages/devtools-extension/src/panel/src/FlowView.elm

@@ -2,7 +2,7 @@ module FlowView exposing (view, viewPlaybackControls)
 
 import Html exposing (Html)
 import Html.Attributes exposing (..)
-import Html.Events exposing (onClick)
+import Html.Events
 import JsonTree
 import Set exposing (Set)
 import Svg exposing (..)
@@ -417,6 +417,7 @@ viewPlaybackControls events playbackIndex isPlaying =
     let
         sdkNodes =
             List.filter (\e -> e.eventType == "sdk:node-change") events
+                |> List.sortBy .timestamp
 
         total =
             List.length sdkNodes

packages/devtools-extension/src/panel/src/Update.elm

@@ -83,7 +83,17 @@ update msg model =
             ( { model | recording = not model.recording }, Cmd.none )
 
         ClearFlow ->
-            ( { model | events = [], selectedEventId = Nothing, flowId = Nothing }, Cmd.none )
+            ( { model
+                | events = []
+                , selectedEventId = Nothing
+                , flowId = Nothing
+                , selectedNodeId = Nothing
+                , expandedSubRows = Set.empty
+                , isPlaying = False
+                , playbackIndex = Nothing
+              }
+            , Cmd.none
+            )
 
         ExportFlow ->
             ( model, Cmd.none )
@@ -130,6 +140,7 @@ update msg model =
             let
                 sdkNodes =
                     List.filter (\e -> e.eventType == "sdk:node-change") model.events
+                        |> List.sortBy .timestamp
 
                 startIndex =
                     case model.playbackIndex of
@@ -168,6 +179,7 @@ update msg model =
                 let
                     sdkNodes =
                         List.filter (\e -> e.eventType == "sdk:node-change") model.events
+                            |> List.sortBy .timestamp
 
                     total =
                         List.length sdkNodes