Source file main_panel.ml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
open! Core
open Bonsai_web
open Memtrace_viewer_common
module Default_selection = App_state.Default_selection

module Selection = struct
  module Flame_graph = struct
    type t =
      | Flame of
          { fragment : Data.Fragment.t
          ; extend_focus_to : unit Vdom.Effect.t
          }
      | Icicle of
          { fragment : Data.Fragment.t
          ; extend_focus_to : unit Vdom.Effect.t
          }
      | Focus of
          { location : Data.Location.t
          ; retract_callees_from_focus : unit Vdom.Effect.t option
          ; retract_callers_from_focus : unit Vdom.Effect.t option
          }

    let location selection =
      match selection with
      | Flame { fragment; _ } -> Data.Fragment.first ~orient:Callees fragment
      | Icicle { fragment; _ } -> Data.Fragment.first ~orient:Callers fragment
      | Focus { location; _ } -> location
    ;;
  end

  module Table = struct
    type t =
      { fragment : Data.Fragment.t
      ; extend_focus_to : unit Vdom.Effect.t option
      }

    let location ~orient { fragment; _ } = Data.Fragment.first ~orient fragment
  end

  type t =
    | Flame_graph of { selection : Flame_graph.t option }
    | Table of
        { orient : Orientation.t
        ; selection : Table.t option
        ; retract_from_focus : unit Vdom.Effect.t option
        }

  let location = function
    | Flame_graph { selection = Some selection } -> Some (Flame_graph.location selection)
    | Table { selection = Some selection; orient; _ } ->
      Some (Table.location ~orient selection)
    | Flame_graph { selection = None } | Table { selection = None; _ } -> None
  ;;
end

module Tab = struct
  module Input = struct
    type t =
      { data : Data.t Bonsai.Value.t
      ; focus : Data.Fragment.t Bonsai.Value.t
      ; set_focus :
          (Data.Fragment.t -> default_selection:Default_selection.t -> unit Ui_effect.t)
          Bonsai.Value.t
      }
  end

  type t =
    | Flame_graph
    | Callee_table
    | Caller_table
  [@@deriving sexp, compare, enumerate, equal]

  module Output = struct
    type t =
      { key_handler : Vdom_keyboard.Keyboard_event_handler.t
      ; selection : Selection.t
      ; reset_selection :
          Data.Fragment.t -> default_selection:Default_selection.t -> unit Ui_effect.t
      ; scroll_focus_into_view : unit Ui_effect.t
      }
  end

  let table_panel ~data ~focus ~orient ~set_focus ~select_tab:_
    : (Vdom.Node.t * Output.t) Bonsai.Computation.t
    =
    let open Bonsai.Let_syntax in
    let set_focus =
      let%map set_focus = set_focus in
      fun fragment -> set_focus fragment ~default_selection:Default_selection.No_selection
    in
    let%sub table_panel =
      Table_panel.component ~data ~focus ~set_focus ~orient:(Bonsai.Value.return orient)
    in
    return
      (let%map { Table_panel.selection; key_handler; view; reset_selection } = table_panel
       and focus = focus
       and set_focus = set_focus in
       let selection =
         match selection with
         | None -> None
         | Some fragment ->
           let extend_focus_to =
             if Data.Fragment.has_extensions ~orient fragment
             then Some (set_focus fragment)
             else None
           in
           Some { Selection.Table.fragment; extend_focus_to }
       in
       let retract_from_focus =
         match Data.Fragment.retract ~orient focus with
         | None -> None
         | Some fragment ->
           if Data.Fragment.is_empty fragment then None else Some (set_focus fragment)
       in
       let selection = Selection.Table { selection; orient; retract_from_focus } in
       let reset_selection _ ~default_selection:_ = reset_selection () in
       let scroll_focus_into_view = Effect.Ignore in
       view, { Output.key_handler; selection; reset_selection; scroll_focus_into_view })
  ;;

  let flame_graph_selection
    ~focus
    ~set_focus
    (selection : Flame_graph_panel.Selection.t option)
    : Selection.Flame_graph.t option
    =
    match selection with
    | None -> None
    | Some (Flame { fragment }) ->
      let extend_focus_to =
        set_focus fragment ~default_selection:Default_selection.First_callee
      in
      Some (Flame { fragment; extend_focus_to })
    | Some (Icicle { fragment }) ->
      let extend_focus_to = set_focus fragment ~default_selection:First_caller in
      Some (Icicle { fragment; extend_focus_to })
    | Some (Focus { callees_fragment; callers_fragment }) ->
      let location = Data.Fragment.first ~orient:Callers callers_fragment in
      let retract_callees_from_focus =
        if Data.Fragment.same callees_fragment focus
        then None
        else Some (set_focus callees_fragment ~default_selection:First_callee)
      in
      let retract_callers_from_focus =
        if Data.Fragment.same callers_fragment focus
        then None
        else Some (set_focus callers_fragment ~default_selection:First_caller)
      in
      Some (Focus { location; retract_callees_from_focus; retract_callers_from_focus })
  ;;

  let flame_graph_panel ~data ~focus ~set_focus ~select_tab:_
    : (Vdom.Node.t * Output.t) Bonsai.Computation.t
    =
    let open Bonsai.Let_syntax in
    let%sub Data.{ trie; call_sites; _ } = Bonsai.read data in
    let activate =
      let%map set_focus = set_focus in
      function
      | Flame_graph_panel.Selection.Flame { fragment } ->
        let new_focus = fragment in
        let default_selection = Default_selection.First_callee in
        set_focus new_focus ~default_selection
      | Flame_graph_panel.Selection.Icicle { fragment } ->
        let new_focus = fragment in
        let default_selection = Default_selection.First_caller in
        set_focus new_focus ~default_selection
      | Flame_graph_panel.Selection.Focus _ -> Vdom.Effect.Ignore
    in
    let%sub flame_graph_panel =
      Flame_graph_panel.component ~trie ~call_sites ~focus ~set_focus ~activate
    in
    return
      (let%map { Flame_graph_panel.view
               ; key_handler
               ; selection
               ; reset_selection
               ; scroll_focus_into_view
               }
         =
         flame_graph_panel
       and focus = focus
       and set_focus = set_focus in
       let selection = flame_graph_selection ~focus ~set_focus selection in
       let selection = Selection.Flame_graph { selection } in
       view, { Output.key_handler; selection; reset_selection; scroll_focus_into_view })
  ;;

  let name = function
    | Callee_table -> "Callee Table"
    | Caller_table -> "Caller Table"
    | Flame_graph -> "Flame Graph"
  ;;

  let component t ~input:{ Input.data; focus; set_focus } =
    match t with
    | Callee_table -> table_panel ~data ~focus ~orient:Callees ~set_focus
    | Caller_table -> table_panel ~data ~focus ~orient:Callers ~set_focus
    | Flame_graph -> flame_graph_panel ~data ~focus ~set_focus
  ;;

  let initial = Flame_graph

  let enabled ~input =
    let open Bonsai.Let_syntax in
    let%map focus = input.Input.focus in
    let has_callers = Data.Fragment.has_extensions ~orient:Callers focus in
    let has_callees = Data.Fragment.has_extensions ~orient:Callees focus in
    fun tab ->
      match tab, has_callers, has_callees with
      | Callee_table, _, false -> false
      | Caller_table, false, _ -> false
      | _ -> true
  ;;
