08/27 problems record

[rainintime7]

• [x] logic of adding/delete page
• [ ] attributes name: in graph, there is no structure but id and edge, in other data structure, there are structure

  
  graph gh1 = {
  id: [[n1],[n1,n2],[n1,n2,n3],[n1,n2,n3,n4],[n1,n2,n3,n4,n5]]
  edge: [[(n1,n1)],[(n1,n2),(n1,n1)]]
  color: [[blue],[null,blue],[null,null,blue]]
  arrow:[[null],[null]]
  hidden:[[false],[false]]
  }

array arr1 = { structure: [[n1],[n1,n2],[n1,n2,n3],[n1,n2,n3,n4],[n1,n2,n3,n4,n5]] value: [[n1],[n1,n2],[n1,n2,n3],[n1,n2,n3,n4],[n1,n2,n3,n4,n5]] color: [[blue],[null,blue],[null,null,blue]] arrow:[[null],[null]] hidden:[[false],[false]] }

- [ ] correct DSL grammar: if there are bugs, how to let user know? now the known grammar error includes: 
   - 1.out of index in DSL
   - 2.invalid input format 
   - 3.arrow field with "" 
   - 4.can't find variable name 
   - 5.page index is invalid

- [ ] how to show examples? with/without dsl code version? examples from leetcode?
- [ ] in the GUI window, based on different component type, it will show different editing field like this:
<img width="792" alt="image" src="https://github.com/user-attachments/assets/83faeec9-0771-4d4f-90c5-60d2f7787e46">
<img width="790" alt="image" src="https://github.com/user-attachments/assets/1db7f169-c604-470a-8180-39c0ed36c327">

- [ ] when user use GUI change the component, the renderer should stay at the current page. now it will re-render the whole svg and jump to page0 (the page-switching is from in-line script of SVG).
- [ ] state manage:
<img width="960" alt="image" src="https://github.com/user-attachments/assets/a7ca8772-c2d4-46ad-a1d0-fdd02c385fbf">

- [ ] how to add textLabel?