Added new components

Author: tzacks-cl

src/components/GraphMenu.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Slider } from "@/components/ui/slider";
+import { Settings } from 'lucide-react';
+
+interface GraphMenuProps {
+    maxValue: number;
+    value: number;
+    onChange: (value: number) => void;
+    uniqueStudentMode: boolean;
+    // Optional props for sequence filter checkbox
+    showSlider?: boolean;
+    showSequenceFilter?: boolean;
+    showOnlySequenceStudents?: boolean;
+    onSequenceFilterChange?: (value: boolean) => void;
+}
+
+const GraphMenu: React.FC<GraphMenuProps> = ({
+    maxValue,
+    value,
+    onChange,
+    uniqueStudentMode,
+    showSlider = true,
+    showSequenceFilter = false,
+    showOnlySequenceStudents = true,
+    onSequenceFilterChange
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleSliderChange = (newValue: number[]) => {
+        onChange(newValue[0]);
+    };
+
+    return (
+        <div className="absolute top-2 left-2 z-10">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-8 h-8 flex items-center justify-center bg-white border border-gray-300 rounded shadow-sm hover:bg-gray-50 transition-colors"
+                title="Graph Settings"
+            >
+                <Settings className="w-4 h-4 text-gray-700" />
+            </button>
+
+            {isOpen && (
+                <div className="absolute top-10 left-0 w-64 bg-white border border-gray-300 rounded-lg shadow-lg p-4">
+                    {showSequenceFilter && onSequenceFilterChange && (
+                        <div className="mb-4">
+                            <label className="flex items-center cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    checked={showOnlySequenceStudents}
+                                    onChange={(e) => onSequenceFilterChange(e.target.checked)}
+                                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                                />
+                                <span className="ml-2 text-xs font-medium text-gray-700">
+                                    Include only students on this path in edge counts
+                                </span>
+                            </label>
+                        </div>
+                    )}
+
+                    {showSlider && (
+                        <>
+                            <div className="flex justify-between items-center mb-3">
+                                <span className="text-sm font-medium text-gray-700">
+                                    Min {uniqueStudentMode ? 'Students' : 'Visits'}
+                                </span>
+                                <span className="text-sm font-semibold text-gray-900">{value}</span>
+                            </div>
+                            <Slider
+                                min={0}
+                                max={maxValue}
+                                step={1}
+                                value={[value]}
+                                onValueChange={handleSliderChange}
+                                className="w-full"
+                            />
+                            <div className="flex justify-between text-xs text-gray-500 mt-2">
+                                <span>0</span>
+                                <span>{maxValue}</span>
+                            </div>
+                        </>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default GraphMenu;

src/components/GraphMinVisitsSlider.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Slider } from "@/components/ui/slider";
+
+interface GraphMinVisitsSliderProps {
+    maxValue: number;
+    value: number;
+    onChange: (value: number) => void;
+    uniqueStudentMode: boolean;
+}
+
+const GraphMinVisitsSlider: React.FC<GraphMinVisitsSliderProps> = ({
+    maxValue,
+    value,
+    onChange,
+    uniqueStudentMode
+}) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const handleSliderChange = (newValue: number[]) => {
+        onChange(newValue[0]);
+    };
+
+    return (
+        <div className="w-full mt-2 mb-2">
+            <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-2">
+                <button
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    className="w-full flex justify-between items-center text-xs font-medium text-gray-700 hover:text-gray-900"
+                >
+                    <span>Min {uniqueStudentMode ? 'Students' : 'Visits'}: {value}</span>
+                    <span className="text-gray-400">{isExpanded ? '▼' : '▲'}</span>
+                </button>
+
+                {isExpanded && (
+                    <div className="mt-2 pt-2 border-t border-gray-200">
+                        <Slider
+                            min={0}
+                            max={maxValue}
+                            step={1}
+                            value={[value]}
+                            onValueChange={handleSliderChange}
+                            className="w-full"
+                        />
+                        <div className="flex justify-between text-xs text-gray-500 mt-1">
+                            <span>0</span>
+                            <span>{maxValue}</span>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default GraphMinVisitsSlider;

src/components/SequenceFilterCheckbox.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface SequenceFilterCheckboxProps {
+    showOnlySequenceStudents: boolean;
+    onChange: (value: boolean) => void;
+}
+
+const SequenceFilterCheckbox: React.FC<SequenceFilterCheckboxProps> = ({
+    showOnlySequenceStudents,
+    onChange
+}) => {
+    return (
+        <div className="w-full mt-2 mb-2">
+            <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-3">
+                <label className="flex items-center cursor-pointer">
+                    <input
+                        type="checkbox"
+                        checked={showOnlySequenceStudents}
+                        onChange={(e) => onChange(e.target.checked)}
+                        className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                    />
+                    <span className="ml-2 text-xs font-medium text-gray-700">
+                        Include only students on this path in edge counts
+                    </span>
+                </label>
+            </div>
+        </div>
+    );
+};
+
+export default SequenceFilterCheckbox;

src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }