spiritseal / bubblemap Goto Github PK
View Code? Open in Web Editor NEWForce Directed Mind Map Tree for Rapid, Collaborative, AI-assisted Idea Generation. Won the 2023 Congressional App Challenge.
Home Page: https://bubblemap.app
Force Directed Mind Map Tree for Rapid, Collaborative, AI-assisted Idea Generation. Won the 2023 Congressional App Challenge.
Home Page: https://bubblemap.app
Double-check any remaining eslint-disable
statements in code at the end of MVP deadline (i.e. after all other MVP features are completed) to see if there are any missed optimizations or necessary refactoring.
Significantly lower cost (read: free) AI generation alternative to GPT-3 model currently being used. Not quite as high performance, but should work well for our use case. Also slightly faster iirc (for a generative model).
Programatically and Visually "Select" a node so that it may have actions performed upon it, such as editing it's text, deletion, or new child node creation.
OpenAI backend calls are currently failing. To be fixed
When resizing the window, particularly from a lower resolution to a greater one, the svg canvas remains the same size, causing visual rendering issues, such as nodes only being visible on half of the screen.
An optimal resolution to this problem that could also resolve the issue of a limited svg canvas space in general would be to utilize svg viewports and viewboxes to allow the svg simulation canvas to appear to become the full size of the available window space, but allowing d3 to continue to interact with the element as it already does.
Will be linked to some sort of context-sensitive image generation tool, such as DALL-E, Google Images, etc.
Generate Ideas using the static Datamuse API. Should provide extremely fast return time relative to generative AI models.
Partially started by #61
Button to reset canvas pan and zoom back to default, in the event a user gets lost.
Use ID instead of index in the node's data.
We need a home page at some point in the future
Primary components:
This is a major issue that could ultimately determine the success of our submission to the CAC. Mb get some ideas from people who beta test the MVP App prior to submission?
Closer inspection revealed this formation:
Maybe find a way to more strongly discourage this type of node crossing in resting positions.
Originally posted by @SpiritSeal in #58 (comment)
(Side?) Menu that would show more in-depth details about a selected node when triggered.
:(
Kindof heavily dependant on #31, but significant to the professionalism of the final project nonetheless.
Needs to:
How we managed to forget that this was a critical feature is beyond me.
Relies on #74
Use this mentioned toggle to actually change how the app functions.
This will prob just be updating main, commenting out variable and function declarations that are planned to be implemented in the near future, but are currently unused. This is in order to pass action checks such as ESLint's no-unused-vars
and etc because the action currently treats all warnings (such as these) as errors for the sake of production builds.
These temporary modifications should be reverted as they are actually needed and implemented.
See title. Some pop-up menu (similar to VS-code command palette menu) that allows you to easily search through your nodes and jump to them.
Utilize svg viewports and viewboxes to allow the svg simulation canvas to appear to become the full size of the available window space, but allowing d3 to continue to interact with the element as it already does.
This will resolve several appearance-related issues that have already been documented, as well as generally make the way the DOM displays and interacts with our svg components more in line with industry standards for infinite canvas web apps.
Supersedes #19
Very Fun. Allows my College Essay PTSD to kick in.
Create Ghost Nodes containing the AI generated Suggestions when the generate idea functionality is called.
The hard restraints that the bounding boxes create on canvas panning and node placement severely harm UX. At the very least, it sometimes makes it difficult to manipulate the canvas in certain intended manners. Users moving too far away from the mind map and root node, the issue the bounding box is intended to solve, can instead be mitigated by having a "return home" button on screen that reverts the pan and zoom back to the project defaults (most likely a post-MVP feature).
For now, the bounding constraints on both canvas and node placement is a bug in the current build.
Mentioned in #13
Just some basic clickable buttons that are overlaid over the svg DOM. As a POC, this should be small pop-out hamburger icon button that triggers a side panel drawer menu with a couple of filler options.
Using repetitions of a shortest width character (such as l
), guarantee that the node text is aligned such that is doesn't cause any boundary clipping or other visual bugs with the SVG space.
Comes after #11
Immediately after node creation, call both Datamuse and OpenAI Idea Gen Functions on the node.
When idea suggest is requested, utilize whatever is ready to display.
Rather than displaying the entirety of the content a user types for a node as text on the node, have each node only display a few select keywords/ topics generated based on the input of the user.
This can be done fairly easily and computationally quickly through the basic NLP included with the compromise
library.
Only root node (of id 0) should have the formatting of the root node (i.e. color, undraggable, hover icon, etc).
Multiple nodes have the formatting of the central "root node".
May be related to #10
When a node is dragged, the node may not be moved fast enough, resulting in the mouse leaving the node and the node being released.
To fix this, the listener for onMouseDown and onMouseUp should be moved to the entire Mind Map.
We need to find an alternative, high-speed API that can also handle phrases and perform word association on it.
Use the Unsplash API to generate images based on a single word or phrase query.
Relates to #22, which would actually render the images as backgrounds for nodes.
Given an already initialized Node, be able to edit it's text.
Tasks:
Dedicated keybinds for traversing the node graph as a tree data structure.
See title. Node with id 0 (the root node) is still able to be technically dragged and moved around, moving the entire simulation. Can be resolved by adding additional logic to the svg onMouseDown
function. Specifically, logic that only invokes setNodeSelected(nodeClicked);
if nodeClicked.id!=0
.
I'll try to implement this bugfix myself, but I'll let you know if it's a nontrivial patch.
OpenAi and Datamuse currently return different object types on function call. Fix this
When grabbing a node away from it's center and dragging it, the cursor snaps to the middle of the node instead of dragging with the cursor remaining relative to the node position. This causes node drags to "snap" and feel "off" from a UX perspective.
Low Priority, but I thought we already fixed this near the beginning.
Why does Firestore not have an import/ export feature. ๐ญ
From Multiple Sources:
"Your current node design very unintuitive"
"What's that thing on the top of the bubbles? Wait, you're telling me I was supposed to click that?!?!"
"Do you really need that much information on the screen at a time? That's just visual clutter."
"Ewwwwwwwww"
Provide Chain of Ideas as context for Datamuse and OpenAI idea generation.
For datamuse, this could be done by adding a topics
modifier to the query. See https://www.datamuse.com/api/
For OpenAI, this could be done by either adding related words to the query or adding the full tree chain instead.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.