fix: Class name change for DataTables2

Author: pxor

src/frontend/styles/components/data_tables.styl

@@ -122,16 +122,16 @@
   thead
     display: none
 
-.dataTables_wrapper
+.dt-container
   height: 100%
 
-  .dataTables_length
+  .dt-length
     display: none
 
-  .dataTables_scrollHead
+  .dt-scroll-head
     height: 0 !important
 
-  .dataTables_info
+  .dt-info
     padding-left: 10px
 
 .data-tables-footer

src/frontend/styles/components/low_level_editor.styl

@@ -119,7 +119,7 @@
       background-color: TRACEPOINT_BACKGROUND_COLOR
       border-right: 3px solid LINE_NUMBERS_BORDER_COLOR
       text-align: right !important
-    
+
     .active-line-number
       color: #c6c6c6 !important
 
@@ -152,7 +152,7 @@
     flex-direction: column
     border-radius: 6px
 
-    .dataTables_scrollBody::-webkit-scrollbar-thumb
+    .dt-scroll-body::-webkit-scrollbar-thumb
       border-color: TRACEPOINT_BACKGROUND_COLOR
 
     .editor-trace
@@ -186,4 +186,4 @@
     z-index: 1
 
 .low-level-editor
-  height: 100%
+  height: 100%

src/frontend/ui/datatable.nim

@@ -47,8 +47,8 @@ proc resizeTableScrollArea*(self: DataTableComponent) =
 
   if not container.isNil:
     let containerHeight = container.toJs.clientHeight.to(int)
-    let scrollArea = cast[Node](container.findNodeInElement(".dataTables_scroll"))
-    let scrollBody = cast[Node](scrollArea.findNodeInElement(".dataTables_scrollBody"))
+    let scrollArea = cast[Node](container.findNodeInElement(".dt-scroll"))
+    let scrollBody = cast[Node](scrollArea.findNodeInElement(".dt-scroll-body"))
 
     scrollArea.style.height = cstring(fmt"{containerHeight}px")
     scrollArea.style.maxHeight = cstring(fmt"{containerHeight}px")
@@ -74,7 +74,7 @@ proc updateTableRows*(self: DataTableComponent, redraw: bool = true) =
   let scroller = context.scroller
   let page = scroller.page()
 
-  self.startRow = cast[int](page.start) + 1  
+  self.startRow = cast[int](page.start) + 1
   self.endRow = cast[int](page["end"]) + 1
 
   if redraw:

src/frontend/ui/event_log.nim

@@ -92,7 +92,7 @@ proc recalculateKinds(self: EventLogComponent)
 
 proc resizeEventLogHandler(self: EventLogComponent) =
   self.denseTable.resizeTable()
-  self.detailedTable.resizeTable()
+  # self.detailedTable.resizeTable()
 
 proc filterEvents(self: EventLogComponent): seq[ProgramEvent] =
   var events: seq[ProgramEvent] = @[]
@@ -611,7 +611,7 @@ proc events(self: EventLogComponent) =
     # cdebug "event_log: setup " & $(cstring"#" & context.detailedId & cstring" tbody")
     jqFind(cstring"#" & context.denseId & cstring" tbody").on(cstring"click", cstring"tr", proc(e: js) = handler(context.denseTable.context, e))
     let denseWrapper = cstring"#" & self.denseId & cstring"_wrapper"
-    cast[Node](jq(denseWrapper)).findNodeInElement(".dataTables_scrollBody")
+    cast[Node](jq(denseWrapper)).findNodeInElement(".dt-scroll-body")
       .addEventListener(
         cstring"scroll",
         proc () =

src/frontend/ui/trace.nim

@@ -382,7 +382,7 @@ proc renderTableResults(
       self.dataTable.resizeTable()
 
       # add event listener for scrolling to update table footer
-      let scrollBodyDom = jq(cstring(fmt"#chart-table-{self.id} .dataTables_scrollBody"))
+      let scrollBodyDom = jq(cstring(fmt"#chart-table-{self.id} .dt-scroll-body"))
 
       # add wheel event handler for nested scrollable element (table content)
       scrollBodyDom.toJs.addEventListener(cstring"wheel", proc(ev: Event, tg: VNode) =
@@ -432,7 +432,7 @@ proc renderTableResults(
 
     let denseWrapper = cstring(fmt"#trace-table-{self.id}_wrapper")
 
-    cast[Node](jq(denseWrapper)).findNodeInElement(".dataTables_scrollBody")
+    cast[Node](jq(denseWrapper)).findNodeInElement(".dt-scroll-body")
         .addEventListener(cstring"wheel", proc(ev: Event) =
           ev.stopPropagation()
           self.dataTable.updateTableRows()

src/frontend/ui/trace_log.nim

@@ -156,7 +156,7 @@ method render*(self: TraceLogComponent): VNode =
         self.resizeObserver = resizeObserver
 
       # add scroll event listeners to both tables
-      jq(&"#traceLogComponent-{self.id} .dataTables_scrollBody").toJs
+      jq(&"#traceLogComponent-{self.id} .dt-scroll-body").toJs
         .addEventListener(cstring"scroll", proc = self.table.updateTableRows())
 
       self.table.updateTableRows(redraw = false))