easy_ml 0.1.4 → 0.2.0.pre.rc1

data/app/frontend/components/Pagination.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200">
+      <div className="flex-1 flex justify-between sm:hidden">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400"
+        >
+          Previous
+        </button>
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400"
+        >
+          Next
+        </button>
+      </div>
+      <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm text-gray-700">
+            Page <span className="font-medium">{currentPage}</span> of{' '}
+            <span className="font-medium">{totalPages}</span>
+          </p>
+        </div>
+        <div>
+          <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+            <button
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+              className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400"
+            >
+              <span className="sr-only">Previous</span>
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+              <button
+                key={page}
+                onClick={() => onPageChange(page)}
+                className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
+                  page === currentPage
+                    ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
+                    : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
+                }`}
+              >
+                {page}
+              </button>
+            ))}
+            <button
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400"
+            >
+              <span className="sr-only">Next</span>
+              <ChevronRight className="h-5 w-5" />
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/Popover.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useRef, useEffect } from "react";
+import { X } from "lucide-react";
+
+interface PopoverProps {
+  trigger: React.ReactElement;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Popover({ trigger, children, className = "" }: PopoverProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        !triggerRef.current?.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative">
+      <div ref={triggerRef} onClick={() => setIsOpen(!isOpen)}>
+        {trigger}
+      </div>
+
+      {isOpen && (
+        <div
+          ref={popoverRef}
+          className={`absolute z-50 right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 ${className}`}
+        >
+          <div className="flex justify-between items-center p-3 border-b border-gray-200">
+            <h3 className="font-medium">Feature Configuration</h3>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+          <div className="p-4">{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}

data/app/frontend/components/PredictionStream.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight, Clock, CheckCircle2, XCircle } from 'lucide-react';
+import type { Prediction } from '../types';
+
+interface PredictionStreamProps {
+  predictions: Prediction[];
+}
+
+const ITEMS_PER_PAGE = 10;
+
+export function PredictionStream({ predictions }: PredictionStreamProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(predictions.length / ITEMS_PER_PAGE);
+  
+  const paginatedPredictions = predictions.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h3 className="text-lg font-semibold">Live Predictions</h3>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+            className="p-1 rounded-md hover:bg-gray-100 disabled:opacity-50"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <span className="text-sm text-gray-600">
+            Page {currentPage} of {totalPages}
+          </span>
+          <button
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+            className="p-1 rounded-md hover:bg-gray-100 disabled:opacity-50"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {paginatedPredictions.map((prediction) => (
+          <div
+            key={prediction.id}
+            className="border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors"
+          >
+            <div className="flex justify-between items-start mb-3">
+              <div className="flex items-center gap-2">
+                <Clock className="w-4 h-4 text-gray-400" />
+                <span className="text-sm text-gray-500">
+                  {new Date(prediction.timestamp).toLocaleString()}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-gray-500">
+                  {prediction.latencyMs.toFixed(2)}ms
+                </span>
+                {prediction.groundTruth !== undefined && (
+                  prediction.output === prediction.groundTruth ? (
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                  ) : (
+                    <XCircle className="w-5 h-5 text-red-500" />
+                  )
+                )}
+              </div>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              <div>
+                <h4 className="text-sm font-medium text-gray-500 mb-2">Input</h4>
+                <div className="bg-gray-50 rounded-md p-3">
+                  <pre className="text-sm whitespace-pre-wrap">
+                    {JSON.stringify(prediction.input, null, 2)}
+                  </pre>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="text-sm font-medium text-gray-500 mb-2">Prediction</h4>
+                <div className="bg-gray-50 rounded-md p-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">
+                      {typeof prediction.output === 'boolean' 
+                        ? prediction.output ? 'Will Churn' : 'Will Not Churn'
+                        : prediction.output}
+                    </span>
+                    {prediction.groundTruth !== undefined && (
+                      <span className="text-sm text-gray-500">
+                        Ground Truth: {prediction.groundTruth ? 'Churned' : 'Retained'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}