Create - Graph Explorer

[ddroid]

@todo

#5

• create graph_explorer
• @input 📦 Youtube Video 1 from comment
• @input 📦 Youtube Video 2 from comment
• @input 📦 Wireframe from comment
  • Research
    • tasks
      • @output 📦 from comment
    • infinite scroll
    • lazy-load
    • @output 📦 from comment
      • next Rerendering from Comment
  • subs
    • @output 📦 code from Comment
  • Rerendering
    • hubs toggle
    • prefixes representing relations
    • depth calculation for each level
    • lazy loading and infinite scrolling
    • unload entries that were loaded but now not in view. i.e entries scrolled away.
    • Use Intersection_Observer_API to re-render entries that were not in view but now they are.
    • @output 📦 code from Comment
  • Persistance Scrolling
    • Add horizontal scrolling with proper handling
    • Add vertical Scrolling with proper handling
    • Make the cursor always above the clicked component by setting up static scroll.
      • @output 📦 code
    • upscroll glitch
    • @output 📦 code from comment
  • Pipe Logic
    • Add pipes logic for hubs similar to subs
    • false relational data error
    • More pipe related stuff after manipulation in search mode
      • @output 📦 code from comment
    • Debug pipes in search_mode
    • @output 📦 code from comment
    • Fix the bug that does not allow multiple hubs
      • @output 📦 code from comment
    • Fixed the hub pipes floating bug
    • @output 📦 code from comment
    • @output 📦 code from comment
  • Reset Button
    • @output 📦 code from comment
  • Flag to reverse the toggle expand triggers for hubs and subs
    • @output 🏁❓ code
  • Increase the expand subs trigger to include prefix and pipes before entry prefix
    • @output 📦 code from comment
  • Filter/Search Mode
    • Move the menubar to bottom
    • Added Search Feature
      • @output 📦 code from comment
    • Fixed the previous search effecting new view issue
      • @output 📦 code from comment
    • Added new different variable for search states
      • @output 📦 code from comment
    • Disable toggle expand nodes during search mode
      • @output 📦 code from comment
    • Debug the event listners on first click
    • Fix prefix bugs
    • Add automatic switch between modes once an entry is selected
    • make the matching letters bold
      • @output 📦 code from comment
    • Added toggle expansion of subs and hubs in search mode
      • @output 📦 code from comment
    • Fixed Prefix bugs & Created pipe_calculate func
      • @output 📦 code from comment
    • Added Selection to search mode
      • @output 📦 code from comment
    • Add Drive Persistance across search
      • @output 📦 code from comment
    • Add drive based bold styling
      • @output 📦 code from comment
    • move the searchbar to a new div above menubar
      • @output 📦 code from comment
    • @output 🏁🏭 code from comment
• Jump to already opened hubs of entries
  • Add ^ button to all the repeating entries and relocate position next to the icon
    • @output 📦 code from comment
  • Added Cycling through entries with jump button
    • @output 📦 code from comment
  • @output 📦 code from comment
  • Theme connectors just like icons
    • @output 📦 code from comment
  • Theme box drawing logic & styling
    • @output 📦 code from comment
  • Select Node
    • Basic Node selection
      • @output 📦 code from comment
    • Multiple Node Selection
      • @output 📦 code from comment
    • Add Keyboard Navigation and Selection
      • @output 🏁❓ code
    • Add Select Between for bulk toggle selecting
      • @output 📦 code from comment
    • Make the last clicked node look different
      • @output 📦 code from comment
    • Make multiselect and SelectBetween work in search mode
      • @output 🏁❓ code
  • State Drive
    • Add runtime variables to drive
      • @output 📦 code from comment
    • Fix the drive.put error
      • @output 📦 code from comment
    • Add selected_entry and confirmed_entry
      • @output 📦 code from comment
    • Add the Scroll Persistence Issue of stuttering with Drive
      • @output 📦 code from comment
    • fix the occurred bug related to static scroll
      • @output 📦 code from comment
    • Fix the Quick Scroll Bug
      • @output 📦 code from comment
    • Added static entry functionality when container not full
      • @output 📦 code from comment
    • Upgrade the static entry logic
      • @output 📦 code from comment
  • Tweaks
    • Added object based params
      • @output 📦 code from comment
    • Add autoremoval of spacer on scrollup
      • @output 📦 code from comment
    • Fixed the spacer bug
      • @output 📦 code from comment
  • Communication
    • Integrate into theme_widget
    • Add protocol functions
    • Send and Respond messages from other components.
    • @output ❓ code
  • Graph_Form_Tree
    • @output ❓ code
  • Reversed the hubs & subs triggers
    • @output 📦 code from comment
  • Styling
    • tweaked styles
      • @output 📦 code from comment
    • Advanced Styling according to @Mirabrar-21
      • @output ❓ code
  • Improve Testing, Debugging & Readability
    • Added error throwing inside console for debugging
      • @output 📦 code from comment
    • Added more comments to explain the flow
      • @output 📦 code from comment
    • Split calculate_pipe_trail() to improve performance and simplicity
      • @output 📦 code from comment
  • Simplyfied code according to feedback
    - @output 📦 code from comment
  • Installed prettier-standard and formatted
    - @output 📦 code from comment
  • Improved graph_explorer.js
    - @output 📦 code from comment
  • Create Docs
    • Basic usage
      • @output 📦 docs
    • Advanced usage with each message emitted or handled
    • Commented sections
      • @output 📦 code from comment
  • Updated Docs inside ui-components
    • @output 📦 doc from comment
  • Implementation of Datashell
    • @output 🏁❓ code
  • Prototype & Implement DB
    • @output 🏁❓ code
  • Apply standardx
    • @output 📦 code from comment
  • Use more of {type, message}
    • @output 🏁❓ code
  • Fix the prefix bug when expanding during search mode
    • @output 🏁❓ code
  • Replace most selection constructs with on[type](params) based functions
    • @output 📦 code from comment
  • Add ui-tweaks for mobile devices
    • Add button for toggle selecting multiple entries
      • @output 📦 code from comment
    • Increase node height in mobile devices
      • @output 📦 code from comment
    • Replace current implementation with container queries instead
      • @output 📦 code from comment
• @output 🏁 🏭 Code from comment
• @output 🏭 Preview
• @output 📦 Tree from commit
  • next Create - Theme_Widget #5

[ddroid]

Tasks

• Discussions about tasks- 15min
  • output 📦 decision of creating tasks
• Created seperate issue for graph_explorer and added past and future tasks - 25min
• Added tasks to Issue Create - Theme_Widget #5 - 25min
• Working on hubs - 1hr
• Working on prefix_pipes - 15min
• Created and recorded worklog - 30min
  • @output 📦 graph_explorer 0.0.4
  • @output 📦 Webpage

Worklog

• Worklog 34 DEV
• Worklog 34 UI

Proposal

• hubs toggle - 1h30min
• prefix-pipe - 30min

[Mirabrar-21]

Feedback - 2025-06-26

graph with editor

Ok so in this section you show editor with the graph explorer as well...now idk if its intentional or have a reason of doing this but in theme_widget you cannot access or see both at once at the same time :-) one must needs to collapse(for now thats what we decided and i explained in explanation videos) but yeah, other than that ? All good

graph explorer

Now here...idk again if its a bug or not but the tree looked a bit off to me, not just super but the connectors, as you can see in these 2 pictures..one is collapses and when i try to expand further than it shows these and also the connectors dont even make it a parent, nor a sub :) , technically it does have which is root entry but still it should he shown under it, not with it.

thanks ✌️ it was a good work log

[serapath]

feedback 2025.06.25

