Pavlo Myroniuk
гляньте що я випадково знайшов: https://github.com/NorthwoodsSoftware/GoJS
https://gojs.net/latest/samples/ldLayout.html
у них ще є класна демка. треба у себе локально запустити та спробувати внести дані родинного дерева. якщо леяут буде нормальний, тоді варто імплементовувати цей алгоритм
у них ще є класна демка. треба у себе локально запустити та спробувати внести дані родинного дерева. якщо леяут буде нормальний, тоді варто імплементовувати цей алгоритм
gojs.net
Layered Digraph Demonstration of LayeredDigraphLayout Options
Interactive demonstration of hierarchical layout features by the LayeredDigraphLayout class.
Pavlo Myroniuk
https://gojs.net/latest/samples/ldLayout.html у них ще є класна демка. треба у себе локально запустити та спробувати внести дані родинного дерева. якщо леяут буде нормальний, тоді варто імплементовувати цей алгоритм
дуже потужна ліба. тут приклади використання: https://gojs.net/latest/samples/
gojs.net
Samples Index | GoJS
GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other
visual graph types.
visual graph types.
Pavlo Myroniuk
ось так виглядає зараз. я добавив людей та об'єднав дерева батьків та дітей. навіть дітей можна колапсити (ви бачите кнопки мінус на вузлах) стрілочкою вказана starting node
Please open Telegram to view this post
VIEW IN TELEGRAM
gojs.net
Double Tree of Nodes and Links Laid out by TreeLayout in Two Opposite Directions from Root Node
Layout of two trees in opposite directions, assuming a single root, using TreeLayout.
Pavlo Myroniuk
треба у себе локально запустити та спробувати внести дані родинного дерева
як добре що є ai.
клонував репу. тикнув у потрібний sample і сказав написати такий самий, але координати графа захардкодити замість автогенерування.
в принципі, алгоритм працює добре.
там є багато дрібних косяків. дещо не по центру. дещо треба було свапати місцями щоб було норм.
проте свапання можна легко пофіксити власною імплементацією обходу графа. головне що overall layout виглядає нормально та видно зв'язки
клонував репу. тикнув у потрібний sample і сказав написати такий самий, але координати графа захардкодити замість автогенерування.
в принципі, алгоритм працює добре.
там є багато дрібних косяків. дещо не по центру. дещо треба було свапати місцями щоб було норм.
проте свапання можна легко пофіксити власною імплементацією обходу графа. головне що overall layout виглядає нормально та видно зв'язки
Pavlo Myroniuk
як добре що є ai. клонував репу. тикнув у потрібний sample і сказав написати такий самий, але координати графа захардкодити замість автогенерування. в принципі, алгоритм працює добре. там є багато дрібних косяків. дещо не по центру. дещо треба було свапати…
ось так воно мало виглядати
#[instrument(level = "trace"), skip(work)] pinned «Флудилка тваринки, його намагання писати пет-проєкти, щось досліджувати, чи просто займатися фігньою Ті, кого я автоматично додав, можете лівати (я не ображуся). Просто Я замучився кидати усе в 3 різних чати. Буду кидати сюди»
Pavlo Myroniuk
гляньте що я випадково знайшов: https://github.com/NorthwoodsSoftware/GoJS
Погані новини: вчора не додивився що сама бібліотека closed source. Не вийде подивитися як працює їхній алгоритм під капотом. Ну і фіг ними.
Хороші новини: Я знайшов інші імплементації з відкритим кодом
Хороші новини: Я знайшов інші імплементації з відкритим кодом
Pavlo Myroniuk
Я знайшов інші імплементації з відкритим кодом
https://erikbrinkman.github.io/d3-dag/
https://github.com/erikbrinkman/d3-dag
працєю за алгоритмами Sugiyama framework. те, що мені треба.
https://github.com/erikbrinkman/d3-dag
працєю за алгоритмами Sugiyama framework. те, що мені треба.
Pavlo Myroniuk
Я знайшов інші імплементації з відкритим кодом
https://github.com/dagrejs/dagre
згідно їх доки (https://github.com/dagrejs/dagre/wiki#recommended-reading), вони не використовують оригінальний Sugiyama framework. проте спирають на подібні алгоритми. найголовніше, що вони використовують Brandes and Köpf алгоритм для визначення координат. із усього Sugiyama framework, Brandes and Köpf це те, що для мене актуально
також ця ліба інтегрується легко у reactflow (інша ліба, яку я використовую для рендера)
згідно їх доки (https://github.com/dagrejs/dagre/wiki#recommended-reading), вони не використовують оригінальний Sugiyama framework. проте спирають на подібні алгоритми. найголовніше, що вони використовують Brandes and Köpf алгоритм для визначення координат. із усього Sugiyama framework, Brandes and Köpf це те, що для мене актуально
For positioning (or coordinate assignment), we derived our algorithm from Brandes and Köpf, "Fast and Simple Horizontal Coordinate Assignment". We made some adjustments to get tighter graphs when node and edges sizes vary greatly.
також ця ліба інтегрується легко у reactflow (інша ліба, яку я використовую для рендера)
GitHub
GitHub - dagrejs/dagre: Directed graph layout for JavaScript
Directed graph layout for JavaScript. Contribute to dagrejs/dagre development by creating an account on GitHub.
Pavlo Myroniuk
гляньте що я випадково знайшов:
https://js.cytoscape.org/
чим більше риюся тим більше знаходжу ліб для рендера графів. треш скільки їх є
Graph theory (network) library for visualisation and analysis
чим більше риюся тим більше знаходжу ліб для рендера графів. треш скільки їх є
js.cytoscape.org
Cytoscape.js
Graph theory / network library for analysis and visualisation - compatible with CommonJS/Node.js/Browserify/Webpack, AMD/Require.js, npm, Bower, jspm, Meteor/Atmosphere, jQuery, and plain JS/JavaScript
❤2
Forwarded from Pavlo Myroniuk
Ще я дуже люблю аї через те, що набагато легше стало вивчати нові штуки.
Раніше я дофіга часу тратив щоб ознайомитися з якоюсь новою апішкою чи алгоритмом. А зараз воно офігенно пише пояснення і шукає замість мене
Раніше я дофіга часу тратив щоб ознайомитися з якоюсь новою апішкою чи алгоритмом. А зараз воно офігенно пише пояснення і шукає замість мене
Pavlo Myroniuk
Ще я дуже люблю аї через те, що набагато легше стало вивчати нові штуки. Раніше я дофіга часу тратив щоб ознайомитися з якоюсь новою апішкою чи алгоритмом. А зараз воно офігенно пише пояснення і шукає замість мене
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1st image - d3-dag.
в загальному алгоритм працює добре. неправильно визначив рівень для нод 33, 34, 22, порядок нод на рівні теж інший має бути.
2nd image - dagrejs
алгоритм теж працює добре. тільки малі проблеми порядку нод та центрування теж присутні.
обидві ліби імплеентують Sugiyama framework. протке Sugiyama framework це набір алгоритмів для визначення рівня ноди, зменшення пересікань, видалення циклів, і тд. тому різні імплементації малюватимуть різні графи
потрібно дізнатися в якій із ліб простіше захардкодити рівень та порядок нод. тоді зможу інтегрувати їх у свій проєкт.
якщо не можна буде захардкодити порядок нод, то тоді треба буде писати алгоритм самому (зато є два класних референса)
в загальному алгоритм працює добре. неправильно визначив рівень для нод 33, 34, 22, порядок нод на рівні теж інший має бути.
2nd image - dagrejs
алгоритм теж працює добре. тільки малі проблеми порядку нод та центрування теж присутні.
обидві ліби імплеентують Sugiyama framework. протке Sugiyama framework це набір алгоритмів для визначення рівня ноди, зменшення пересікань, видалення циклів, і тд. тому різні імплементації малюватимуть різні графи
потрібно дізнатися в якій із ліб простіше захардкодити рівень та порядок нод. тоді зможу інтегрувати їх у свій проєкт.
якщо не можна буде захардкодити порядок нод, то тоді треба буде писати алгоритм самому (зато є два класних референса)
👍1
Pavlo Myroniuk
1st image - d3-dag. в загальному алгоритм працює добре. неправильно визначив рівень для нод 33, 34, 22, порядок нод на рівні теж інший має бути. 2nd image - dagrejs алгоритм теж працює добре. тільки малі проблеми порядку нод та центрування теж присутні. …
d3-dag.html
9.3 KB
btw, можете спробувати в себе. просто відкрийте файл у браузері (бажано хром 😐 на firefox-based браузерах можуть бути баги. хз чому та і пофіг чому) .
там граф захардкоджений. можна змінити ноди та ребра на будь які що вам подобаються
там граф захардкоджений. можна змінити ноди та ребра на будь які що вам подобаються
Please open Telegram to view this post
VIEW IN TELEGRAM
ще ніколи не був на стільки радий що аішки існують 🤩
сьогодні такий подумав що я не хочу переписувати алгоритм вручну. оскільки є дуже класна імплементація в середині dagre (https://github.com/dagrejs/dagre/blob/master/lib/position/bk.js).
я закинув цей файл в контекст клоду + дописав власних вказівок. клод успішно переписав алгоритм під мій проєкт.
на фото ліворуч: намальовані ноди пораховані за допомогою алгоритму, написаного клодом за зразком із dagre.
праворуч граф намальований оригінальною імплементацією алгоритму.
I think I can call it a success
сьогодні такий подумав що я не хочу переписувати алгоритм вручну. оскільки є дуже класна імплементація в середині dagre (https://github.com/dagrejs/dagre/blob/master/lib/position/bk.js).
я закинув цей файл в контекст клоду + дописав власних вказівок. клод успішно переписав алгоритм під мій проєкт.
на фото ліворуч: намальовані ноди пораховані за допомогою алгоритму, написаного клодом за зразком із dagre.
праворуч граф намальований оригінальною імплементацією алгоритму.
I think I can call it a success
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1🫡1
Pavlo Myroniuk
сьогодні такий подумав що я не хочу переписувати алгоритм вручну.
ну і власне чому я мав цим зайнятися:
тому що dagree апішка надозволяє захардкодити леяут графа. я думав форкнути та додати пару методів до апішки, проте потім вирішив що нафіга, якщо мені із того всього треба тільки один файлик із один алгоритмом. вирішив що буде простіше переписати його llm-кою (і виявився правим)
тому що dagree апішка надозволяє захардкодити леяут графа. я думав форкнути та додати пару методів до апішки, проте потім вирішив що нафіга, якщо мені із того всього треба тільки один файлик із один алгоритмом. вирішив що буде простіше переписати його llm-кою (і виявився правим)
❤1
Pavlo Myroniuk
ще ніколи не був на стільки радий що аішки існують 🤩 сьогодні такий подумав що я не хочу переписувати алгоритм вручну. оскільки є дуже класна імплементація в середині dagre (https://github.com/dagrejs/dagre/blob/master/lib/position/bk.js). я закинув цей…
rate my prompt engineering skills 😎 (please don't)
прикол ще в тому, що коли я пішов трохи рефакторити код та додавати різні перевірки, то добавив багів більше ніж клод😁 я забув що
I need to draw a graph. I chose Brandes-Köpf positioning algorithm. Also I found a reference implementation: see this file: `/home/pavlo-myroniuk/delete_it/dagrejs/dagre/lib/position/bk.js`.
I want you to do the following tasks:
1. Read the attached file
2. Write the same algorithm in the `fullGraph.ts` file, but follow the following instructions:
- Remove all logic related to conflicts: conflicts finding, conflict types, etc. I guarentee that in my case the provided graph 100% will not have any crossing edges (will not have conflicts).
- I want the ability to hardcode the graph. e.g. I write an array like this one:
```js
var data = [
{ id: "1", parentIds: [] },
{ id: "2", parentIds: [] },
{ id: "3", parentIds: ["1"] },
{ id: "4", parentIds: ["2"] },
{ id: "5", parentIds: ["3", "4"] },
// .....
];
```
and construct a graph from it.
- I want the ability to hardcode the leyout. Do not write any leyout algorithm. I will decide each node level and position within the level manually.
- The internal graph structure should be a hashmap of parents (key - nodeid, value - array of parents) + hashmap of children (key - nodeid, value - array of children), layering (array of levels where lever is an array of nodes ids within the level).
прикол ще в тому, що коли я пішов трохи рефакторити код та додавати різні перевірки, то добавив багів більше ніж клод
0 всередині if дає false. я вже дуже звик, що Rust просто таку фігню не скомпілює (раст заставляє явно перетворювати у bool)Please open Telegram to view this post
VIEW IN TELEGRAM
👍2