datatable_tutorial_utils.py 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. import asyncio
  2. from typing import Any
  3. import httpx
  4. import reflex as rx
  5. class DataTableState(rx.State):
  6. """The app state."""
  7. clicked_cell: str = "Cell clicked: "
  8. edited_cell: str = "Cell edited: "
  9. cols: list[dict] = [
  10. {"title": "Title", "type": "str"},
  11. {
  12. "title": "Name",
  13. "type": "str",
  14. "width": 300,
  15. },
  16. {
  17. "title": "Birth",
  18. "type": "str",
  19. "width": 150,
  20. },
  21. {
  22. "title": "Human",
  23. "type": "bool",
  24. "width": 80,
  25. },
  26. {
  27. "title": "House",
  28. "type": "str",
  29. },
  30. {
  31. "title": "Wand",
  32. "type": "str",
  33. "width": 250,
  34. },
  35. {
  36. "title": "Patronus",
  37. "type": "str",
  38. },
  39. {
  40. "title": "Blood status",
  41. "type": "str",
  42. "width": 200,
  43. },
  44. ]
  45. data = [
  46. [
  47. "1",
  48. "Harry James Potter",
  49. "31 July 1980",
  50. True,
  51. "Gryffindor",
  52. "11' Holly phoenix feather",
  53. "Stag",
  54. "Half-blood",
  55. ],
  56. [
  57. "2",
  58. "Ronald Bilius Weasley",
  59. "1 March 1980",
  60. True,
  61. "Gryffindor",
  62. "12' Ash unicorn tail hair",
  63. "Jack Russell terrier",
  64. "Pure-blood",
  65. ],
  66. [
  67. "3",
  68. "Hermione Jean Granger",
  69. "19 September, 1979",
  70. True,
  71. "Gryffindor",
  72. "10¾' vine wood dragon heartstring",
  73. "Otter",
  74. "Muggle-born",
  75. ],
  76. [
  77. "4",
  78. "Albus Percival Wulfric Brian Dumbledore",
  79. "Late August 1881",
  80. True,
  81. "Gryffindor",
  82. "15' Elder Thestral tail hair core",
  83. "Phoenix",
  84. "Half-blood",
  85. ],
  86. [
  87. "5",
  88. "Rubeus Hagrid",
  89. "6 December 1928",
  90. False,
  91. "Gryffindor",
  92. "16' Oak unknown core",
  93. "None",
  94. "Part-Human (Half-giant)",
  95. ],
  96. [
  97. "6",
  98. "Fred Weasley",
  99. "1 April, 1978",
  100. True,
  101. "Gryffindor",
  102. "Unknown",
  103. "Unknown",
  104. "Pure-blood",
  105. ],
  106. [
  107. "7",
  108. "George Weasley",
  109. "1 April, 1978",
  110. True,
  111. "Gryffindor",
  112. "Unknown",
  113. "Unknown",
  114. "Pure-blood",
  115. ],
  116. ]
  117. def get_clicked_data(self, pos) -> str:
  118. self.clicked_cell = f"Cell clicked: {pos}"
  119. def get_edited_data(self, pos, val) -> str:
  120. col, row = pos
  121. self.data[row][col] = val["data"]
  122. self.edited_cell = f"Cell edited: {pos}, Cell value: {val['data']}"
  123. class DataTableState2(rx.State):
  124. """The app state."""
  125. clicked_cell: str = "Cell clicked: "
  126. edited_cell: str = "Cell edited: "
  127. right_clicked_group_header: str = "Group header right clicked: "
  128. item_hovered: str = "Item Hovered: "
  129. deleted: str = "Deleted: "
  130. cols: list[dict] = [
  131. {
  132. "title": "Title",
  133. "type": "str",
  134. "width": 100,
  135. },
  136. {
  137. "title": "Name",
  138. "type": "str",
  139. "group": "Data",
  140. "width": 200,
  141. },
  142. {
  143. "title": "Birth",
  144. "type": "str",
  145. "group": "Data",
  146. "width": 150,
  147. },
  148. {
  149. "title": "Human",
  150. "type": "bool",
  151. "group": "Data",
  152. "width": 80,
  153. },
  154. {
  155. "title": "House",
  156. "type": "str",
  157. "group": "Data",
  158. },
  159. {
  160. "title": "Wand",
  161. "type": "str",
  162. "group": "Data",
  163. "width": 250,
  164. },
  165. {
  166. "title": "Patronus",
  167. "type": "str",
  168. "group": "Data",
  169. },
  170. {
  171. "title": "Blood status",
  172. "type": "str",
  173. "group": "Data",
  174. "width": 200,
  175. },
  176. ]
  177. data = [
  178. [
  179. "1",
  180. "Harry James Potter",
  181. "31 July 1980",
  182. True,
  183. "Gryffindor",
  184. "11' Holly phoenix feather",
  185. "Stag",
  186. "Half-blood",
  187. ],
  188. [
  189. "2",
  190. "Ronald Bilius Weasley",
  191. "1 March 1980",
  192. True,
  193. "Gryffindor",
  194. "12' Ash unicorn tail hair",
  195. "Jack Russell terrier",
  196. "Pure-blood",
  197. ],
  198. [
  199. "3",
  200. "Hermione Jean Granger",
  201. "19 September, 1979",
  202. True,
  203. "Gryffindor",
  204. "10¾' vine wood dragon heartstring",
  205. "Otter",
  206. "Muggle-born",
  207. ],
  208. [
  209. "4",
  210. "Albus Percival Wulfric Brian Dumbledore",
  211. "Late August 1881",
  212. True,
  213. "Gryffindor",
  214. "15' Elder Thestral tail hair core",
  215. "Phoenix",
  216. "Half-blood",
  217. ],
  218. [
  219. "5",
  220. "Rubeus Hagrid",
  221. "6 December 1928",
  222. False,
  223. "Gryffindor",
  224. "16' Oak unknown core",
  225. "None",
  226. "Part-Human (Half-giant)",
  227. ],
  228. [
  229. "6",
  230. "Fred Weasley",
  231. "1 April, 1978",
  232. True,
  233. "Gryffindor",
  234. "Unknown",
  235. "Unknown",
  236. "Pure-blood",
  237. ],
  238. [
  239. "7",
  240. "George Weasley",
  241. "1 April, 1978",
  242. True,
  243. "Gryffindor",
  244. "Unknown",
  245. "Unknown",
  246. "Pure-blood",
  247. ],
  248. ]
  249. def get_clicked_data(self, pos) -> str:
  250. self.clicked_cell = f"Cell clicked: {pos}"
  251. def get_edited_data(self, pos, val) -> str:
  252. col, row = pos
  253. self.data[row][col] = val["data"]
  254. self.edited_cell = f"Cell edited: {pos}, Cell value: {val['data']}"
  255. def get_group_header_right_click(self, index, val):
  256. self.right_clicked_group_header = f"Group header right clicked at index: {index}, Group header value: {val['group']}"
  257. def get_item_hovered(self, pos) -> str:
  258. self.item_hovered = (
  259. f"Item Hovered type: {pos['kind']}, Location: {pos['location']}"
  260. )
  261. def get_deleted_item(self, selection):
  262. self.deleted = f"Deleted cell: {selection['current']['cell']}"
  263. def column_resize(self, col, width):
  264. self.cols[col["pos"]]["width"] = width
  265. class DataTableLiveState(rx.State):
  266. "The app state."
  267. running: bool = False
  268. table_data: list[dict[str, Any]] = []
  269. rate: int = 0.4
  270. columns: list[dict[str, str]] = [
  271. {
  272. "title": "id",
  273. "id": "v1",
  274. "type": "int",
  275. "width": 100,
  276. },
  277. {
  278. "title": "advice",
  279. "id": "v2",
  280. "type": "str",
  281. "width": 750,
  282. },
  283. ]
  284. @rx.background
  285. async def live_stream(self):
  286. while True:
  287. await asyncio.sleep(1 / self.rate)
  288. if not self.running:
  289. break
  290. async with self:
  291. if len(self.table_data) > 50:
  292. self.table_data.pop(0)
  293. res = httpx.get("https://api.adviceslip.com/advice")
  294. data = res.json()
  295. self.table_data.append(
  296. {"v1": data["slip"]["id"], "v2": data["slip"]["advice"]}
  297. )
  298. def toggle_pause(self):
  299. self.running = not self.running
  300. if self.running:
  301. return DataTableLiveState.live_stream