Code looks mostly clean vanillaJS. Interesting that instead of expanded_subsand expanded_hubs you named it expanded_supers :-) I guess we could also name them expanded_incoming and expanded_outgoing thinking of "directed arrows", but who really cares.
Maybe one thing to keep in mind - but if you want to do that later, make a task in your task list to not forget about it, and that is, that if a page reloads at any time, things need to be restored. This means, any "state" you save in variables for entries and view management, when updated, might need to also get stored in the drive, so that on reload, drive data can be used to initialize those variables and bring the view into the exact state from before the reload.

It is work in progress, so i'd say just continue more :-)

Another proposal - but maybe that is also how you aproach it already - wasnt super clear to me from your DEV worklog video - is the following:

• when doing "infinite scrolling", expanding/collapsing a specific node all of a sudden adds a potentially large number of nodes in between 2 nodes that were formerly right next to each other if that makes sense and those nodes are indented
• now given on the visible part of the view and the amount of nodes, we might or might not need to show all the entries that are in the expanded sublist.

In general, there are 2 approaches to build the view i am aware of

1. a list of entries, each potentially indented
2. or nested containers when an entry is expanded containing another list with nested containers

They both might have advantages and disadvantages when it comes to infinite scrolling and that is somthing to keep in mind and think about - potentially discuss pros/cons as well.

Here i noticed 2 problems:

1. there are a bunch of weird ssssssss at the end of that css line
2. css as a language unlike javascript does NOT support // comments - that might technically cause the css to be ignored or broken in some browsers. The only valid correct way to comment things out in css is technically to use /* ... */ style of comments, so if you want to keep it commented out, you should switch to that comment style.

A last minor comment (not that it matters - please do whatever is more convenient for you), but when you showed the devtools you were using them below the visible web view, but my experience shows that monitors are usually wider than high and to avoid scrolling and see more relevant stuff, it might be beneficial to use the devtool settings and put devtools and webview next to each other in a left/right column layout instead of a top/bottom row layout :-)

[ddroid]

Tasks

• Working on hubs - 1hr15min
  • @output 📦 graph_explorer 0.0.5
• Created worklog - 15min

Feedback

Was working on hubs but it constantly spits out glitches, was not really burnt out and thought I don't have the skill set 😢 for fixing that. Wasted some time researching online and with LLM's which I'm not going to include here. I also wanted to get your help but you were offline so didn't bothered to waste your time. Will restart from tomorrow with a fresh mind (Maybe thats what I need).
In this coding session I changed the sets to Maps, to have more data like depth for expanded stuff. It should work by fact checking the depth while rendering theoretically but I'm not getting any idea to connect both.

Proposal

• hubs implementation - 1h30min

[ddroid]

Tasks

• Update and Flatten the theme_widget github issue - 20min
  • output 📦 issue
• Complete graph_explorer functionality
  • @input 📦 graph_explorer 0.0.5
  • Updated the old code and subs logic - 45min
  • Added hubs functionality- 1hr20min
  • Updated prefix logic and depth_calculation - 45min
  • Added lazy loading & infinite scroll - 1hr15min
  • Added entry unload - 30min
  • Added re-rendering of unrendered entries using Intersection-Observer-API - 45min
  • @output 📦 graph_explorer 0.1.0
• @output 📦 Webpage
• Created Comment, Updated Issue & Recorded Worklog - 30min

Worklog

• Worklog 36 DEV
• Worklog 36 UI

Proposal

• scroll persistance - 30min
• drive storage utilization - 2hr?

[serapath]

feedback 2025.06.29

regarding ui

Nice progress.

What i notice from using the UI:

1. the root icon has no 🪄 in the beginning
2. all lines are still not aligned and quite chaotic - are you using font-family: mono;
3. icons which are leafs and have nothing to expand should not expand a line and probably not even show the clickable mouse cursor when hovering over the icon
4. expanding and clicking will automatically jump the whole tree to the top, which is really bad and needs to be fixed.
5. in general the lines and spacing for sub and hub expanding and everywhere are still quite messy, but i undertand it is a bit difficult with subs and hubs to always get all the lines drawn right.

