@manojkmfsi/monodog 1.1.38 → 1.1.39

package/monodog-dashboard/src/components/modules/dependency-graph/DependencyGraph.tsx

@@ -1,224 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { monorepoService } from '../../../services/monorepoService';
-import { DASHBOARD_ERROR_MESSAGES } from '../../../constants/messages';
-// Import sub-components
-import {
-  LoadingState,
-  ErrorState,
-  DependencyGraphHeader,
-  GraphToolbar,
-  GraphVisualization,
-  DependencyList,
-  DependencyDetails,
-  GraphStats,
-  CircularDependencies,
-  GraphLegend,
-} from './components';
-
-// Import types and utilities
-import { PackageNode } from './types/dependency.types';
-import {
-  calculateGraphStats,
-  detectCircularDependencies,
-  sortPackages,
-  calculateLayout,
-  mapAllDependents,
-} from './utils/dependency.utils';
-import { LinkIcon } from '../../../icons/heroicons';
-// Re-export types for backward compatibility
-export type { PackageNode } from './types/dependency.types';
-
-export default function DependencyGraph() {
-  // Fetch packages
-  useEffect(() => {
-    const fetchPackages = async () => {
-      try {
-        setLoading(true);
-        const pkgs = await monorepoService.getPackages();
-        const dependentsMap = mapAllDependents(pkgs);
-        const packagesMap = pkgs.map(pkg => ({
-          ...pkg, // Keep all existing package data
-          dependencies: {
-            ...pkg.dependencies,
-            ...pkg.devDependencies,
-            ...pkg.peerDependencies,
-          },
-          dependents: dependentsMap[pkg.name],
-        }));
-
-        setPackages(packagesMap);
-        setError(null);
-      } catch (err) {
-        setError(DASHBOARD_ERROR_MESSAGES.FAILED_TO_FETCH_PACKAGES);
-        console.error('Error fetching packages:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchPackages();
-  }, []);
-  // State management
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [packages, setPackages] = useState<PackageNode[]>([]);
-
-  // View state
-  const [viewMode, setViewMode] = useState<'graph' | 'list'>('graph');
-  const [layout, setLayout] = useState<'hierarchical' | 'circular' | 'force'>(
-    'hierarchical'
-  );
-  const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
-  const [hoveredPackage, setHoveredPackage] = useState<string | null>(null);
-  const [showLegend, setShowLegend] = useState(true);
-  const [zoomLevel, setZoomLevel] = useState(1);
-
-  // List view state
-  const [sortBy, setSortBy] = useState<
-    'name' | 'dependencies' | 'dependents' | 'status'
-  >('name');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-
-  // Computed values
-  const layoutedPackages = useMemo(() => {
-    return calculateLayout(packages ?? [], layout, 800, 600);
-  }, [packages, layout]);
-
-  const sortedPackages = useMemo(() => {
-    return sortPackages(packages, sortBy, sortOrder);
-  }, [packages, sortBy, sortOrder]);
-
-  const stats = useMemo(() => {
-    return calculateGraphStats(packages);
-  }, [packages]);
-
-  const circularDependencies = useMemo(() => {
-    return detectCircularDependencies(packages);
-  }, [packages]);
-
-  const selectedPackageData = selectedPackage
-    ? packages.find(pkg => pkg.name === selectedPackage) || null
-    : null;
-
-  // Event handlers
-  const handleRefresh = () => {
-    // In real implementation, this would refetch data
-    // console.log('Refreshing dependency graph...');
-  };
-
-  const handlePackageSelect = (packageId: string | null) => {
-    setSelectedPackage(packageId);
-  };
-
-  const handleSortChange = (field: string, order: 'asc' | 'desc') => {
-    setSortBy(field as any);
-    setSortOrder(order);
-  };
-
-  const handleRetry = () => {
-    window.location.reload();
-  };
-
-  // Loading state
-  if (loading) {
-    return <LoadingState />;
-  }
-
-  // Error state
-  if (error) {
-    return <ErrorState error={error} onRetry={handleRetry} />;
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <DependencyGraphHeader onRefresh={handleRefresh} loading={loading} />
-
-      {/* Stats */}
-      <GraphStats stats={stats} packages={packages ?? []} />
-
-      {/* Circular Dependencies Warning */}
-      {circularDependencies.length > 0 && (
-        <CircularDependencies
-          cycles={circularDependencies}
-          packages={packages}
-          onPackageSelect={handlePackageSelect}
-        />
-      )}
-
-      {/* Toolbar */}
-      <GraphToolbar
-        viewMode={viewMode}
-        onViewModeChange={setViewMode}
-        layout={layout}
-        onLayoutChange={setLayout}
-        showLegend={showLegend}
-        onToggleLegend={() => setShowLegend(!showLegend)}
-        zoomLevel={zoomLevel}
-        onZoomChange={setZoomLevel}
-      />
-
-      {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        {/* Graph/List View */}
-        <div className={`${showLegend ? 'lg:col-span-3' : 'lg:col-span-4'}`}>
-          {viewMode === 'graph' ? (
-            <div className="relative">
-              <div
-                style={{
-                  transform: `scale(${zoomLevel})`,
-                  transformOrigin: 'top left',
-                }}
-              >
-                <GraphVisualization
-                  packages={layoutedPackages}
-                  selectedPackage={selectedPackage}
-                  hoveredPackage={hoveredPackage}
-                  onPackageSelect={handlePackageSelect}
-                  onPackageHover={setHoveredPackage}
-                  layout={layout}
-                />
-              </div>
-
-              {/* Package Details Overlay */}
-              <DependencyDetails
-                package={selectedPackageData}
-                packages={packages}
-                onClose={() => setSelectedPackage(null)}
-              />
-            </div>
-          ) : (
-            <DependencyList
-              packages={sortedPackages}
-              selectedPackage={selectedPackage}
-              onPackageSelect={handlePackageSelect}
-              sortBy={sortBy}
-              sortOrder={sortOrder}
-              onSortChange={handleSortChange}
-            />
-          )}
-        </div>
-
-        {/* Legend */}
-        {showLegend && (
-          <div className="lg:col-span-1">
-            <GraphLegend show={showLegend} />
-          </div>
-        )}
-      </div>
-
-      {/* Empty State */}
-      {/* {packages.length === 0 && !loading && (
-        <div className="text-center py-12">
-          <div className="flex justify-center text-gray-400 text-6xl mb-4"><LinkIcon className="w-6 h-6 text-primary-600" /></div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            No dependencies found
-          </h3>
-          <p className="text-gray-600 mb-4">
-            No package dependencies available to display.
-          </p>
-        </div>
-      )} */}
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/CircularDependencies.tsx

@@ -1,177 +0,0 @@
-import {
-  ExclamationTriangleIcon,
-  ArrowRightIcon,
-} from '../../../../icons/heroicons';
-import { CircularDependenciesProps } from '../types/dependency.types';
-import { Fragment } from 'react';
-
-export default function CircularDependencies({
-  cycles,
-  packages,
-  onPackageSelect,
-}: CircularDependenciesProps) {
-  const getSeverityColor = (severity: string) => {
-    switch (severity) {
-      case 'high':
-        return 'bg-red-100 text-red-800 border-red-200';
-      case 'medium':
-        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
-      case 'low':
-        return 'bg-blue-100 text-blue-800 border-blue-200';
-      default:
-        return 'bg-gray-100 text-gray-800 border-gray-200';
-    }
-  };
-
-  const getSeverityIcon = (severity: string) => {
-    switch (severity) {
-      case 'high':
-        return '🔴';
-      case 'medium':
-        return '🟡';
-      case 'low':
-        return '🔵';
-      default:
-        return '⚪';
-    }
-  };
-
-  if (cycles.length === 0) {
-    return (
-      <div className="bg-white p-6 rounded-lg shadow border">
-        <div className="flex items-center space-x-3 mb-4">
-          <div className="p-2 bg-green-100 rounded-lg">
-            <ExclamationTriangleIcon className="w-6 h-6 text-green-600" />
-          </div>
-          <div>
-            <h3 className="text-lg font-medium text-gray-900">
-              Circular Dependencies
-            </h3>
-            <p className="text-sm text-gray-600">Dependency cycle analysis</p>
-          </div>
-        </div>
-
-        <div className="text-center py-8">
-          <div className="text-green-400 text-4xl mb-2"></div>
-          <h4 className="text-green-800 font-medium mb-1">
-            No Circular Dependencies!
-          </h4>
-          <p className="text-green-700 text-sm">
-            Your dependency graph is clean and free of circular references.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bg-white p-6 rounded-lg shadow border">
-      <div className="flex items-center space-x-3 mb-4">
-        <div className="p-2 bg-red-100 rounded-lg">
-          <ExclamationTriangleIcon className="w-6 h-6 text-red-600" />
-        </div>
-        <div>
-          <h3 className="text-lg font-medium text-gray-900">
-            Circular Dependencies
-          </h3>
-          <p className="text-sm text-gray-600">
-            Found {cycles.length} circular dependency cycle
-            {cycles.length > 1 ? 's' : ''}
-          </p>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        {cycles.map((cycle, index) => (
-          <div
-            key={index}
-            className={`border rounded-lg p-4 ${getSeverityColor(cycle.severity)}`}
-          >
-            <div className="flex items-center justify-between mb-3">
-              <div className="flex items-center space-x-2">
-                <span className="text-lg">
-                  {getSeverityIcon(cycle.severity)}
-                </span>
-                <span className="text-sm font-medium capitalize">
-                  {cycle.severity} Severity
-                </span>
-              </div>
-              <span className="text-xs opacity-75">
-                {cycle.cycle.length} packages affected
-              </span>
-            </div>
-
-            <div className="mb-3">
-              <p className="text-sm mb-2">{cycle.impact}</p>
-            </div>
-
-            {/* Cycle Visualization */}
-            <div className="bg-white bg-opacity-50 rounded-lg p-3">
-              <div className="flex items-center flex-wrap gap-2">
-                {cycle.cycle.map((packageId, idx) => (
-                  <Fragment key={`${packageId}-${idx}`}>
-                    <button
-                      onClick={() => onPackageSelect(packageId)}
-                      className="px-3 py-1 bg-white rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors border shadow-sm"
-                    >
-                      {packageId}
-                    </button>
-                    {idx < cycle.cycle.length - 1 && (
-                      <ArrowRightIcon className="w-4 h-4 text-gray-400" />
-                    )}
-                  </Fragment>
-                ))}
-                {/* Arrow back to start */}
-                {cycle.cycle.length > 1 && (
-                  <>
-                    <ArrowRightIcon className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm text-gray-500 italic">
-                      (cycles back to {cycle.cycle[0]})
-                    </span>
-                  </>
-                )}
-              </div>
-            </div>
-
-            {/* Recommendations */}
-            <div className="mt-3 pt-3 border-t border-current border-opacity-20">
-              <h5 className="text-xs font-medium mb-1">Recommendation:</h5>
-              <p className="text-xs opacity-90">
-                {cycle.severity === 'high' &&
-                  'Critical: Refactor immediately to break this cycle. Consider dependency inversion or splitting packages.'}
-                {cycle.severity === 'medium' &&
-                  'Important: Plan to refactor this cycle. Review package boundaries and extract common dependencies.'}
-                {cycle.severity === 'low' &&
-                  'Minor: Monitor this cycle. Consider if these packages could be merged or dependencies restructured.'}
-              </p>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Summary */}
-      <div className="mt-6 pt-4 border-t border-gray-200">
-        <div className="grid grid-cols-3 gap-4 text-center">
-          <div>
-            <div className="text-lg font-bold text-red-600">
-              {cycles.filter(c => c.severity === 'high').length}
-            </div>
-            <div className="text-xs text-gray-600">High Severity</div>
-          </div>
-          <div>
-            <div className="text-lg font-bold text-yellow-600">
-              {cycles.filter(c => c.severity === 'medium').length}
-            </div>
-            <div className="text-xs text-gray-600">Medium Severity</div>
-          </div>
-          <div>
-            <div className="text-lg font-bold text-blue-600">
-              {cycles.filter(c => c.severity === 'low').length}
-            </div>
-            <div className="text-xs text-gray-600">Low Severity</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/DependencyDetails.tsx

@@ -1,192 +0,0 @@
-import { Link } from 'react-router-dom';
-import { XMarkIcon } from '../../../../icons/heroicons';
-import { DependencyDetailsProps } from '../types/dependency.types';
-import {
-  getStatusColor,
-  getTypeColor,
-  getDependencyStatusColor,
-} from '../utils/dependency.utils';
-
-export default function DependencyDetails({
-  package: pkg,
-  packages,
-  onClose,
-}: DependencyDetailsProps) {
-  if (!pkg) return null;
-
-  return (
-    <div className="absolute top-4 right-4 bg-white p-4 rounded-lg shadow-lg border border-gray-200 w-80 max-h-[80vh] overflow-y-auto">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-lg font-medium text-gray-900">{pkg.name}</h3>
-        <button
-          onClick={onClose}
-          className="text-gray-400 hover:text-gray-600 transition-colors"
-        >
-          <XMarkIcon className="w-5 h-5" />
-        </button>
-      </div>
-
-      <div className="space-y-4">
-        {/* Package Info */}
-        <div>
-          <div className="flex items-center space-x-2 mb-2">
-            <span
-              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getTypeColor(pkg.type)}`}
-            >
-              {pkg.type}
-            </span>
-            <span
-              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(pkg.status)}`}
-            >
-              {pkg.status}
-            </span>
-          </div>
-          <div className="text-sm text-gray-600">
-            Version: <span className="font-mono">{pkg.version}</span>
-          </div>
-        </div>
-
-        {/* Dependencies */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <h4 className="text-sm font-medium text-gray-700">Dependencies</h4>
-            <span className="text-xs text-gray-500">
-              ({Object.keys(pkg.dependencies).length})
-            </span>
-          </div>
-          {Object.keys(pkg.dependencies).length > 0 ? (
-            <div className="space-y-1 max-h-32 overflow-y-auto">
-              {Object.keys(pkg.dependencies).map(depName => {
-                const dep = packages.find(p => p.name === depName);
-                return dep ? (
-                  <div
-                    key={depName}
-                    className="flex items-center justify-between text-sm py-1"
-                  >
-                    <span className="text-gray-600 truncate">{dep.name}</span>
-                    <div className="flex items-center space-x-1">
-                      <span className="text-xs text-gray-400">
-                        {dep.version}
-                      </span>
-                      <span
-                        className={`${getDependencyStatusColor(depName, packages)} p-1`}
-                      >
-                        {dep.status === 'healthy'
-                          ? (<div className="w-2 h-2 bg-green-500 rounded-full"></div>)
-                          : dep.status === 'warning'
-                            ? (<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>)
-                            : (<div className="w-2 h-2 bg-red-500 rounded-full"></div>)}
-                      </span>
-                    </div>
-                  </div>
-                ) : (
-                  <div key={depName} className="text-sm text-gray-400 py-1">
-                    {depName} (not found)
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="text-sm text-gray-500 text-center py-2">
-              No dependencies
-            </div>
-          )}
-        </div>
-
-        {/* Dependents */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <h4 className="text-sm font-medium text-gray-700">Dependents</h4>
-            <span className="text-xs text-gray-500">
-              ({pkg.dependents.length})
-            </span>
-          </div>
-          {pkg.dependents.length > 0 ? (
-            <div className="space-y-1 max-h-32 overflow-y-auto">
-              {pkg.dependents.map(depName => {
-                const dep = packages.find(p => p.name === depName);
-                return dep ? (
-                  <div
-                    key={depName}
-                    className="flex items-center justify-between text-sm py-1"
-                  >
-                    <span className="text-gray-600 truncate">{dep.name}</span>
-                    <div className="flex items-center space-x-1">
-                      <span className="text-xs text-gray-400">
-                        {dep.version}
-                      </span>
-                      <span
-                        className={`${getDependencyStatusColor(depName, packages)} p-1`}
-                      >
-                        {dep.status === 'healthy'
-                          ? (<div className="w-2 h-2 bg-green-500 rounded-full"></div>)
-                          : dep.status === 'warning'
-                            ? (<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>)
-                            : (<div className="w-2 h-2 bg-red-500 rounded-full"></div>)}
-                      </span>
-                    </div>
-                  </div>
-                ) : (
-                  <div key={depName} className="text-sm text-gray-400 py-1">
-                    {depName} (not found)
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="text-sm text-gray-500 text-center py-2">
-              No dependents
-            </div>
-          )}
-        </div>
-
-        {/* Impact Analysis */}
-        <div className="pt-2 border-t border-gray-200">
-          <h4 className="text-sm font-medium text-gray-700 mb-2">
-            Impact Analysis
-          </h4>
-          <div className="space-y-1 text-xs text-gray-600">
-            <div className="flex justify-between">
-              <span>Direct dependencies:</span>
-              <span className="font-medium">
-                {Object.keys(pkg.dependencies).length}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span>Direct dependents:</span>
-              <span className="font-medium">{pkg.dependents.length}</span>
-            </div>
-            <div className="flex justify-between">
-              <span>Risk level:</span>
-              <span
-                className={`font-medium ${
-                  pkg.dependents.length > 5
-                    ? 'text-red-600'
-                    : pkg.dependents.length > 2
-                      ? 'text-yellow-600'
-                      : 'text-green-600'
-                }`}
-              >
-                {pkg.dependents.length > 5
-                  ? 'High'
-                  : pkg.dependents.length > 2
-                    ? 'Medium'
-                    : 'Low'}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="pt-2 border-t border-gray-200">
-          <Link
-            to={`/packages/${encodeURIComponent(pkg.name)}`}
-            className="block w-full text-center bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors"
-          >
-            View Package Details →
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/dependency-graph/components/DependencyGraphHeader.tsx

@@ -1,30 +0,0 @@
-import { ArrowPathIcon } from '../../../../icons/heroicons';
-import type { DependencyGraphHeaderProps } from '../../../../types';
-
-export default function DependencyGraphHeader({
-  onRefresh,
-  loading = false,
-}: DependencyGraphHeaderProps) {
-  return (
-    <div className="flex items-center justify-between">
-      <div>
-        <h1 className="text-2xl font-bold text-gray-900">Dependency Graph</h1>
-        <p className="text-gray-600 mt-1">
-          Visualize package dependencies and relationships
-        </p>
-      </div>
-      {onRefresh && (
-        <button
-          onClick={onRefresh}
-          disabled={loading}
-          className="hidden bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
-        >
-          <ArrowPathIcon
-            className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`}
-          />
-          <span>Refresh</span>
-        </button>
-      )}
-    </div>
-  );
-}