From b89f6b19a432c060a0c4ec9a973dfc90236e842b Mon Sep 17 00:00:00 2001
From: Tobias Hopp <tobi@gaminggeneration.de>
Date: Thu, 17 Apr 2025 14:49:32 +0200
Subject: [PATCH] Increase node size and distance and fix error

Took 8 minutes

Took 10 minutes
---
 frontend/src/components/CanvasGraph.tsx |  10 +--
 frontend/src/components/Modals.tsx      | 100 ++++++++++--------------
 2 files changed, 45 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/CanvasGraph.tsx b/frontend/src/components/CanvasGraph.tsx
index 0e262a8..7d5219d 100644
--- a/frontend/src/components/CanvasGraph.tsx
+++ b/frontend/src/components/CanvasGraph.tsx
@@ -35,15 +35,15 @@ interface CanvasGraphProps {
 }
 
 // Physics constants
-const NODE_RADIUS = 45; // Node radius in pixels
-const MIN_DISTANCE = 110; // Minimum distance between any two nodes
-const MAX_DISTANCE = 500; // Maximum distance between connected nodes
-const REPULSION_STRENGTH = 500; // How strongly nodes repel each other when too close
+const NODE_RADIUS = 50; // Node radius in pixels
+const MIN_DISTANCE = 250; // Minimum distance between any two nodes
+const MAX_DISTANCE = 800; // Maximum distance between connected nodes
+const REPULSION_STRENGTH = 400; // How strongly nodes repel each other when too close
 const ATTRACTION_STRENGTH = 0.1; // Default attraction between connected nodes
 const CONSTRAINT_STRENGTH = 0.2; // Strength of distance constraints
 const DAMPING = 0.6; // Damping factor for velocity (0-1)
 const CENTER_GRAVITY = 0.01; // Force pulling nodes to the center
-const MAX_VELOCITY = 5; // Maximum velocity to prevent wild movement
+const MAX_VELOCITY = 4; // Maximum velocity to prevent wild movement
 const COOLING_FACTOR = 0.99; // System gradually cools down
 
 const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height }) => {
diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx
index f8c8bfd..755ebc9 100644
--- a/frontend/src/components/Modals.tsx
+++ b/frontend/src/components/Modals.tsx
@@ -1,24 +1,10 @@
 import React from 'react';
 import DatePicker from 'react-datepicker';
-import {
-  FaPlus,
-  FaRegCalendarAlt,
-  FaSave,
-  FaStar,
-  FaTrash,
-  FaUserFriends,
-  FaUserPlus,
-} from 'react-icons/fa';
+import { FaPlus, FaRegCalendarAlt, FaSave, FaStar, FaTrash, FaUserFriends, FaUserPlus } from 'react-icons/fa';
 
 import { Button, FormField, Modal } from '../components/FriendshipNetworkComponents';
 
-import {
-  PersonNode,
-  RelationshipEdge,
-  FormErrors,
-  NewPersonForm,
-  NewRelationshipForm,
-} from '../types/network';
+import { FormErrors, NewPersonForm, NewRelationshipForm, PersonNode, RelationshipEdge } from '../types/network';
 
 import {
   getRelationshipColor,
@@ -26,13 +12,7 @@ import {
   RELATIONSHIP_TYPES,
   RELATIONSHIPS,
 } from '../types/RelationShipTypes';
-import {
-  ErrorMessage,
-  KeyboardShortcut,
-  OptionGroup,
-  TipItem,
-  ToggleSetting,
-} from './UIComponents';
+import { ErrorMessage, KeyboardShortcut, OptionGroup, TipItem, ToggleSetting } from './UIComponents';
 
 // ==============================
 // Person Form Modal
@@ -48,14 +28,14 @@ interface PersonFormModalProps {
 }
 
 export const PersonFormModal: React.FC<PersonFormModalProps> = ({
-  isOpen,
-  onClose,
-  formData,
-  setFormData,
-  errors,
-  onSubmit,
-  isEdit = false,
-}) => {
+                                                                  isOpen,
+                                                                  onClose,
+                                                                  formData,
+                                                                  setFormData,
+                                                                  errors,
+                                                                  onSubmit,
+                                                                  isEdit = false,
+                                                                }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={isEdit ? 'Edit Person' : 'Add New Person'}>
       <form onSubmit={onSubmit} className="space-y-4">
@@ -91,7 +71,7 @@ export const PersonFormModal: React.FC<PersonFormModalProps> = ({
               id="birthday"
               selected={formData.birthday}
               onChange={(date: Date | null) => setFormData({ ...formData, birthday: date })}
-              dateFormat="dd.MM.YYYY"
+              dateFormat="dd.MM.yyyy"
               placeholderText="Select birthday"
               className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
               focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
@@ -141,14 +121,14 @@ interface RelationshipFormModalProps {
 }
 
 export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({
-  isOpen,
-  onClose,
-  formData,
-  setFormData,
-  errors,
-  onSubmit,
-  people,
-}) => {
+                                                                              isOpen,
+                                                                              onClose,
+                                                                              formData,
+                                                                              setFormData,
+                                                                              errors,
+                                                                              onSubmit,
+                                                                              people,
+                                                                            }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Add New Relationship">
       <form onSubmit={onSubmit} className="space-y-4">
@@ -289,19 +269,19 @@ interface PersonDetailModalProps {
 }
 
 export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
-  isOpen,
-  onClose,
-  person,
-  setPerson,
-  errors,
-  onSubmit,
-  onDelete,
-  relationships,
-  people,
-  onDeleteRelationship,
-  onAddNewConnection,
-  onNavigateToPerson,
-}) => {
+                                                                      isOpen,
+                                                                      onClose,
+                                                                      person,
+                                                                      setPerson,
+                                                                      errors,
+                                                                      onSubmit,
+                                                                      onDelete,
+                                                                      relationships,
+                                                                      people,
+                                                                      onDeleteRelationship,
+                                                                      onAddNewConnection,
+                                                                      onNavigateToPerson,
+                                                                    }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={`${person.firstName} ${person.lastName}`}>
       <div className="space-y-6">
@@ -337,7 +317,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
                   id="editBirthday"
                   selected={person.birthday ? new Date(person.birthday) : null}
                   onChange={(date: Date | null) => setPerson({ ...person, birthday: date })}
-                  dateFormat="dd.MM.YYYY"
+                  dateFormat="dd.MM.yyyy"
                   placeholderText="Select birthday"
                   className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
                   focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
@@ -380,7 +360,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
           <h4 className="font-medium text-indigo-400 mb-2">Connections</h4>
           <div className="max-h-40 overflow-y-auto space-y-1 bg-slate-900 rounded-lg p-2">
             {relationships.filter(
-              (r: RelationshipEdge) => r.source === person._id || r.target === person._id
+              (r: RelationshipEdge) => r.source === person._id || r.target === person._id,
             ).length > 0 ? (
               relationships
                 .filter((r: RelationshipEdge) => r.source === person._id || r.target === person._id)
@@ -465,11 +445,11 @@ interface SettingsModalProps {
 }
 
 export const SettingsModal: React.FC<SettingsModalProps> = ({
-  isOpen,
-  onClose,
-  settings,
-  setSettings,
-}) => {
+                                                              isOpen,
+                                                              onClose,
+                                                              settings,
+                                                              setSettings,
+                                                            }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Network Settings">
       <div className="space-y-4">