Merge pull request #16 from GraphDone/develop

Release v0.2.2-alpha: Edge Labels and Enhanced Graph Interactions

Author: mvalancy

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [main]
   pull_request:
-    branches: [main, development]
+    branches: [main, develop]
 
 # Prevent duplicate runs
 concurrency:
@@ -225,7 +225,7 @@ jobs:
     name: Build for Deployment
     runs-on: ubuntu-latest
     needs: [lint-and-typecheck, security-scan, test-core, test-server, test-web, test-mcp-server]
-    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/development'
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop'
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

docs/graphdone_ui.png

@@ -147,6 +147,9 @@ export const typeDefs = gql`
     INTERVIEW
     PERFORMANCE_REVIEW
     TEAM_BUILDING
+    
+    # Default Type
+    DEFAULT
     VACATION_REQUEST
     
     # Creative & Design
@@ -172,11 +175,13 @@ export const typeDefs = gql`
   }
 
   enum NodeStatus {
+    NOT_STARTED
     PROPOSED
     PLANNED
-    ACTIVE
     IN_PROGRESS
+    IN_REVIEW
     BLOCKED
+    ON_HOLD
     COMPLETED
     CANCELLED
   }
@@ -188,6 +193,7 @@ export const typeDefs = gql`
     RELATES_TO
     IS_PART_OF
     FOLLOWS
+    DEFAULT_EDGE
     PARALLEL_WITH
     DUPLICATES
     CONFLICTS_WITH
@@ -325,7 +331,7 @@ export const typeDefs = gql`
     priorityIndiv: Float! @default(value: 0.0)
     priorityComm: Float! @default(value: 0.0)
     priorityComp: Float! @default(value: 0.0)
-    status: NodeStatus! @default(value: PROPOSED)
+    status: NodeStatus! @default(value: NOT_STARTED)
     dueDate: DateTime
     tags: [String!]
     metadata: String # JSON as string

packages/server/src/schema/neo4j-schema.ts

@@ -9,7 +9,7 @@ import { Admin } from './pages/Admin';
 import { Backend } from './pages/Backend';
 import { LoginForm } from './pages/LoginForm';
 import { Signup } from './pages/Signup';
-import { GraphVisualization } from './components/GraphVisualization';
+import { InteractiveGraphVisualization } from './components/InteractiveGraphVisualization';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { GraphProvider } from './contexts/GraphContext';
 import { NotificationProvider } from './contexts/NotificationContext';