it expans hubs now though - which is cool.

---

regarding code

Okay, so first, the code has no ResizeObserver anymore, so how does infinite scrolling adapt when things get resized? ..or is that taken care of by the IntersectionObserver?

Anyway - code looks okay, but lets just make all features work as they are supposed to work

[ddroid]

Tasks

• Discussion and updated issue - 25min
  • @input 📦 feedback
  • @output 📦 issue
• Added scroll_value functionality and handling logic - 2hr
  • @input 📦 graph_explorer 0.1.0
  • @output 📦 graph_explorer 0.1.1
• Updated root emoji, indentation, spacing and styling - 1hr
  • @input 📦 graph_explorer 0.1.1
  • @output 📦 graph_explorer 0.1.2
• Fixed clickable and depth for icons and prefixes - 45min
  • @input 📦 graph_explorer 0.1.1
  • @output 📦 graph_explorer 0.1.2
• Created Comment, Updated Issue & Recorded Worklog - 25min
• @output 📦 Webpage
  • next comment-worklog-39

Worklog

• Worklog 37 DEV
• Worklog 37 UI

Proposal

• horizontal scroll - 2hr
• upscroll glitch - 1hr

[serapath]

feedback 2025.07.01

Proposed tasks seems good.

---

The tasks in the issues are still structured bad when it comes to the linking (from/next).

• Create - Theme_Widget #5 (comment)
• Create - Graph Explorer #8 (comment)

Both need serious improvement.
But, the flattened structure is good :-)

So here is what needs improvement:

1. The graph explorer issue has a bunch of inputs on the bottom, but the structure is always:

   * [ ] taskname
     * input1
     * input2
     * ...
     * [ ] subtask1
     * [ ] subtask2
     * ...
     * output1
     * output2
   

   of course - subtasks can be their own github issues or not and have their own sub inputs and sub outputs

