Refactor relationship types to single class and add more

Took 38 minutes

frontend/src/api/relationships.ts

@@ -1,4 +1,6 @@
 import axios from 'axios';
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+import { Relationship } from '../interfaces/IRelationship';
 
 const protocol = window.location.protocol;
 const hostname = window.location.hostname;
@@ -6,27 +8,15 @@ const port = window.location.port;
 
 const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
 
-// Types
-export interface Relationship {
-  _id: string;
-  source: string;
-  target: string;
-  type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
-  customType?: string;
-  network: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
 export interface CreateRelationshipData {
   source: string;
   target: string;
-  type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+  type: RELATIONSHIP_TYPES;
   customType?: string;
 }
 
 export interface UpdateRelationshipData {
-  type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+  type?: RELATIONSHIP_TYPES;
   customType?: string;
 }
 

frontend/src/components/CanvasGraph.tsx

@@ -35,9 +35,9 @@ interface CanvasGraphProps {
 }
 
 // Physics constants
-const NODE_RADIUS = 30; // Node radius in pixels
-const MIN_DISTANCE = 100; // Minimum distance between any two nodes
-const MAX_DISTANCE = 300; // Maximum distance between connected nodes
+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 ATTRACTION_STRENGTH = 0.1; // Default attraction between connected nodes
 const CONSTRAINT_STRENGTH = 0.2; // Strength of distance constraints
@@ -573,9 +573,9 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
       ctx.stroke();
 
       // Draw initials
-      const initials = `${node.firstName.charAt(0)}${node.lastName.charAt(0)}`;
+      const initials = `${node.firstName} ${node.lastName.charAt(0)}.`;
       ctx.fillStyle = 'white';
-      ctx.font = 'bold 16px sans-serif';
+      ctx.font = 'bold 13px sans-serif';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText(initials, pos.x, pos.y);

frontend/src/components/FriendshipNetwork.tsx

@@ -32,51 +32,24 @@ import {
 
 // Import custom UI components
 import {
-  Button, Card, CardBody, ConfirmDialog, EmptyState, FormField, Modal, NetworkStats, Toast, ToastItem, Tooltip,
+  Button,
+  Card,
+  CardBody,
+  ConfirmDialog,
+  EmptyState,
+  FormField,
+  Modal,
+  NetworkStats,
+  Toast,
+  ToastItem,
+  Tooltip,
 } from './FriendshipNetworkComponents';
 
 // Import visible canvas graph component
 import CanvasGraph from './CanvasGraph';
+import { getRelationshipColor, RELATIONSHIP_TYPES, RELATIONSHIPS } from '../types/RelationShipTypes';
+import { FormErrors, PersonNode } from '../interfaces/IPersonNode';
 
-// Define types
-type RelationshipType = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
-
-interface PersonNode {
-  _id: string;
-  firstName: string;
-  lastName: string;
-  birthday?: Date | string | null;
-  notes?: string;
-  position?: {
-    x: number; y: number;
-  };
-}
-
-interface RelationshipEdge {
-  _id: string;
-  source: string;
-  target: string;
-  type: RelationshipType;
-  customType?: string;
-  notes?: string;
-}
-// Type for form errors
-interface FormErrors {
-  [key: string]: string;
-}
-
-// Graph appearance constants
-const RELATIONSHIP_COLORS = {
-  freund: '#60A5FA', // Light blue
-  partner: '#F472B6', // Pink
-  familie: '#34D399', // Green
-  arbeitskolleg: '#FBBF24', // Yellow
-  custom: '#9CA3AF', // Gray
-};
-
-const RELATIONSHIP_LABELS = {
-  freund: 'Friend', partner: 'Partner', familie: 'Family', arbeitskolleg: 'Colleague', custom: 'Custom',
-};
 
 // Main FriendshipNetwork component
 const FriendshipNetwork: React.FC = () => {
@@ -139,7 +112,7 @@ const FriendshipNetwork: React.FC = () => {
   const [editPerson, setEditPerson] = useState<PersonNode | null>(null);
 
   const [newRelationship, setNewRelationship] = useState({
-    source: '', target: '', type: 'freund' as RelationshipType, customType: '', notes: '', bidirectional: true,
+    source: '', target: '', type: 'friend' as RELATIONSHIP_TYPES, customType: '', notes: '', bidirectional: true,
   });
 
   // Filter states
@@ -402,7 +375,7 @@ const FriendshipNetwork: React.FC = () => {
 
     // Create edges
     const graphEdges = relationships.map(rel => {
-      const color = RELATIONSHIP_COLORS[rel.type] || RELATIONSHIP_COLORS.custom;
+      const color = RELATIONSHIPS[rel.type as RELATIONSHIP_TYPES]?.color || RELATIONSHIPS.custom.color;
       const width = rel.type === 'partner' ? 4 : rel.type === 'familie' ? 3 : 2;
 
       // Highlight edges connected to selected node
@@ -542,7 +515,7 @@ const FriendshipNetwork: React.FC = () => {
 
     // Reset form and close modal
     setNewRelationship({
-      source: '', target: '', type: 'freund', customType: '', notes: '', bidirectional: true,
+      source: '', target: '', type: 'friend', customType: '', notes: '', bidirectional: true,
     });
 
     setRelationshipModalOpen(false);
@@ -778,14 +751,14 @@ const FriendshipNetwork: React.FC = () => {
                   <CardBody>
                     <h3 className="font-medium mb-2 text-indigo-400">Legend</h3>
                     <div className="space-y-2">
-                      {Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (
+                      {Object.entries(RELATIONSHIPS).map(([type, { label, color }]) => (
                         <div key={type} className="flex items-center text-sm">
                           <div
                             className="w-4 h-4 rounded-full mr-2"
                             style={{ backgroundColor: color }}
                           ></div>
                           <span className="capitalize">
-                            {RELATIONSHIP_LABELS[type as RelationshipType]}
+                            {RELATIONSHIPS[type]?.label}
                           </span>
                         </div>))}
                     </div>
@@ -919,17 +892,17 @@ const FriendshipNetwork: React.FC = () => {
                   >
                     All Types
                   </button>
-                  {Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (<button
+                  {Object.entries(RELATIONSHIPS).map(([type, { label, color }]) => (<button
                       key={type}
                       className={`px-3 py-1 text-xs rounded-full whitespace-nowrap flex items-center ${relationshipTypeFilter === type ? 'bg-indigo-600 text-white' : 'bg-slate-700 text-slate-300 hover:bg-slate-600'}`}
-                      onClick={() => setRelationshipTypeFilter(type as RelationshipType)}
+                      onClick={() => setRelationshipTypeFilter(type as RELATIONSHIP_TYPES)}
                     >
                       <span
                         className="w-2 h-2 rounded-full mr-1"
                         style={{ backgroundColor: color }}
                       ></span>
                       <span className="capitalize">
-                        {RELATIONSHIP_LABELS[type as RelationshipType]}
+                        {RELATIONSHIPS[type as RELATIONSHIP_TYPES]?.label}
                       </span>
                     </button>))}
                 </div>
@@ -974,10 +947,10 @@ const FriendshipNetwork: React.FC = () => {
                               <div className="flex items-center text-xs text-slate-400 mt-1">
                                 <span
                                   className="inline-block w-2 h-2 rounded-full mr-1"
-                                  style={{ backgroundColor: RELATIONSHIP_COLORS[rel.type] }}
+                                  style={{ backgroundColor: RELATIONSHIPS[rel.type as RELATIONSHIP_TYPES]?.color }}
                                 ></span>
                                 <span className="capitalize">
-                                  {rel.type === 'custom' ? rel.customType : RELATIONSHIP_LABELS[rel.type]}
+                                 {rel.type === 'custom' ? rel.customType : RELATIONSHIPS[rel.type as RELATIONSHIP_TYPES]?.label}
                                 </span>
                               </div>
                             </div>
@@ -1150,6 +1123,7 @@ const FriendshipNetwork: React.FC = () => {
               className={`w-full bg-slate-700 border ${personFormErrors.firstName ? 'border-red-500' : 'border-slate-600'} 
               rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
               placeholder="Enter first name"
+              autoFocus={true}
               value={newPerson.firstName}
               onChange={e => setNewPerson({ ...newPerson, firstName: e.target.value })}
             />
@@ -1236,6 +1210,7 @@ const FriendshipNetwork: React.FC = () => {
           >
             <select
               id="source"
+              autoFocus={true}
               className={`w-full bg-slate-700 border ${relationshipFormErrors.source ? 'border-red-500' : 'border-slate-600'} 
               rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
               value={newRelationship.source}
@@ -1275,10 +1250,10 @@ const FriendshipNetwork: React.FC = () => {
               focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
               value={newRelationship.type}
               onChange={e => setNewRelationship({
-                ...newRelationship, type: e.target.value as RelationshipType,
+                ...newRelationship, type: e.target.value as RELATIONSHIP_TYPES,
               })}
             >
-              {Object.entries(RELATIONSHIP_LABELS).map(([value, label]) => (<option key={value} value={value}>
+              {Object.entries(RELATIONSHIPS).map(([value, { label }]) => (<option key={value} value={value}>
                   {label}
                 </option>))}
             </select>
@@ -1474,7 +1449,7 @@ const FriendshipNetwork: React.FC = () => {
                           <div className="flex items-center">
                             <span
                               className="inline-block w-2 h-2 rounded-full mr-2"
-                              style={{ backgroundColor: RELATIONSHIP_COLORS[rel.type] }}
+                              style={{ backgroundColor: RELATIONSHIPS[rel.type as RELATIONSHIP_TYPES]?.color }}
                             ></span>
                             <span className="text-sm">
                               {isSource ? 'To: ' : 'From: '}
@@ -1491,7 +1466,9 @@ const FriendshipNetwork: React.FC = () => {
                               >
                                 {otherPerson.firstName} {otherPerson.lastName}
                               </span>
-                              {rel.type === 'custom' ? ` (${rel.customType})` : ` (${RELATIONSHIP_LABELS[rel.type]})`}
+                              {rel.type === 'custom'
+                                ? ` (${rel.customType})`
+                                : ` (${RELATIONSHIPS[rel.type as RELATIONSHIP_TYPES]?.label})`}
                             </span>
                           </div>
                           <button

frontend/src/hooks/useFriendshipNetwork.ts

@@ -3,10 +3,11 @@ import { addPerson, getPeople, Person, removePerson, updatePerson } from '../api
 import {
   addRelationship,
   getRelationships,
-  Relationship,
   removeRelationship,
   updateRelationship,
 } from '../api/relationships';
+import { Relationship } from '../interfaces/IRelationship';
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
 
 interface PersonNode extends Person {
   // Additional properties needed for the visualization
@@ -314,7 +315,7 @@ export const useFriendshipNetwork = (
   const createRelationship = async (relationshipData: {
     source: string;
     target: string;
-    type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+    type: RELATIONSHIP_TYPES;
     customType?: string;
   }): Promise<RelationshipEdge> => {
     if (!networkId) throw new Error('No network selected');
@@ -342,7 +343,7 @@ export const useFriendshipNetwork = (
   const updateRelationshipData = async (
     relationshipId: string,
     relationshipData: {
-      type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+      type?: RELATIONSHIP_TYPES;
       customType?: string;
     },
   ): Promise<RelationshipEdge> => {

frontend/src/interfaces/IPersonNode.tsx

@@ -0,0 +1,15 @@
+export interface PersonNode {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  birthday?: Date | string | null;
+  notes?: string;
+  position?: {
+    x: number; y: number;
+  };
+}
+
+// Type for form errors
+export interface FormErrors {
+  [key: string]: string;
+}

frontend/src/interfaces/IRelationship.ts

@@ -0,0 +1,13 @@
+// Types
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+
+export interface Relationship {
+  _id: string;
+  source: string;
+  target: string;
+  type: RELATIONSHIP_TYPES;
+  customType?: string;
+  network: string;
+  createdAt: string;
+  updatedAt: string;
+}

frontend/src/types/RelationShipTypes.ts

@@ -0,0 +1,15 @@
+export type RELATIONSHIP_TYPES = 'acquaintance' | 'friend' | 'partner' | 'family' | 'secondDegree' | 'colleague' | 'teacher' | 'exPartner' | 'custom';
+
+export const RELATIONSHIPS: Record<RELATIONSHIP_TYPES, { label: string; color: string }> = {
+  acquaintance: { label: 'Bekannter', color: '#60A5FA' }, // Light blue
+  friend: { label: 'Freund', color: '#60A5FA' }, // Light blue
+  partner: { label: 'Partner', color: '#F472B6' }, // Pink
+  family: { label: 'Familie', color: '#34D399' }, // Green
+  secondDegree: { label: 'Verwandter', color: '#34D399' }, // Green
+  colleague: { label: 'Kollege/Klassenkamerad', color: '#FBBF24' }, // Yellow
+  teacher: { label: 'Lehrer', color: '#FBBF24' }, // Yellow
+  exPartner: { label: 'Ex-Partner', color: '#ce8c13' }, // Orange
+  custom: { label: 'Benutzerdefiniert', color: '#9CA3AF' }, // Gray
+};
+export const getRelationshipLabel = (type: RELATIONSHIP_TYPES): string => RELATIONSHIPS[type].label;
+export const getRelationshipColor = (type: RELATIONSHIP_TYPES): string => RELATIONSHIPS[type].color;

src/controllers/auth.controller.ts

@@ -217,12 +217,12 @@ const createSampleDemoNetwork = async (userId: mongoose.Types.ObjectId | string)
 
     // Create relationships between people
     const relationships = [
-      { source: 'JohnSmith', target: 'EmmaJohnson', type: 'freund' },
-      { source: 'EmmaJohnson', target: 'MichaelWilliams', type: 'familie' },
-      { source: 'MichaelWilliams', target: 'SarahBrown', type: 'arbeitskolleg' },
-      { source: 'SarahBrown', target: 'DavidJones', type: 'freund' },
+      { source: 'JohnSmith', target: 'EmmaJohnson', type: 'friend' },
+      { source: 'EmmaJohnson', target: 'MichaelWilliams', type: 'family' },
+      { source: 'MichaelWilliams', target: 'SarahBrown', type: 'colleague' },
+      { source: 'SarahBrown', target: 'DavidJones', type: 'friend' },
       { source: 'DavidJones', target: 'LisaGarcia', type: 'partner' },
-      { source: 'JohnSmith', target: 'DavidJones', type: 'arbeitskolleg' },
+      { source: 'JohnSmith', target: 'DavidJones', type: 'colleague' },
     ];
 
     // Create each relationship

src/models/relationship.model.ts

@@ -1,5 +1,10 @@
 import mongoose, { Document, Schema } from 'mongoose';
 
+
+export const RELATIONSHIP_TYPES = [
+  'acquaintance', 'friend', 'partner', 'family', 'secondDegree', 'colleague', 'teacher', 'exPartner', 'custom',
+];
+
 export interface IRelationship extends Document {
   _id: string;
   source: mongoose.Types.ObjectId;
@@ -24,7 +29,7 @@ const RelationshipSchema = new Schema(
     type: {
       type: String,
       required: [true, 'Relationship type is required'],
-      enum: ['freund', 'partner', 'familie', 'arbeitskolleg', 'custom'],
+      enum: RELATIONSHIP_TYPES,
     },
     customType: {
       type: String,
@@ -36,7 +41,7 @@ const RelationshipSchema = new Schema(
       required: true,
     },
   },
-  { timestamps: true }
+  { timestamps: true },
 );
 
 // Create compound index to ensure unique relationships in a network

src/routes/relationship.routes.ts

@@ -3,6 +3,8 @@ import { check } from 'express-validator';
 import * as relationshipController from '../controllers/relationship.controller';
 import { auth } from '../middleware/auth.middleware';
 import { checkNetworkAccess } from '../middleware/network-access.middleware';
+import { RELATIONSHIP_TYPES } from '../models/relationship.model';
+
 
 const router = express.Router();
 
@@ -22,13 +24,7 @@ router.post(
   [
     check('source', 'Source person ID is required').not().isEmpty().isMongoId(),
     check('target', 'Target person ID is required').not().isEmpty().isMongoId(),
-    check('type', 'Relationship type is required').isIn([
-      'freund',
-      'partner',
-      'familie',
-      'arbeitskolleg',
-      'custom',
-    ]),
+    check('type', 'Relationship type is required').isIn(RELATIONSHIP_TYPES),
     check('customType', 'Custom type is required when type is custom')
       .if(check('type').equals('custom'))
       .not()
@@ -45,7 +41,7 @@ router.put(
   [
     check('type', 'Relationship type must be valid if provided')
       .optional()
-      .isIn(['freund', 'partner', 'familie', 'arbeitskolleg', 'custom']),
+      .isIn(RELATIONSHIP_TYPES),
     check('customType', 'Custom type is required when type is custom')
       .if(check('type').equals('custom'))
       .not()