end

type t =
  { view : Vdom.Node.t
  ; key_handler : Vdom_keyboard.Keyboard_event_handler.t
  ; selection : Selection.t
  ; set_focus : Data.Fragment.t -> unit Vdom.Effect.t
  }

let component ~(data : Data.t Bonsai.Value.t) ~(app_state : App_state.t Bonsai.Value.t)
  : t Bonsai.Computation.t
  =
  let open Bonsai.Let_syntax in
  (* We need to resolve a circularity: The input to the tab panel includes the effect to
     run in order to set the focus, but we want that effect to include running the
     [reset_selection] effect that's _returned_ by the tab panel. We tie the knot using
     [With_interpreter]. *)
  let module Action = struct
    type t =
      | Set_focus of
          { new_focus : Data.Fragment.t
          ; default_selection : Default_selection.t
          }
  end
  in
  let interpret
    ~value:{ Tab_panel.output = { Tab.Output.reset_selection; _ }; _ }
    ~context:set_focus_in_app_state
    (Action.Set_focus { new_focus; default_selection })
    =
    set_focus_in_app_state new_focus ~default_selection ~reset_selection
  in
  let%sub { focus; set_focus = set_focus_in_app_state } = Bonsai.read app_state in
  let%sub With_interpreter.{ value = tab_panel; run_action } =
    With_interpreter.component ~interpret ~input:(fun ~run_action ->
      let set_focus =
        let%map run_action = run_action in
        fun new_focus ~default_selection ->
          run_action (Set_focus { new_focus; default_selection })
      in
      let input : Tab.Input.t = { data; focus; set_focus } in
      let%sub tab_panel = Tab_panel.component ~input (module Tab) in
      let%arr set_focus_in_app_state = set_focus_in_app_state
      and tab_panel = tab_panel in
      With_interpreter.Input.{ value = tab_panel; context = set_focus_in_app_state })
  in
  let%sub { Tab_panel.view = panel_body; output = { scroll_focus_into_view; _ }; _ } =
    Bonsai.read tab_panel
  in
  let%sub panel = Panel.panel ~id:"main-panel" ~collapsible:No panel_body in
  let%sub set_focus =
    (* Careful of the dependencies here: We're accessing (mapping over) _only_ the
       individual values [run_action] and [scroll_focus_into_view], which should rarely
       change. A previous version accessed the whole of [tab_panel] instead and then
       projected out [scroll_focus_into_view], making this [Value.t] sensitive to any
       change at all in the tab panel. Since here we're producing a fresh closure
       with every re-evaluation, the ensuing cascade touched every row of the table
       whenever, say, the selection changed.
    *)
    let%arr run_action = run_action
    and scroll_focus_into_view = scroll_focus_into_view in
    fun new_focus ->
      Effect.Many
        [ run_action (Set_focus { new_focus; default_selection = No_selection })
        ; scroll_focus_into_view
        ]
  in
  return
    (let%map panel = panel
     and set_focus = set_focus
     and { Tab_panel.output; _ } = tab_panel in
     let { Tab.Output.key_handler; selection; _ } = output in
     let view = panel in
     { view; key_handler; selection; set_focus })
;;