diff --git a/src/components/Routing/index.tsx b/src/components/Routing/index.tsx
index 8169177..a64725d 100644
--- a/src/components/Routing/index.tsx
+++ b/src/components/Routing/index.tsx
@@ -98,7 +98,12 @@ const Routing = () => {
element={
<>
;
const addNode = ({ parent, text }: { parent: number; text: string }) => {
const newID =
@@ -103,6 +106,7 @@ const MindMap = () => {
nodes: arrayRemove(strippedNodeToDelete),
});
};
+
const updateNode = (oldNode: node, newNode: node) => {
const batch = writeBatch(firestore);
if (oldNode.id !== newNode.id) {
@@ -114,6 +118,7 @@ const MindMap = () => {
batch.update(mindMapRef, {
nodes: arrayRemove(stripInputNodeProperties(oldNode)),
});
+
if (newNode.id === 0) {
batch.update(mindMapRef, {
title: newNode.text,
@@ -129,9 +134,6 @@ const MindMap = () => {
setSelectedNode(newNode);
}
};
- // const updateNodePrompt = (nodeToUpdate: node) => {
- // // Create an MUI dialog box to update the node
- // };
if (!mindmap) return navigate('/mindmaps')}
+ >
+
- {/*
);
};
diff --git a/src/pages/MindMap/overlays/BottomRightButtons/KeyBindsDialog.css b/src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.css
similarity index 100%
rename from src/pages/MindMap/overlays/BottomRightButtons/KeyBindsDialog.css
rename to src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.css
diff --git a/src/pages/MindMap/overlays/BottomRightButtons/KeyBindsDialog.tsx b/src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.tsx
similarity index 100%
rename from src/pages/MindMap/overlays/BottomRightButtons/KeyBindsDialog.tsx
rename to src/pages/MindMap/overlays/BottomBar/KeyBindsDialog.tsx
diff --git a/src/pages/MindMap/overlays/BottomBar/index.tsx b/src/pages/MindMap/overlays/BottomBar/index.tsx
new file mode 100644
index 0000000..8a6da3d
--- /dev/null
+++ b/src/pages/MindMap/overlays/BottomBar/index.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import {
+ AppBar,
+ Box,
+ Toolbar,
+ IconButton,
+ Fab,
+ alpha,
+ InputBase,
+} from '@mui/material';
+import { Add, Help, MyLocation } from '@mui/icons-material';
+import { doc, updateDoc } from 'firebase/firestore';
+import { useFirestore } from 'reactfire';
+import { SimulationNodeDatum } from 'd3-force';
+import { MindMap, node, WithID } from '../../../../types';
+import KeyBindsDialog from './KeyBindsDialog';
+
+const StyledFab = styled(Fab)({
+ position: 'absolute',
+ zIndex: 1,
+ top: -30,
+ left: 0,
+ right: 0,
+ margin: '0 auto',
+});
+
+const Search = styled('form')(({ theme }) => ({
+ position: 'relative',
+ borderRadius: theme.shape.borderRadius,
+ // backgroundColor: alpha(theme.palette.common.white, 0.15),
+ '&:hover': {
+ backgroundColor: alpha(theme.palette.common.white, 0.15),
+ },
+ marginRight: theme.spacing(2),
+ marginLeft: 0,
+ width: '100%',
+ [theme.breakpoints.up('sm')]: {
+ marginLeft: theme.spacing(3),
+ width: 'auto',
+ },
+}));
+
+const screenWidth = window.innerWidth;
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+ color: 'inherit',
+ '& .MuiInputBase-input': {
+ padding: theme.spacing(1, 1, 1, 1),
+ transition: theme.transitions.create('width'),
+ width: '100%',
+ textOverflow: 'ellipsis',
+ [theme.breakpoints.up('md')]: {
+ width: screenWidth * 0.3,
+ },
+ },
+}));
+
+const BottomBar = ({
+ data,
+ handleAddNode,
+ selectedNode,
+ resetCanvas,
+}: {
+ data: WithID;
+ handleAddNode: (parentNode: SimulationNodeDatum & node) => void;
+ selectedNode: SimulationNodeDatum & node;
+ resetCanvas: () => void;
+}) => {
+ const [isKeyBindsDialogOpen, setIsKeyBindsDialogOpen] = useState(false);
+ const [title, setTitle] = useState(data.title ?? 'Untitled MindMap');
+ const firestore = useFirestore();
+
+ const titleRef = useRef(title);
+ titleRef.current = title;
+
+ const dataTitleRef = useRef(data.title);
+ dataTitleRef.current = data.title;
+
+ const updateTitle = (newTitle: string) => {
+ const newData: Partial = {
+ title: newTitle,
+ };
+ updateDoc(doc(firestore, `mindmaps/${data.ID}`), newData)
+ .then()
+ .catch((err) => console.error(err));
+ };
+
+ useEffect(() => {
+ setTimeout(() => {
+ if (
+ title === titleRef.current &&
+ titleRef.current !== dataTitleRef.current
+ ) {
+ updateTitle(titleRef.current);
+ }
+ }, 1500);
+ }, [title]);
+
+ return (
+
+
+ setIsKeyBindsDialogOpen(false)}
+ />
+ setIsKeyBindsDialogOpen(true)}
+ >
+
+ {
+ e.preventDefault();
+ updateTitle(title);
+ }}
+ >
+ setTitle(e.target.value)}
+ sx={{
+ textOverflow: 'ellipsis',
+ }}
+ onKeyUp={(e) => {
+ if (e.key === 'Enter') {
+ e.currentTarget.blur();
+ }
+ }}
+ onBlur={() => {
+ setTitle(title || 'Untitled MindMap');
+ }}
+ />
+
+ handleAddNode(selectedNode)}
+ >
+
+
+
+
+
+ );
+};
+export default BottomBar;
diff --git a/src/pages/MindMap/overlays/BottomRightButtons/index.tsx b/src/pages/MindMap/overlays/BottomRightButtons/index.tsx
deleted file mode 100644
index 5f13189..0000000
--- a/src/pages/MindMap/overlays/BottomRightButtons/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { CenterFocusStrong, QuestionMark } from '@mui/icons-material';
-import { Fab } from '@mui/material';
-import KeyBindsDialog from './KeyBindsDialog';
-
-const HelpButton = () => {
- const [isKeyBindsDialogOpen, setIsKeyBindsDialogOpen] = useState(false);
-
- return (
- <>
- setIsKeyBindsDialogOpen(false)}
- />
- setIsKeyBindsDialogOpen(true)}
- // variant="extended"
- sx={{
- right: 20,
- bottom: 20,
- position: 'absolute',
- }}
- >
-
-
- );
-};
-
-const ResetViewportButton = () => {
- // eslint-disable-next-line
- const one = 1;
- return (
- {
- // reset the viewport
- }}
- >
-
- );
-};
-
-const BottomRightButtons = ({
- drawerOpen,
- drawerWidth,
-}: {
- // State
- drawerOpen: boolean;
- // Drawer width
- drawerWidth: number;
-}) => (
- (null);
+ // const [realNode, setRealNode] = useState(null);
// create a state to store the value of the input
- const [input, setInput] = React.useState('');
+ const [input, setInput] = useState('');
- const [textCache, setTextCache] = React.useState<{
+ const [textCache, setTextCache] = useState<{
[key: number]: string | undefined;
}>({});
- const [datamuseCache, setDatamuseCache] = React.useState<{
+ const [datamuseCache, setDatamuseCache] = useState<{
[key: number]: string[] | undefined;
}>({});
- const [gpt3Cache, setGpt3Cache] = React.useState<{
+ const [gpt3Cache, setGpt3Cache] = useState<{
[key: number]: string[] | undefined;
}>({});
@@ -131,9 +132,9 @@ const PersistentDrawerRight = ({
};
// Creat a state called "initialLoad"
- const [initialLoad, setInitialLoad] = React.useState(true);
+ const [initialLoad, setInitialLoad] = useState(true);
- React.useEffect(() => {
+ useEffect(() => {
setInput(selectedNode.text);
if (initialLoad) {
generateIdeas(selectedNode.id, selectedNode.text);
@@ -147,17 +148,8 @@ const PersistentDrawerRight = ({
}
}, [selectedNode]);
- React.useEffect(() => {
- // console.log('datamuse cache', datamuseCache);
- }, [datamuseCache]);
- React.useEffect(() => {
- // console.log('gpt3 cache', gpt3Cache);
- }, [gpt3Cache]);
- React.useEffect(() => {
- // console.log('text cache', textCache);
- }, [textCache]);
// When the panel is opened, generate ideas for the selected node
- React.useEffect(() => {
+ useEffect(() => {
if (open) {
generateIdeas(selectedNode.id, selectedNode.text);
}
@@ -188,7 +180,6 @@ const PersistentDrawerRight = ({
return (
-
-
Idea Generation Panel
@@ -337,46 +328,7 @@ const PersistentDrawerRight = ({
))}
-
- {/* Create a Help Button that is positioned on the bottom right of the page relative to the drawer */}
- ;
- onClick: () => void;
-}
-
-const DrawerListItem: React.FC = ({
- text,
- icon,
- onClick,
-}) => (
-
-
- {icon}
-
-
-);
-
-export default DrawerListItem;
diff --git a/src/pages/MindMap/overlays/SideMenu/SettingsButton.tsx b/src/pages/MindMap/overlays/SideMenu/SettingsButton.tsx
deleted file mode 100644
index 911409d..0000000
--- a/src/pages/MindMap/overlays/SideMenu/SettingsButton.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import {
- Button,
- Dialog,
- ListItemText,
- ListItem,
- List,
- Divider,
- AppBar,
- Toolbar,
- IconButton,
- Typography,
- Slide,
-} from '@mui/material';
-
-import { TransitionProps } from '@mui/material/transitions';
-
-import { Close } from '@mui/icons-material';
-
-const Transition = React.forwardRef(
- (
- props: TransitionProps & {
- children: React.ReactElement;
- },
- ref: React.Ref
- // eslint-disable-next-line react/jsx-props-no-spreading
- ) =>
- // eslint-disable-next-line react/jsx-props-no-spreading
- ) => >;
-}) => {
- const handleClose = () => {
- setOpen(false);
- };
- return (
-
- );
-};
-
-export default SettingsDialog;
diff --git a/src/pages/MindMap/overlays/SideMenu/SideMenu.tsx b/src/pages/MindMap/overlays/SideMenu/SideMenu.tsx
deleted file mode 100644
index 53b3087..0000000
--- a/src/pages/MindMap/overlays/SideMenu/SideMenu.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import * as React from 'react';
-import { Box, Drawer, List, Divider, Fab } from '@mui/material';
-
-import {
- Menu,
- Lightbulb,
- Map,
- Home,
- BrowseGallery,
- DeleteSweep,
- Info,
- QueryStats,
- AccountCircle,
- Settings,
-} from '@mui/icons-material';
-
-import { useFunctions } from 'reactfire';
-import { httpsCallable } from 'firebase/functions';
-
-// Navigation
-import { useNavigate } from 'react-router-dom';
-
-// Import component dependencies
-import DrawerListItem from './DrawerListItem';
-
-// Import css file
-import SettingsDialog from './SettingsDialog';
-
-// SideMenu component accepts 2 props
-// 1. active: boolean
-// 2. setActive: function that takes a boolean and returns void
-const SideMenu = ({
- active,
- setActive,
-}: {
- active: boolean;
- setActive: React.Dispatch>;
-}) => {
- const functions = useFunctions();
- const navigate = useNavigate();
-
- /* Drawer SubFunctions */
- // Test AI
- const testAI = () => {
- httpsCallable(
- functions,
- 'ai'
- )({ data: 'trees' }).then((result) => {
- // eslint-disable-next-line no-console
- console.log(result);
- });
- };
-
- /* End Drawer SubFunctions */
-
- const toggleDrawer =
- (isOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
- if (
- event.type === 'keydown' &&
- ((event as React.KeyboardEvent).key === 'Tab' ||
- (event as React.KeyboardEvent).key === 'Shift')
- ) {
- return;
- }
-
- setActive(isOpen);
- };
-
- // Pref Dialog Functions
- // NOTE: the open and setOpen functions all refer to the preferences dialog, and NOT THE DRAWER!!!
- const [open, setOpen] = React.useState(false);
- const handleClickOpen = () => {
- setOpen(true);
- };
-
- // const handleClose = () => {
- // setOpen(false);
- // };
-
- // eslint-disable-next-line react/no-unstable-nested-components
- const SideMenuItems = () => (
-
-
- );
-
- return (
-
- Mind Map
+ Bubble Map
{
An intuitive mind mapping tool for rapid collaborative AI-assisted
idea generation
- {!signinCheck.user ? (
+ {!signInCheck.user ? (
+ Sorry, I couldn't find that mindmap.
;
@@ -140,23 +142,8 @@ const MindMap = () => {
// eslint-disable-next-line no-console
console.log('Toggle Settings');
},
- RESET_VIEW: () => {
- // eslint-disable-next-line no-console
- console.log('Reset View');
- },
};
- // Create a sidebar active state
- const [sideMenuActive, setSideMenuActive] = useState(false);
-
- configure({
- ignoreEventsCondition: () => {
- // Ignore keypresses while side menu is open
- if (sideMenuActive) return true;
- return false;
- },
- });
-
// Get the mindmap node with id 0, which is the root node
const rootNode = mindmap.nodes.find((o) => o.id === 0);
@@ -179,14 +166,24 @@ const MindMap = () => {
selectedNode={selectedNode}
setSelectedNode={setSelectedNode}
/>
-
-
-);
-
-export default BottomRightButtons;
diff --git a/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx b/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx
index 799ef9e..4e87f24 100644
--- a/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx
+++ b/src/pages/MindMap/overlays/GenIdeaPanel/index.tsx
@@ -1,25 +1,26 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
import { styled, useTheme } from '@mui/material/styles';
-import Drawer from '@mui/material/Drawer';
-import CssBaseline from '@mui/material/CssBaseline';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
+import {
+ Drawer,
+ List,
+ Divider,
+ Fab,
+ ListItemSecondaryAction,
+ IconButton,
+ ListItem,
+ ListItemButton,
+ ListItemText,
+} from '@mui/material';
+import {
+ SettingsSuggest,
+ ChevronLeft,
+ ChevronRight,
+} from '@mui/icons-material';
import { httpsCallable } from 'firebase/functions';
import { useFunctions } from 'reactfire';
import { SimulationNodeDatum } from 'd3-force';
import { GlobalHotKeys } from 'react-hotkeys';
-/* eslint-disable */
-import { Fab, ListItemSecondaryAction } from '@mui/material';
-import { Help, QuestionMark, SettingsSuggest } from '@mui/icons-material';
-/* eslint-enable */
import { MindMap, node } from '../../../../types';
-import BottomRightButtons from '../BottomRightButtons';
const drawerWidthPercent = '20%';
// Calculate the width of the drawer based on the percentage
@@ -54,7 +55,7 @@ const PersistentDrawerRight = ({
// eslint-disable-next-line
const theme = useTheme();
- const [open, setOpen] = React.useState(false);
+ const [open, setOpen] = useState(false);
const handleDrawerOpen = () => {
setOpen(true);
@@ -64,18 +65,18 @@ const PersistentDrawerRight = ({
setOpen(false);
};
- // const [realNode, setRealNode] = React.useState-
-
-
-
-
- );
-}
diff --git a/src/pages/MindMap/overlays/SideMenu/SettingsDialog.tsx b/src/pages/MindMap/overlays/SideMenu/SettingsDialog.tsx
deleted file mode 100644
index 6244f5b..0000000
--- a/src/pages/MindMap/overlays/SideMenu/SettingsDialog.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import ListItemText from '@mui/material/ListItemText';
-import ListItem from '@mui/material/ListItem';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import Slide from '@mui/material/Slide';
-import { TransitionProps } from '@mui/material/transitions';
-
-const Transition = React.forwardRef(
- (
- props: TransitionProps & {
- children: React.ReactElement;
- },
- ref: React.Ref-
-
-
-
-
- {/* Move Help to Main Screen, in it's own separate button */}
- {/*
-
- {/* spacer element */}
-
-
-
-
-
-
- );
-};
-
-export default SideMenu;
diff --git a/src/pages/MindMap/overlays/TestFunctionButton/TestFunctionButton.tsx b/src/pages/MindMap/overlays/TestFunctionButton/TestFunctionButton.tsx
deleted file mode 100644
index cefadbc..0000000
--- a/src/pages/MindMap/overlays/TestFunctionButton/TestFunctionButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Button } from '@mui/material';
-
-// Create a component that takes a function, parameters for the function, and an icon as a parameter and creates a test button for the function
-// The button should be a material ui button with the icon as the icon and the function as the onClick
-
-const TestFunctionButton = ({
- onClick,
- icon,
-}: {
- onClick: () => void;
- // icon is a JSX element
- icon: JSX.Element;
-}) => ;
-
-export default TestFunctionButton;
-
-// const TestFunctionButton = (props: {
-// function: () => void;
-// icon: JSX.Element;
-// }) => {
-// ;
-// };