@@ -58,18 +58,22 @@ function AuthenticatedApp() {
   return (
     <NotificationProvider>
       <GraphProvider>
-        <Layout>
-          <Routes>
-            <Route path="/" element={<Workspace />} />
-            <Route path="/graph" element={<div className="h-screen"><GraphVisualization /></div>} />
-            <Route path="/ontology" element={<Ontology />} />
-            <Route path="/agents" element={<Agents />} />
-            <Route path="/analytics" element={<Analytics />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="/admin" element={<Admin />} />
-            <Route path="/backend" element={<Backend />} />
-          </Routes>
-        </Layout>
+        <Routes>
+          <Route path="/graph" element={<div className="h-screen overflow-hidden"><InteractiveGraphVisualization /></div>} />
+          <Route path="/*" element={
+            <Layout>
+              <Routes>
+                <Route path="/" element={<Workspace />} />
+                <Route path="/ontology" element={<Ontology />} />
+                <Route path="/agents" element={<Agents />} />
+                <Route path="/analytics" element={<Analytics />} />
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/admin" element={<Admin />} />
+                <Route path="/backend" element={<Backend />} />
+              </Routes>
+            </Layout>
+          } />
+        </Routes>
       </GraphProvider>
     </NotificationProvider>
   );

packages/web/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { Clock, User, MessageSquare, AlertCircle, Filter, Search, Trash2, Eye, TrendingUp, UserPlus, Target, Flag, Bell, BellOff, ChevronDown, Calendar } from 'lucide-react';
-import { getStatusConfig, WorkItemStatus, getTypeConfig, WorkItemType, getPriorityConfig, STATUS_OPTIONS, PRIORITY_OPTIONS, TYPE_OPTIONS } from '../constants/workItemConstants';
+import { getStatusConfig, WorkItemStatus, getTypeConfig, WorkItemType, getPriorityConfig, STATUS_OPTIONS, PRIORITY_OPTIONS, TYPE_OPTIONS, WORK_ITEM_PRIORITIES, WORK_ITEM_STATUSES, WORK_ITEM_TYPES } from '../constants/workItemConstants';
 
 interface WorkItem {
   id: string;
@@ -389,7 +389,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
               <h2 className="text-2xl font-bold text-white mb-1">Activity Feed</h2>
               <div className="flex items-center space-x-3 text-sm">
                 <div className="flex items-center space-x-2">
-                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  <div className={`w-2 h-2 ${WORK_ITEM_STATUSES.COMPLETED.color.replace('text-', 'bg-')} rounded-full animate-pulse`} />
                   <span className="text-gray-400">{filteredActivities.length} activities</span>
                 </div>
                 <div className="text-gray-500">•</div>
@@ -619,7 +619,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
                   key={activity.id} 
                   className={`bg-gray-800 rounded-lg border transition-all duration-200 cursor-pointer ${
                     isSelected 
-                      ? 'border-green-500 bg-green-500/5 shadow-lg shadow-green-500/10' 
+                      ? `${WORK_ITEM_STATUSES.COMPLETED.borderColor} ${WORK_ITEM_STATUSES.COMPLETED.bgColor} shadow-lg shadow-green-500/10` 
                       : 'border-gray-700 hover:border-gray-600 hover:bg-gray-750'
                   }`}
                   onClick={() => setSelectedActivity(isSelected ? null : activity.id)}
@@ -646,8 +646,8 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
                               ) : null;
                             })()} 
                             <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