2. when an input or output is planned (= ❓ ), it does not yet have links, instead:

   * [ ] taskname
     * `@input` ❓ `inputname` **from** `github-issue`
     * `@output` ❓ `outputname` **from** `worklog-comment`
       * **next** [link-to-task-where-it-is-used-1](#)
       * **next** [link-to-task-where-it-is-used-2](#)
       * ...
   

   • the next labels ARE real links, because even if inputs and outputs dont exist yet, you can plan where they will be used. If an output is a final output, it does not need next labels, but it needs an final output indicator (even if still planned), thus: 🏁 ❓ is used

3. the input/output relations in your last worklogs dont add up.

   • first task uses 0.1.0 as input and produces 0.1.1
   • next task doesnt use that as input, but instead again 0.1.0 but produces 0.1.2
   • and last task the same as previous one - which is kinda confusing

---

Regarding graph explorer. Lets try to also practice some good coding patterns, e.g.

    view = build_view_recursive(
      '/',
      '',
      0,
      true,
      false,
      [],
      instance_states,
      all_entries
    )

We never want that - this is ridiculous.
It is best practice to always use a single opts object with named fields, because otherwise you need to remember in which position a specific argument goes.
is it build_view_recursive('/','',0,true,false,[],instance_states,all_entries)
or was it build_view_recursive('/',0,'',true,false,[],instance_states,all_entries)
or was it build_view_recursive('/',0,'',[],true,false,instance_states,all_entries)
It is just mental and only masochists or LLMs do this stuff.

Just change:

function build_view_recursive(
    base_path,
    parent_instance_path,
    depth,
    is_last,
    is_hub,
    parent_pipe_trail,
    instance_states,
    all_entries
  ) { ... }

to

function build_view_recursive({
    base_path,
    parent_instance_path,
    depth,
    is_last,
    is_hub,
    parent_pipe_trail,
    instance_states,
    all_entries
  }) { ... }

and then above becomes a bit longer but way more readable:

build_view_recursive({
  base_path: '/',
  parent_instance_path: '',
  depth: 0,
  is_last: true,
  is_hub: false,
  parent_pipe_trail: [],
  instance_states,
  all_entries
})

Generally, these are not covered by standardx as such, but feel free to start a cheat sheet as well so we can improve the stnadard of our code bases here as well.

---

regarding ui

huge improvement with connector lines, but still some glitches, e.g. see

---

regarding code

the code worklog is a bit weird.
I think it should have all been included in the UI worklog video.
only the last moments of the dev worklog video actually show code.
maybe next worklog can do a more stricter separation again.
Doesnt mean you cant show any UI in the dev worklog, but maybe using the devtools with breakpoints to show what is happening in the code when you click around or maybe to show an example of what some code does in the UI - but keeping UI stuff to a minimum in the dev worklog would be cool.

Otherwise it seems fine.

[ddroid]

Tasks

• Updated code according to feedback opts obj and issue- 30min
  • @input 📦 graph_explorer 0.1.2
  • @output 📦 graph_explorer 0.1.3
• Updated graph_explorer
  • @input 📦 graph_explorer 0.1.3
    • Added tree pipes for supers - 1hr30min
    • Fixed last node bug which occurs when last node's super is expanded - 1hr
    • Added scroll persistance for both horizontal and vertical bars by adding variables - 45min
  • @output 📦 graph_explorer 0.1.4
• Created Comment, Updated Issue & Recorded Worklog - 20min
• @output 📦 Webpage
  • next comment-worklog-39

Worklog

• Worklog 38

Proposal

• pipes for supers bug - 1hr
• upscroll glitch - 2hr

[serapath]

feedback 2025.07.12

I'm comparing with my previous feedback.

regarding tasks and worklogs

I wonder what is your process to work through it so that you don't forget anything, because the first thing about issues and tasks has not been improved - it is as bad as before. could you read again through my previous feedback to make that a task to fix it in the next worklog?

Also in the new worklog here, you start well with input/output from graph explorer 0.1.2 to 0.1.3 and make that input in the next task where it goes from 0.1.3 to 0.1.4, but then you have 2 more tasks where it stays as 0.1.3 to 0.1.4 ...this is confusing. ...or are all these changes in the same commit? - if so, it wouldnt have hurt to make a separate commit for each change - small named commits are good practice - so that you can link to those related changes that finish a single named task instead of having one commit to fix multiple tasks ...if that is the case, then there should be one super task with input and output and it has 3 sub tasks without inputs/outputs - which is what i tried to explain in my previous feedback.

please update these things and improve them in the future. When i read those links and click them i expect to see the exact version to more easily review and understand what is happening.

---

regarding code fixes

great that we moved function calls with arguments to single opts objects where each param is an opts property. that is much more readable... i guess you "round" the time things take, but it's interesting to see that this supposedly simple update took 30 minutes... 😲 ....i mean it's okay, i guess it's new, but definitely feels very unexpectedly long.

---

regarding ui

Nice progress.
The graph explorer works much better now.
One thing i noticed is, that when i click on a node to expand super nodes, it depends where i click, but it still ocassionally jumps so that my mouse cursor is not over the exact same node i clicked, so this seems buggy, but i guess that is what you mean with "upscroll glitch".

Another issue is that when the graph explorer is not yet expanded more than the full length of the container (thus we dont scroll yet), this scrolling to keep the mouse cursor over what was clicked isnt working yet.

I dont know how to approach that.
I could imagine it is okay, if the "root" node scrolls out of view even though the entire view is not yet filled and then the user can scroll everything back into view if they want, which causes the scrollbar to disappear. That way we can keep the mouse over the exact entry that was clicked to expand super nodes, even if not a lot of things are expanded yet.

[ddroid]

Tasks

• Fixed the hub pipes floating bug - 1hr15min
  • @input 📦 graph_explorer 0.1.4
  • @output 📦 graph_explorer 0.1.5
  • next comment-worklog-40
• Discussion about ui-components - 1hr
  • @output 📦 conclusion
• Initialized & Moved the code to ddroid/graph-explorer - 30min
  • @input 📦 conclusion
  • @output 📦 Repo
• Created Worklog Comment & Updated last comment - 20min
• @output 📦 Webpage

Feedback

• I have fixed the bug I explained in last worklog video. i.e hub floating pipes bug. You can check the page linked yourself.
• Also Just forked the graph-explorer and copied the code from the ui-components there. Will intigrate it into ui-components in the next worklog.
• Updated the last worklog comment and will update the issue to add new tasks and update the old ones in the next worklog.
• The upscroll bug is still there. was working on it. it would take some more time so thats why ill fix it in the next worklog.

Proposal

• Update Issue - 1hr
• upscroll glitch - 2hr
• Integrate new graph repo into ui-components - 15min

[serapath]

feedback 2025.07.13

Thanks for moving things to an independent graph-explorer repository. Please also open a pull request to the one on playproject-ui :-)

I checked your notes or conclusion and it informed moving graph-explorer into its own repository (see @input), but you also mention the ui-component-gallery and i dont see a task for that. It seems the conclusion document should be an input for that as well, meaning conclusion already has 2 next bulletpoints linking to those issues.
Actually there should be 3 next links for the conclusion document, because we also need a ui-debugger component, which kind of merged "demo-maker" and "quick-editor" and is a component that technically will be used inside the ui-gallery-component but also on every web/page.js of standalone component repositories as well.

Both of those are components you might work on next, because at least the ui-components page was already started by you and it's meant to be a collaboration between you and cypher, so cypher can create the figma wireframe that is inspired by behance.

Otherwise, things look good, please continue with what you proposed and then add what i described here above too :-)

[ddroid]

Tasks

• Integrated the graph_component repo into ui-components

  • @intput 📦 Repo from comment
  • updated ui-components - 15min
  • updated graph_explorer - 15min
  • @output 📦 commit
    • next 📦 upscroll bug

• Fixed the upscroll bug - 1hr45min

  • @input 📦 commit
  • @input 📦 graph_explorer 0.1.5 from comment
  • @output 📦 graph_explorer 0.1.6
    • next 📦 static scroll when expand hubs & subs

• Updated Main Issue

  • @input 📦 Task Management Playlist
  • Discussion - 30min
  • Wached playlist - 20min
  • Made Edits - 1hr
  • @output 📦 Issue

• Created Worklog Comment & Updated last comment - 20min

• @output 📦 Webpage

Feedback

• I have integrated the graph_explorer into ui-components.
• Also Fixed the upscroll bug now.
• Updated the issues mostly and will add more details in future with each worklog even this one.
• I have found a glictch where if you goto the playproject node which has 2 super nodes it behaves unexpectedly, will handle that in future.

• Other than that will work on the static scroll so the cursor always remains above what was clicked
  Basically these two remaining tasks:

Proposal

• Fix the multiple hub bug - 30min
• static scroll - 1hr30min

[serapath]

feedback 2025.07.15

Thank you for improving task/issue structure. Much better now.
Please keep on improving it and maintaining the correct structure in the future too.

Regarding the code - it is okay, but can you please review any LLM changes in detail - it feels unlikely that you would require things this way - it makes no sense. If you npm install ddroid/graph-explorer then you can require it by name like any other module.
It makes no sense to const graph_explorer = require('../node_modules/graph-explorer').
Now that is the location where npm installs graph-explorer into, but the entire point of it is that require(...) will allow you to require by name.

The same is true for STATE. You can just require('STATE') instead of requie('./STATE')

Otherwise, lets continue with the next issues/tasks, but please fix how you require modules.