Skip to content

Commit f69ea9b

Browse files
TagiMagiTagiMagi
committed
commiting before attempting risky behavior
1 parent 7447dfa commit f69ea9b

File tree

11 files changed

+151
-92
lines changed

11 files changed

+151
-92
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎src/.DS_Store

0 Bytes
Binary file not shown.

‎src/assets/contributors/Matthew_Jones.jpeg

8.17 KB
Loading

‎src/components/DBDisplay/FeatureTab.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ import {
6161
import QueryModal from '../Modals/QueryModal';
6262
import DbNameInput from '../Modals/DbNameInput';
6363
import LoadDbModal from '../Modals/LoadDbModal';
64-
import DeleteDbModal from '../Modals/DeleteDBModal';
64+
import DeleteDbModal from '../Modals/DeleteDbModal';
6565

6666
/** "FeatureTab" Component - a tab positioned in the left of the page to access features of the app; */
6767
export default function FeatureTab(props: any) {
@@ -181,7 +181,7 @@ export default function FeatureTab(props: any) {
181181
};
182182

183183
// LoadDbModal
184-
// Open loadDbName Modal and send get request to database to get&list all the databases name.
184+
// Open loadDbName Modal and send get request to database to get&list all the databases name. - dbSpy 7.0
185185
const openLoadDbModal = async (): Promise<string[]> => {
186186
buildDatabase();
187187
if (!user) {
@@ -280,7 +280,7 @@ export default function FeatureTab(props: any) {
280280
}
281281
};
282282

283-
// Reworked for multiple loads - db 7.0
283+
// Reworked for multiple loads - dbSpy 7.0
284284
const loadSchema = async (inputName: string) => {
285285
try {
286286
//send the inputName along with the get request as query in the parameters.
@@ -327,7 +327,7 @@ export default function FeatureTab(props: any) {
327327
setDarkMode();
328328
};
329329

330-
//Create logo image hover over animation - db 7.0
330+
//Create logo button hover over animation - dbSpy 7.0
331331
let ImgSwap;
332332
function logoImageFlow(event) {
333333
//let currentLogoImg = event.target.src;
@@ -374,9 +374,9 @@ export default function FeatureTab(props: any) {
374374
}
375375
event.target.src = logoImgArr[currIndex];
376376
currIndex++;
377-
}, 130); // Adjust the timeout value (in milliseconds) as needed
377+
}, 130); // Adjust the timeout value between image swaps as needed
378378
}
379-
// function to clean up after the hover over affect - db 7.0
379+
// function to clean up after the hover over affect. Must clear the interval set by setInterval() - dbSpy 7.0
380380
function clearImgSwap(event) {
381381
if (darkMode === true) {
382382
event.target.src = logo;
@@ -386,7 +386,7 @@ export default function FeatureTab(props: any) {
386386
clearInterval(ImgSwap);
387387
}
388388

389-
//on click function for revealing/hiding the nav bar db - 7.0
389+
//on click function for revealing/hiding the nav bar - dbSpy 7.0
390390
let logoClicked = false;
391391
function revealHideNav(event) {
392392
// Get the siblings
@@ -434,9 +434,9 @@ export default function FeatureTab(props: any) {
434434
className=" pointer-events-auto mb-1 mt-14 inline-block h-[88px] w-[200px] fill-current pr-3 filter hover:cursor-pointer"
435435
src={logo}
436436
alt="Logo"
437-
onMouseOver={logoImageFlow} //db 7.0
438-
onMouseOut={clearImgSwap} //db 7.0
439-
onClick={revealHideNav} //db 7.0
437+
onMouseOver={logoImageFlow} // dbSpy 7.0
438+
onMouseOut={clearImgSwap} // dbSpy 7.0
439+
onClick={revealHideNav} // dbSpy 7.0
440440
/>
441441
) : (
442442
<img

‎src/components/Modals/DeleteDbModal.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,22 @@ export default function DeleteDbModal({
77
nameArr: string[];
88
closeDeleteDbModal: (input?: string) => void;
99
}) {
10-
1110
function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
1211
event.preventDefault();
1312
const form = event.target as HTMLFormElement;
1413
const selectedItems = form.elements.namedItem('selectedItems') as HTMLSelectElement;
1514
const selectedOptionsValues = selectedItems.value; // Directly access the value of the selected option
16-
closeDeleteDbModal(selectedOptionsValues); // Close the modal after submission
15+
if (confirmDeletion()) {
16+
closeDeleteDbModal(selectedOptionsValues); // Close the modal after submission
17+
}
18+
}
19+
function confirmDeletion(): boolean {
20+
// Display the confirmation dialog
21+
return window.confirm(
22+
'Are you sure you want to delete this database? This action cannot be undone.'
23+
);
1724
}
18-
25+
1926
// handleclose from FeatureTab to toggle this modal off
2027
return (
2128
<div className="modal" id="loadDbModal" style={{ display: 'block', zIndex: '100' }}>
@@ -41,7 +48,7 @@ export default function DeleteDbModal({
4148
<button
4249
id="confirm"
4350
type="submit"
44-
className="bg-red-500 text-white rounded-md px-2 py-1 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
51+
className="rounded-md bg-red-500 px-2 py-1 text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
4552
>
4653
Delete
4754
</button>

‎src/components/Modals/DeleteTableModal.tsx

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ type DeleteTableModalProps = {
1212
export default function DeleteTableModal({
1313
closeDeleteTableModal,
1414
}: DeleteTableModalProps) {
15-
const [tableName, setTableName] = useState('');
15+
const [tableName, setTableName] = useState<string>('');
1616
const [tableNames, setTableNames] = useState<string[]>([]);
1717
const [connectPressed, setConnectPressed] = useState(false);
1818

1919
const { dbCredentials } = useCredentialsStore((state) => state);
2020
const { schemaStore, setSchemaStore } = useSchemaStore((state) => state);
2121
const { dataStore, setDataStore } = useDataStore((state) => state);
22-
const { edges, setEdges, nodes, setNodes } = useFlowStore((state) => state);
22+
const { setEdges, setNodes } = useFlowStore((state) => state);
2323

2424
useEffect(() => {
2525
const fetchTableNames = async () => {
@@ -36,48 +36,13 @@ export default function DeleteTableModal({
3636
fetchTableNames();
3737
}, []);
3838

39-
const deleteTable = () => {
39+
//modified to fix bugs by dbspy 7.0
40+
const deleteTable = (): void => {
4041
setConnectPressed(true);
41-
// console.log(
42-
// 'THIS IS THE EDGESSSSSS!!!!!!',
43-
// edges[0].sourceHandle,
44-
// edges[0].source,
45-
// edges[0].target,
46-
// edges[0].targetHandle
47-
// );
48-
console.log('tableName ', tableName);
49-
console.log('SchemaStore', schemaStore);
50-
console.log('nodes', nodes);
51-
//iterate through the tables, find the .isForeignKey attribute and also the
52-
// if (schemaStore[tableName].isForeignKey) {
53-
// let index;
54-
// for (let i = 0; i < edges.length; i++) {
55-
// console.log(edges[i].sourceHandle == tableName);
56-
// if (edges[i].sourceHandle == tableName) {
57-
// index = i;
58-
// }
59-
// }
60-
// edges.slice(index, 1);
61-
// }
62-
// const node = nodes.filter((element) => {
63-
// return element.id === tableName ? true : false;
64-
// });
65-
// if (schemaStore[tableName].isPrimaryKey) {
66-
// }
67-
// console.log('node ', node);
68-
// const obj = {
69-
// `${node[0].id,
70-
// `${node[0]}`.position,
71-
// `${node[0]}`.data
72-
// }
73-
// const connectedEdgesArr = getConnectedEdges([node[0]], edges);
74-
console.log('all edges ', edges);
75-
//console.log('connectedEdges ', connectedEdgesArr);
42+
//if nodes and edges state are not reset here the canvas re-renders with extra edges -- dbSpy 7.0
7643
setNodes([]);
7744
setEdges([]);
78-
delete schemaStore[tableName];
79-
delete dataStore[tableName];
80-
//below code deletes the column of any foreign key that pointed to the deleted table - dbSpy 7.0
45+
//below code deletes the column of any foreign key that references the deleted table - dbSpy 7.0
8146
for (let tableKey in schemaStore) {
8247
for (let rowKey in schemaStore[tableKey]) {
8348
if (
@@ -88,24 +53,63 @@ export default function DeleteTableModal({
8853
}
8954
}
9055
}
91-
// let connectedEdges = [];
92-
// for (let edges of connectedEdgesArr) {
93-
// connectedEdges.push(edges.id);
94-
// // }
95-
96-
// const edgesNew = edges.filter((element) => {
97-
// return connectedEdges.includes(element.id) ? false : true;
98-
// });
99-
// console.log('new edges', edgesNew);
100-
// setEdges(edgesNew);
101-
56+
//delete the table object from the schemaStore object
57+
delete schemaStore[tableName];
58+
delete dataStore[tableName];
59+
//pass in modified schemaStore object which triggers a the rerender function in the flow.tsx component
10260
setSchemaStore(Object.keys(schemaStore).length > 0 ? { ...schemaStore } : {});
10361
setDataStore(Object.keys(dataStore).length > 0 ? { ...dataStore } : {});
10462

10563
setTableName('');
10664
setConnectPressed(false);
10765
closeDeleteTableModal();
10866
};
67+
// await fetch(`/api/sql/${dbCredentials.db_type}/deleteTable`, {
68+
// method: 'DELETE',
69+
// headers: {
70+
// 'Content-Type': 'application/json',
71+
// },
72+
// body: JSON.stringify({ tableName: tableName }),
73+
// })
74+
// .then(() => {
75+
// //iterate through the tables, find the .isForeignKey attribute and also the
76+
// if (schemaStore[tableName].isForeignKey) {
77+
// let index;
78+
// for (let i = 0; i < edges.length; i++) {
79+
// console.log(edges[i].sourceHandle == tableName);
80+
// if (edges[i].sourceHandle == tableName) {
81+
// index = i;
82+
// }
83+
// }
84+
// edges.slice(index, 1);
85+
// }
86+
// if (schemaStore[tableName].isPrimaryKey) {
87+
// }
88+
// delete schemaStore[tableName];
89+
// delete dataStore[tableName];
90+
// })
91+
// .then(() => {
92+
// setEdges(edges);
93+
// setSchemaStore(Object.keys(schemaStore).length > 0 ? { ...schemaStore } : {});
94+
// setDataStore(Object.keys(dataStore).length > 0 ? { ...dataStore } : {});
95+
// })
96+
// .then(() => {
97+
// setTableName('');
98+
// setConnectPressed(false);
99+
// closeDeleteTableModal();
100+
// })
101+
// .catch((error) => {
102+
// console.log(
103+
// 'dataStore.tableName: ',
104+
// dataStore.tableName,
105+
// 'schemaStore.tableName: ',
106+
// schemaStore.tableName
107+
// );
108+
// closeDeleteTableModal();
109+
// setTableName('');
110+
// console.error('Error fetching table names:', error);
111+
// });
112+
// };
109113

110114
return (
111115
<div id="deleteTableModal" className="input-modal">

‎src/components/Modals/LoadDbModal.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ export default function LoadDbModal({
77
nameArr: string[];
88
closeLoadDbModal: (input?: string) => void;
99
}) {
10-
1110
function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
1211
event.preventDefault();
1312
const form = event.target as HTMLFormElement;
1413
const selectedItems = form.elements.namedItem('selectedItems') as HTMLSelectElement;
1514
const selectedOptionsValues = selectedItems.value; // Directly access the value of the selected option
1615
closeLoadDbModal(selectedOptionsValues); // Close the modal after submission
1716
}
18-
17+
1918
// handleclose from FeatureTab to toggle this modal off
2019
return (
2120
<div className="modal" id="loadDbModal" style={{ display: 'block', zIndex: '100' }}>

‎src/components/ReactFlow/DataFlow.tsx

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import DownloadButton from './DownloadButton';
1111
import createDataEdges from './createDataEdges';
1212
import createDataNodes from './createDataNodes';
1313
import DataTableNode from './DataTableNode';
14-
14+
import useSettingsStore from '../../store/settingsStore';
1515
//-----TYPES
1616
const nodeTypes = {
1717
table: DataTableNode,
@@ -24,6 +24,7 @@ export default function DataFlow(): JSX.Element {
2424
useFlowStore((state) => state);
2525
const { dataStore } = useDataStore((state) => state);
2626
const { schemaStore } = useSchemaStore((state) => state);
27+
const { darkMode } = useSettingsStore((state) => state);
2728

2829
// re-render every time dataStore updates
2930
useEffect(() => {
@@ -38,6 +39,49 @@ export default function DataFlow(): JSX.Element {
3839
setNodes(initialNodes);
3940
}
4041

42+
// function for highlighting the edges associated with the current node - db 7.0
43+
const handleNodeClick = (event, node) => {
44+
// Find edges connected to the clicked node and update their selected property using map method
45+
const updatedEdges = edges.map((edge) => {
46+
// below two lines are set up to be able to change the edge color if the darkMode state changes.
47+
// Not currently being utalized.
48+
let hlColor;
49+
darkMode === true ? (hlColor = '#fedd0a') : (hlColor = '#fedd0a');
50+
// The below condition checks to see if the selected node is either the source or the target of the current node in the edges array.
51+
if (edge.source === node.id || edge.target === node.id) {
52+
return {
53+
...edge,
54+
type: 'smoothstep',
55+
style: {
56+
//strokeWidth: 2,
57+
...edge.style,
58+
stroke: hlColor,
59+
},
60+
markerEnd: {
61+
...edge.markerEnd,
62+
color: hlColor,
63+
},
64+
};
65+
}
66+
//if the current edge is not associated with the node then return this styling.
67+
return {
68+
...edge,
69+
type: 'bezier',
70+
style: {
71+
//strokeWidth: 2,
72+
...edge.style,
73+
stroke: '#085c84',
74+
},
75+
markerEnd: {
76+
...edge.markerEnd,
77+
color: '#085c84',
78+
},
79+
};
80+
});
81+
// pass in new edges array with altered stylings into setter function to update the state
82+
setEdges(updatedEdges);
83+
};
84+
4185
// renders React Flow canvas
4286
return (
4387
<div className="flow" style={{ height: '98%', width: '100%' }}>
@@ -47,6 +91,7 @@ export default function DataFlow(): JSX.Element {
4791
onNodesChange={onNodesChange}
4892
onEdgesChange={onEdgesChange}
4993
onConnect={onConnect}
94+
onNodeClick={handleNodeClick} // dbSpy 7.0
5095
nodeTypes={nodeTypes}
5196
fitView
5297
>

‎src/components/ReactFlow/Flow.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@ export default function Flow(): JSX.Element {
3737
console.log('Initial EDGESSSSSS', initialEdges);
3838
console.log('new Nodes======', nodes);
3939
}
40+
4041
// function for highlighting the edges associated with the current node - db 7.0
4142
const handleNodeClick = (event, node) => {
42-
// Find edges connected to the clicked node and update their selected property
43-
//console.log('this is the event', event);
44-
console.log('these are the nodes', nodes);
43+
// Find edges connected to the clicked node and update their selected property using map method
4544
const updatedEdges = edges.map((edge) => {
45+
// below two lines are set up to be able to change the edge color if the darkMode state changes.
46+
// Not currently being utalized.
4647
let hlColor;
4748
darkMode === true ? (hlColor = '#fedd0a') : (hlColor = '#fedd0a');
49+
// The below condition checks to see if the selected node is either the source or the target of the current node in the edges array.
4850
if (edge.source === node.id || edge.target === node.id) {
4951
return {
5052
...edge,
@@ -60,6 +62,7 @@ export default function Flow(): JSX.Element {
6062
},
6163
};
6264
}
65+
//if the current edge is not associated with the node then return this styling.
6366
return {
6467
...edge,
6568
type: 'bezier',
@@ -74,7 +77,7 @@ export default function Flow(): JSX.Element {
7477
},
7578
};
7679
});
77-
80+
// pass in new edges array with altered stylings into setter function to update the state
7881
setEdges(updatedEdges);
7982
};
8083
// renders React Flow canvas
@@ -86,7 +89,7 @@ export default function Flow(): JSX.Element {
8689
edges={edges}
8790
onEdgesChange={onEdgesChange}
8891
onConnect={onConnect}
89-
onNodeClick={handleNodeClick}
92+
onNodeClick={handleNodeClick} // dbSpy 7.0
9093
nodeTypes={nodeTypes}
9194
fitView
9295
>

0 commit comments

Comments
 (0)