Created landing page with a d3.js network graph#5
Created landing page with a d3.js network graph#5austindang67 wants to merge 30 commits intomainfrom
Conversation
Created the vite-react typescript project
Nodes can now be dragged around.
austindang67
changed the title
|
@carlosparadis May I rewrite history to adjust the commit messages so that they follow the correct contributing format? |
…imulation runs for a short amount of time to calculate initial positions of the nodes, then it is disabled. Largest node of a group is used as the center node for a group of nodes during simulation. Removed collision from nodes. Nodes now have labels.
|
One request: Please separate the commit title and body instead of using the commit title as body (they truncate). You can edit your vim editor to highlight the character count at which point it is being truncated. Thanks! |
Will do! Here is the coded landing page so far. 
|
|
Could you post the new screnshot to the associated issue too? Also, don't forget to change the colors for yellow and blue, still mismatching. I will add additional comments on the issue so it is in one place, thank you! |
carlosparadis
left a comment
carlosparadis
left a comment
There was a problem hiding this comment.
There is not much for me to review here until you reorganize the folder architecture to meet the bullet proof react. If you have anything specific you want to ask at code level, add a comment at the given line and ping me. Otherwise, request a code review again when ready.
For task general tasks that are not line specific please use the issue.
.idea/.gitignore
Outdated
There was a problem hiding this comment.
I do not believe we want to version this. Isn't .idea associated to the IDE?
client/public/sample-data.json
Outdated
There was a problem hiding this comment.
I guess sample data is OK to clarify the template so long that is the intended purpose.
There was a problem hiding this comment.
Hmm.. I am not familiar with a client folder. Does this follow bullet proof react?
There was a problem hiding this comment.
Hi Carlos. The client folder is not a guideline of bulletproof react specifically.
I figured if a back-end were to be developed in the future, it would be developed within the same repository in a server folder. Doing so would make it easier for developers to see how their changes impact the front-end and change front-end code as needed without having to keep track of two repositories.
Let me know if this is something you would like to continue with or not.
There was a problem hiding this comment.
Certainly not something we want to version (the "BACKUP" file).
IDE files will no longer be versioned.
…tproof React App directory created. Moved routing into a dedicated router file, created an app provider, and created an index. App directory now has a 'routes' directory which contains the pages of the application, rather than being located in the 'pages' directory. Pages directory has been removed. Config directory created with path config. Moved network graph component out of 'components' directory and into the new 'features' directory as it has become a very complicated component. Began using react's Query Client for managing data fetching and caching. Will likely be unused for now, but will be very helpful in the future when a back-end has been established and HTTP requests can be made to it. Components directory now has subdirectories 'ui' and 'layouts.' Any layouts and primitive components have been migrated here.
.gitignore should now apply to the entire repo instead of just client. .idea folder has been deleted.
.gitignore should now apply to the entire repo instead of just client. .idea folder has been deleted.
Moved all logic into useEffect with only dependency being the data Dummy data now comes from a hook rather than being passed as a prop Network Graph will not properly re-render if data source changes (like if user views different repo)
Used color picker to grab hex values of corresponding nodes on API webpage and applied them to the nodes in the Network Graph.
|
@austindang67 Is there a README anywhere explaining how to setup and run? |
Implemented double-click feature for nodes. Working on highlighting.
Hi Carlos, I am working on one now and will notify you when I have pushed it to the branch. |
Updated README.md with instructions for running the application. Changed code style of an import in dummy-data.ts
@carlosparadis I have updated the README with instructions for running the application. Let me know if you run into any issues. |
Double-clicking a node will highlight it and grey out other nodes. Double-clicking it again will exit highlight mode. Highlighting of related nodes not yet implemented.
…ting Dummy data has been split into four different jsons. Data from jsons are combined before initial render to perform physics simulation. Double-clicking a node will now highlight it along with immediately related nodes (nodes that are one link away). Double-clicking a node previously would highlight only the double-clicked node.
carlosparadis
left a comment
carlosparadis
left a comment
There was a problem hiding this comment.
Here are some comments in respect to #1
If you have overall architectural thought follow-up there. If it is inline specific, then post on the code comment (not conversation tab, hard to find later)
client/src/data/file-dummy-data.ts
Outdated
There was a problem hiding this comment.
Please update sample data following the specification here: #6 (comment)
|
|
||
| export const NetworkGraph = () => { | ||
| const { data } = useDummyData(); | ||
| const data = useDummyData(); |
There was a problem hiding this comment.
The data was split, but I still the global function here. Is this correct?
| const canvasRef = useRef<HTMLCanvasElement>(null); | ||
|
|
||
| const centers = (w: number, h: number) => ({ | ||
| const nodeGroupCenters = (w: number, h: number) => ({ |
There was a problem hiding this comment.
When you remove the field group from the json, please be sure to rename these variables consistently or it will be very confusing.
There was a problem hiding this comment.
people: [w * 0.5, h * 0.4],
mail: [w * 0.8, h * 0.3],
file: [w * 0.25, h * 0.4],
issue: [w * 0.8, h * 0.6],What is this for? Please add a comment above the code to clarify.
There was a problem hiding this comment.
Network code is in charge of too much. Can we refactor some of its features out of the function? There is logic for gravity, logic for node dimension, logic for rendering, etc. I imagine the partial fading of nodes and logic to highlight only a subgraph is also here? This is a "God object" at this point if so .Could you give me a better idea of everything going on here? This will be hard to locate the logic in current state so give some thought on this.
There was a problem hiding this comment.
@carlosparadis
Hi Carlos, I have refactored the NetworkGraph component and moved all logic into appropriate hooks and utils.
There was a problem hiding this comment.
Hi Austin, this is great but can you give me a human-readable version of what your architecture looks like so I don't need to infer from code? What are the major part of the system now? (Please follow up on the issue instead of here for that one).
This will save me a lot of time (and energy) when looking at the code. Thanks!
There was a problem hiding this comment.
Yes, I am currently working on a human-readable version of the architecture. It will come as an update to the first comment in the architecture issue. I will notify you when I have completed it. Thank you!
There was a problem hiding this comment.
Please remember to keep it simple! You don't want a fully flashed architecture diagram that take you hours (Unless it is the one for your poster). Just a few rectangles even done on a piece of paper and pen. What I really want to understand is your abstractions.
Ideally you would want to send me that for consideration before implementing it, while you work on something else (e.g. the filepath, or the attributes) that there is less room for different choice. Just slightly worried we may need to backtrack on this too depending on how much our mental models overlap and what else is intended for the interface on the long run.
If you need more than 5 minutes to make this doodle, it is likely overkill.
There was a problem hiding this comment.
On another minor note: Now is a good time to add a few 1 line comments here and there on these functions. E.g. I have no idea what GraphInteraction or GraphSimulation does. Simulation seems to be the gravity configuration of the network. If so, you may want to name it as such. In Social Network Analysis, algorithms such as OpenOrd, ForceAtlas, etc are reliant on gravity to attract nodes based on a particular heuristic.
GraphSimulation generally is associated to the generation of graphs from statistics of a real graph to assess if phenomena in the constructed network is due to random behavior or a specific community trait. In short: Trying to create nomenclature on top of a well established one in the domain of SNA will likely cause a lot of confusion.
Interactions seems to be what users can do with the graph?
Lastly, hooks seems to be living outside the feature folder. This..does not look consistent to bullet proof:
https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md
See the structure of feature folders, which also contain hooks. You instead have a hooks/NetworkGraph and features/networkGraph. So to say, it sounds to me hooks/NetworkGraph should be inside features/networkGraph/hooks..?
I will defer further comments for when you come up with the intended architecture, but you may want to give some thought on the above as a starting point.
There was a problem hiding this comment.
Note in this file you want to modify
export type Group = 'people' | 'mail' | 'file' | 'issue';So people, mail, file, issue are its own well defined types. This will also ensure when you read from the file, that the types can reinforce the data is correct before it propagates throughout the application. Things like missing fields and whatnot.
Landing page now has a file selector that allows the user to load JSONS from local storage.
Json files are now in data directory for dev usage
NetworkGraph component now contains just hooks and the canvas Created two new custom hooks for running NetworkGraph logic Refactored all helper functions for NetworkGraph Moved helper functions into new utils file of the NetworkGraph feature
NetworkGraphContext now uses a hook that loads JSON data from directory Manual file selector removed Hook loads from directory specified by user in new user.config.yaml
There was a problem hiding this comment.
Note: Correction of attributes and naming still missing here and other data files
There was a problem hiding this comment.
Use .yml for consistency with Kaiaulu. Also unclear why two directories. What I expect to see here is 4 paths to the associated data of each graph, i.e. people, files, issues, mail. Use Kaiaulu project configs as reference.
Not sure why this is called user.config.yaml either. Presuming this is the config that contains the data path of the networks, then the file name should be after the project, as it is done in kaiaulu. So kaiaulu.yml, or helix.yml, etc.
| } | ||
|
|
||
| const graph: NetworkGraphData = { nodes: allNodes, links: allLinks }; | ||
| const data = useJsonFiles(); |
There was a problem hiding this comment.
This looks like a "useReadEverything()" to me since everything will be json now or in the future. See comment on issue tracker about breaking this down.
Highlight mode will toggle off upon double-clicking ANY subgraph node. Whereas before, only double-clicking the original node would toggle it.
Installed dnd-kit, a library that allows components to be draggable New draggable overlay component created. Network Graph uses modular component "FloatingPanel" to render overlay.
Readme now includes instructions for installing node.js Changed several files to kebab case for consistency Re-organized file structure for better adherence to Bulletproof react. Simplified app router. Removed unused query client
Created documentation for app entry points (layout, provider, router) Created documentation for floating overlay. Created documentation for network-graph-context. Created documentation for all hooks in the network-graph feature. Deprecated 'network-graph-utils' and moved helper logic into hooks.
Modularized drawGraph function to accept colors for link and outline. Created drawToCanvas function in NetworkGraph. Exposed drawToCanvas to hooks used in NetworkGraph. Hooks use drawToCanvas after mutating nodes and links. Created MUI theme with dark mode. Resized navbar and changed color scheme of application. Removed in-line tailwind styling and replaced with MUI.
Modularization of drawGraph, now accepts colors as params Organized common helper functions by putting them in library. Simplified Network Graph hooks to require just one parameter Network Graph hooks accept canvas draw function as parameter. Separated further concerns, NetworkGraphCanvas owns draw function. Separated further concerns, SubGraphOverlay moved out of canvas. Removed remaining tailwind styling, just MUI now. Fixed search bar padding. Replaced divs with Box component from MUI. Added large test data.
Added documentation to all major parts of the Network Graph. 'Projects' has been replaced with 'Kaiaulu' in NavBar.
2 participants
@carlosparadis
Here is a pull request for the issue "Home interface and d3.js network."
A landing page with a d3.js network graph has been implemented here.