-                              activity.category === 'task' ? 'bg-blue-500/10 text-blue-400 border border-blue-400/20' :
-                              activity.category === 'user' ? 'bg-purple-500/10 text-purple-400 border border-purple-400/20' :
+                              activity.category === 'task' ? `${WORK_ITEM_TYPES.TASK.bgColor} ${WORK_ITEM_TYPES.TASK.color} ${WORK_ITEM_TYPES.TASK.borderColor}` :
+                              activity.category === 'user' ? `${WORK_ITEM_TYPES.EPIC.bgColor} ${WORK_ITEM_TYPES.EPIC.color} ${WORK_ITEM_TYPES.EPIC.borderColor}` :
                               'bg-gray-500/10 text-gray-400 border border-gray-400/20'
                             }`}>
                               {activity.category}
@@ -656,7 +656,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
                           <div className="flex items-center space-x-3">
                             <span className="text-xs text-gray-400 font-medium">{getTimeAgo(activity.timestamp)}</span>
                             {isSelected && (
-                              <div className="p-1 rounded-full bg-green-500/10">
+                              <div className={`p-1 rounded-full ${WORK_ITEM_STATUSES.COMPLETED.bgColor}`}>
                                 <Eye className="h-3 w-3 text-green-400" />
                               </div>
                             )}
@@ -688,11 +688,11 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
                               {activity.metadata.oldValue && activity.metadata.newValue && (
                                 <div className="flex items-center space-x-2 text-xs">
                                   <span className="text-gray-400">Changed from:</span>
-                                  <span className="px-2 py-1 bg-red-500/10 text-red-400 rounded">
+                                  <span className={`px-2 py-1 ${WORK_ITEM_STATUSES.BLOCKED.bgColor} ${WORK_ITEM_STATUSES.BLOCKED.color} rounded`}>
                                     {activity.metadata.oldValue}
                                   </span>
                                   <span className="text-gray-400">to:</span>
-                                  <span className="px-2 py-1 bg-green-500/10 text-green-400 rounded">
+                                  <span className={`px-2 py-1 ${WORK_ITEM_STATUSES.COMPLETED.bgColor} ${WORK_ITEM_STATUSES.COMPLETED.color} rounded`}>
                                     {activity.metadata.newValue}
                                   </span>
                                 </div>

packages/web/src/components/ActivityFeed.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { ChevronLeft, ChevronRight, Calendar, Clock, CheckCircle, Filter, Eye, Plus, MoreHorizontal, User, Flag, Target, CalendarDays, ChevronDown, Search } from 'lucide-react';
-import { getStatusConfig, WorkItemStatus, getTypeConfig, WorkItemType, getPriorityConfig, STATUS_OPTIONS, PRIORITY_OPTIONS, TYPE_OPTIONS } from '../constants/workItemConstants';
+import { getStatusConfig, WorkItemStatus, getTypeConfig, WorkItemType, getPriorityConfig, STATUS_OPTIONS, PRIORITY_OPTIONS, TYPE_OPTIONS, WORK_ITEM_PRIORITIES, WORK_ITEM_STATUSES } from '../constants/workItemConstants';
 
 interface WorkItem {
   id: string;
@@ -459,7 +459,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
                       min-h-[120px] p-3 border-2 rounded-lg transition-all duration-200 cursor-pointer
                       ${isCurrentMonthDay ? 'bg-gray-700' : 'bg-gray-800/50'}
                       ${isTodayDay ? 'ring-2 ring-green-500' : ''}
-                      ${isSelected ? 'ring-2 ring-blue-500 bg-blue-500/10' : ''}
+                      ${isSelected ? `ring-2 ring-blue-400 ${WORK_ITEM_PRIORITIES.moderate.bgColor}` : ''}
                       ${taskCount > 0 ? priorityColor : 'border-gray-600'}
                       hover:bg-gray-600 hover:border-gray-500
                     `}
@@ -474,10 +474,10 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
                       {taskCount > 0 && (
                         <div className="flex items-center space-x-1">
                           <div className={`w-2 h-2 rounded-full ${
-                            highestPriority >= 0.8 ? 'bg-red-500' :
-                            highestPriority >= 0.6 ? 'bg-orange-500' :
-                            highestPriority >= 0.4 ? 'bg-yellow-500' :
-                            highestPriority >= 0.2 ? 'bg-blue-500' : 'bg-gray-500'
+                            highestPriority >= 0.8 ? WORK_ITEM_PRIORITIES.critical.color.replace('text-', 'bg-') :
+                            highestPriority >= 0.6 ? WORK_ITEM_PRIORITIES.high.color.replace('text-', 'bg-') :
+                            highestPriority >= 0.4 ? WORK_ITEM_PRIORITIES.moderate.color.replace('text-', 'bg-') :
+                            highestPriority >= 0.2 ? WORK_ITEM_PRIORITIES.low.color.replace('text-', 'bg-') : 'bg-gray-500'
                           }`} title={`Highest priority: ${Math.round(highestPriority * 100)}%`} />
                           <span className="text-xs text-gray-400">{taskCount}</span>
                         </div>
@@ -500,7 +500,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
                             }}
                             className={`text-xs px-2 py-1 rounded-md truncate transition-all cursor-pointer border ${
                               selectedTask === node.id 
-                                ? 'border-green-500 bg-green-500/20' 
+                                ? `${WORK_ITEM_STATUSES.COMPLETED.borderColor} ${WORK_ITEM_STATUSES.COMPLETED.bgColor}` 
                                 : `${statusConfig.bgColor} ${statusConfig.color} border-transparent hover:border-gray-400`
                             }`}
                             title={`${node.title}\nType: ${node.type}\nStatus: ${node.status.replace('_', ' ')}\nPriority: ${Math.round(priority * 100)}%\nDue: ${node.dueDate ? new Date(node.dueDate).toLocaleDateString() : 'No due date'}`}

packages/web/src/components/CalendarView.tsx

@@ -9,7 +9,9 @@ import {
   getTypeConfig,
   getStatusConfig,
   getTypeIconElement,
-  getStatusIconElement
+  getStatusIconElement,
+  getContributorColor,
+  getDueDateColorScheme
 } from '../constants/workItemConstants';
 import { TagDisplay } from './TagDisplay';
 import { AnimatedPriority } from './AnimatedPriority';
@@ -60,15 +62,6 @@ const getNodePriority = (node: WorkItem) => {
   return node.priorityExec || 0;
 };
 
-const getContributorColor = (name: string) => {
-  const colors = [
-    'bg-blue-500', 'bg-green-500', 'bg-purple-500', 'bg-pink-500',
-    'bg-indigo-500', 'bg-yellow-500', 'bg-red-500', 'bg-teal-500',
-    'bg-orange-500', 'bg-cyan-500', 'bg-emerald-500', 'bg-violet-500'
-  ];
-  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  return colors[hash % colors.length];
-};
 
 const getContributorAvatar = (contributor?: string) => {
   if (!contributor) return null;
@@ -176,26 +169,14 @@ const CardView: React.FC<CardViewProps> = ({ filteredNodes, handleEditNode, hand
               <div className="flex flex-col items-start justify-center mr-2">
                 {node.dueDate ? (
                   <div className="space-y-1 text-left">
-                    <div className={`inline-flex items-center px-2 py-1 text-xs font-medium rounded-md shadow-sm ${
-                      new Date(node.dueDate) < new Date() 
-                        ? 'bg-red-100 text-red-800 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' 
-                        : new Date(node.dueDate).getTime() - new Date().getTime() < 7 * 24 * 60 * 60 * 1000 
-                          ? 'bg-amber-100 text-amber-800 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800' 
-                          : 'bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800'
-                    }`}>
+                    <div className={`inline-flex items-center px-2 py-1 text-xs font-medium rounded-md shadow-sm ${getDueDateColorScheme(node.dueDate).bg} ${getDueDateColorScheme(node.dueDate).border} ${getDueDateColorScheme(node.dueDate).text}`}>
                       {new Date(node.dueDate).toLocaleDateString('en-US', { 
                         month: 'short', 
                         day: 'numeric',
                         year: 'numeric'
                       })}
                     </div>
-                    <div className={`text-xs font-medium ${
-                      new Date(node.dueDate) < new Date() 
-                        ? 'text-red-600 dark:text-red-400' 
-                        : new Date(node.dueDate).getTime() - new Date().getTime() < 7 * 24 * 60 * 60 * 1000 
-                          ? 'text-amber-600 dark:text-amber-400' 
-                          : 'text-blue-600 dark:text-blue-400'
-                    }`}>
+                    <div className={`text-xs font-medium ${getDueDateColorScheme(node.dueDate).textSecondary}`}>
                       {(() => {
                         const today = new Date();
                         const due = new Date(node.dueDate);
@@ -218,10 +199,10 @@ const CardView: React.FC<CardViewProps> = ({ filteredNodes, handleEditNode, hand
                   </div>
                 ) : (
                   <div className="space-y-1 text-left">
-                    <div className="inline-flex items-center px-2 py-1 bg-gray-100 border border-gray-200 text-gray-600 text-xs font-medium rounded-md dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+                    <div className={`inline-flex items-center px-2 py-1 text-xs font-medium rounded-md ${getDueDateColorScheme().bg} ${getDueDateColorScheme().border} ${getDueDateColorScheme().text}`}>
                       No due date
                     </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
+                    <div className={`text-xs ${getDueDateColorScheme().textSecondary}`}>
                       Schedule recommended
                     </div>
                   </div>