Merge pull request #98 from DemocracyDevelopers/feature/sample-dashbo…

…ard-page Feature/sample dashboard page
DemocracyDevelopers · Oct 12, 2024 · eeb7502 · eeb7502
2 parents 8cc9458 + 9e300c1
commit eeb7502
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 60 deletions.
diff --git a/app/dashboard/components/Information-icon-text.tsx b/app/dashboard/components/Information-icon-text.tsx
@@ -1,4 +1,10 @@
 import { useState } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
 import { FaInfoCircle } from "react-icons/fa";
 import Link from "next/link";
 
@@ -15,42 +21,37 @@ const TooltipWithIcon: React.FC<TooltipWithIconProps> = ({
   linkHref,
   description,
 }) => {
-  const [isTooltipVisible, setTooltipVisible] = useState(false);
-
   return (
-    <span
-      className="ml-2 relative"
-      onMouseEnter={() => setTooltipVisible(true)}
-      onMouseLeave={() => setTooltipVisible(true)} // Keep tooltip open
-    >
-      {/* Information Icon */}
-      <FaInfoCircle className="text-black cursor-pointer" size={18} />
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="ml-2 relative">
+            {/* Information Icon */}
+            <FaInfoCircle className="text-black cursor-pointer" size={18} />
+          </span>
+        </TooltipTrigger>
 
-      {/* Tooltip Box */}
-      {isTooltipVisible && (
-        <div className="absolute bg-white text-black text-sm rounded-lg shadow-lg py-3 px-5 left-full ml-2 w-64">
+        <TooltipContent
+          side="right"
+          align="center"
+          className="bg-white text-black rounded-lg shadow-lg p-4 w-64"
+        >
           <div className="font-bold mb-2">{title}</div>
           <div className="font-normal">
             {description}{" "}
             <Link
-              href="/tutorial"
+              href={linkHref}
               target="_blank"
               rel="noopener noreferrer"
               className="text-blue-500 hover:underline"
             >
-              Tutorial
+              {linkText}
             </Link>
             .
           </div>
-          <button
-            className="mt-4 text-gray-500 hover:text-gray-700"
-            onClick={() => setTooltipVisible(false)}
-          >
-            Hide
-          </button>
-        </div>
-      )}
-    </span>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 };
 

diff --git a/app/dashboard/components/avatar-assign-color.tsx b/app/dashboard/components/avatar-assign-color.tsx
@@ -1,7 +1,7 @@
 //avatar-assign-color.tsx
 import React, { useEffect, useMemo, useState } from "react";
-import useMultiWinnerDataStore from "@/store/MultiWinnerData";
-import { AvatarColor } from "@/utils/avatarColor";
+import useMultiWinnerDataStore from "@/store/multi-winner-data";
+import { AvatarColor } from "@/utils/avatar-color";
 
 interface AvatarProps {
   onComplete: () => void;

diff --git a/app/dashboard/components/elimination-tree/candidate-list-bar.tsx b/app/dashboard/components/elimination-tree/candidate-list-bar.tsx
@@ -6,9 +6,10 @@ import {
 import { Candidate } from "./constants";
 import SearchDropdown from "./search-dropdown";
 import { TooltipTrigger } from "@radix-ui/react-tooltip";
+import { useState } from "react";
 
 type CandidateListBarProps = {
-  selectedWinnerId: number;
+  selectedWinnerId: number | null;
   handleSelectWinner: (id: number) => void;
   useAvatar: boolean;
   candidateList: Candidate[];
@@ -20,16 +21,31 @@ function CandidateListBar({
   useAvatar,
   candidateList,
 }: CandidateListBarProps) {
+  const handleCandidateSelect = (candidateId: number) => {
+    // setSelectedCandidateId(candidateId);
+    handleSelectWinner(candidateId); // Call to display the tree or other action
+  };
   return (
     <div className="flex justify-center mb-5 gap-10">
       <div className="flex">
         {candidateList.map((candidate) => (
           <div key={candidate.id} className="flex flex-col items-center w-12">
             <TooltipProvider>
               <Tooltip>
+                {/*<TooltipTrigger*/}
+                {/*  onClick={() => handleSelectWinner(candidate.id)}*/}
+                {/*  className="leading-9 w-10 h-10 rounded-full cursor-pointer text-center border-2 border-black text-xs overflow-hidden whitespace-nowrap text-ellipsis"*/}
+                {/*>*/}
+                {/*  {candidate.name}*/}
+                {/*</TooltipTrigger>*/}
+
                 <TooltipTrigger
-                  onClick={() => handleSelectWinner(candidate.id)}
-                  className="leading-9 w-10 h-10 rounded-full cursor-pointer text-center border-2 border-black text-xs overflow-hidden whitespace-nowrap text-ellipsis"
+                  onClick={() => handleCandidateSelect(candidate.id)}
+                  className={`leading-9 w-10 h-10 rounded-full cursor-pointer text-center border-2 text-xs overflow-hidden whitespace-nowrap text-ellipsis ${
+                    selectedWinnerId === candidate.id
+                      ? "border-blue-500" // Outer blue circle when selected
+                      : "border-black"
+                  }`}
                 >
                   {candidate.name}
                 </TooltipTrigger>
@@ -39,7 +55,11 @@ function CandidateListBar({
           </div>
         ))}
       </div>
-      <SearchDropdown candidateList={candidateList} />
+      {/*<SearchDropdown candidateList={candidateList} />*/}
+      <SearchDropdown
+        candidateList={candidateList}
+        onSelect={handleCandidateSelect}
+      />
     </div>
   );
 }

diff --git a/app/dashboard/components/elimination-tree/dropdown.tsx b/app/dashboard/components/elimination-tree/dropdown.tsx
@@ -9,7 +9,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Switch } from "@/components/ui/switch";
-import useTreeSettingsStore from "@/store/useTreeSettingStore";
+import useTreeSettingsStore from "@/store/use-tree-setting-store";
 import { ChevronDown } from "lucide-react";
 
 function Dropdown() {

diff --git a/app/dashboard/components/elimination-tree/index.tsx b/app/dashboard/components/elimination-tree/index.tsx
@@ -7,8 +7,8 @@ import Tree from "../../../../components/tree";
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft, ArrowRight, Undo2 } from "lucide-react";
-import useMultiWinnerDataStore from "@/store/MultiWinnerData";
 import TooltipWithIcon from "@/app/dashboard/components/Information-icon-text";
+import useMultiWinnerDataStore from "@/store/multi-winner-data";
 
 function EliminationTree() {
   const { multiWinner } = useMultiWinnerDataStore();
@@ -104,7 +104,7 @@ function EliminationTree() {
           />
         </div>
 
-        {/* <Dropdown /> */}
+        {/*<Dropdown />*/}
       </div>
       <div>
         <CandidateListBar

diff --git a/app/dashboard/components/elimination-tree/search-dropdown.tsx b/app/dashboard/components/elimination-tree/search-dropdown.tsx
@@ -6,27 +6,49 @@ import { Candidate } from "./constants";
 import { Card, CardContent } from "@/components/ui/card";
 import Image from "next/image";
 
-function SearchDropdown({ candidateList }: { candidateList: Candidate[] }) {
+// function SearchDropdown({ candidateList }: { candidateList: Candidate[] }) {
+//   const [searchTerm, setSearchTerm] = useState("");
+//   const [selectedCandidate, setSelectedCandidate] = useState<Candidate | null>(
+//     null,
+//   );
+//   const [isOpen, setIsOpen] = useState(false);
+//   //不能用shadcn的popover,因为他的popover弹出瞬间会让input失去焦点
+//
+//   const filteredList = candidateList.filter((candidate) =>
+//     candidate.name.toLowerCase().includes(searchTerm.toLowerCase()),
+//   );
+//   const handleSelect = (candidate: Candidate) => {
+//     setSelectedCandidate(candidate);
+//     setSearchTerm(candidate.name);
+//     console.log("Selected Candidate:", candidate.name);
+//     setIsOpen(false);
+//   };
+
+function SearchDropdown({
+  candidateList,
+  onSelect,
+}: {
+  candidateList: Candidate[];
+  onSelect: (candidateId: number) => void;
+}) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedCandidate, setSelectedCandidate] = useState<Candidate | null>(
-    null,
-  );
   const [isOpen, setIsOpen] = useState(false);
-  //不能用shadcn的popover,因为他的popover弹出瞬间会让input失去焦点
 
   const filteredList = candidateList.filter((candidate) =>
     candidate.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
+
   const handleSelect = (candidate: Candidate) => {
-    setSelectedCandidate(candidate);
     setSearchTerm(candidate.name);
-    console.log("Selected Candidate:", candidate.name);
+    onSelect(candidate.id);
     setIsOpen(false);
   };
   return (
     <div className="relative">
       <Input
         value={searchTerm}
+        type="search"
+        placeholder="Search for candidate"
         onChange={(e) => setSearchTerm(e.target.value)}
         onFocus={() => setIsOpen(true)}
         onBlur={() => setIsOpen(false)}

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -10,8 +10,8 @@ import { ChevronRight, FilePenLine } from "lucide-react";
 
 import EliminationTree from "./components/elimination-tree";
 import AvatarAssignColor from "./components/avatar-assign-color"; // 引入 Avatar 组件
-import useMultiWinnerDataStore from "@/store/MultiWinnerData";
-import multiWinnerData from "@/store/MultiWinnerData"; // 引入 zustand store
+import useMultiWinnerDataStore from "@/store/multi-winner-data";
+import multiWinnerData from "@/store/multi-winner-data"; // 引入 zustand store
 
 const Dashboard: React.FC = () => {
   const { candidateList, assertionList, winnerInfo } =

diff --git a/app/sample/components/sample-selector.tsx b/app/sample/components/sample-selector.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Image from "next/image";
-import useMultiWinnerDataStore from "../../../store/MultiWinnerData";
-import { AvatarColor } from "@/utils/avatarColor";
+import useMultiWinnerDataStore from "../../../store/multi-winner-data";
+import { AvatarColor } from "@/utils/avatar-color";
 import { explainAssertions } from "../../explain-assertions/components/explain-process";
 import { useRouter } from "next/navigation";
 
@@ -18,7 +18,7 @@ const sampleFiles: SampleFile[] = [
     description: "NEB assertions example",
     imageUrl: "/sample-images/img.png",
     // fileUrl: "/sample-jsons/a_guide_to_RAIRE_eg_NEB_assertions.json",
-    fileUrl: "/sample-jsons/City of Coffs Harbour Mayoral.json",
+    fileUrl: "/sample-jsons/a_guide_to_RAIRE_eg_NEB_assertions.json",
   },
   {
     name: "One candidate dominates example",

diff --git a/app/upload/components/uploader.tsx b/app/upload/components/uploader.tsx
@@ -2,10 +2,10 @@ import React, { useState, useEffect, useCallback } from "react";
 import { CloudUpload, File, ArrowLeft, Link } from "lucide-react";
 import CustomAlertDialog from "./alert-dialog";
 import UploadProgress from "./progress";
-import useMultiWinnerDataStore from "../../../store/MultiWinnerData";
+import useMultiWinnerDataStore from "../../../store/multi-winner-data";
 import { explainAssertions } from "../../explain-assertions/components/explain-process";
 import { useRouter } from "next/navigation";
-import { AvatarColor } from "@/utils/avatarColor";
+import { AvatarColor } from "@/utils/avatar-color";
 
 interface UploaderProps {
   className?: string;

diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
@@ -53,7 +53,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "@/lib/utils";
-import useMultiWinnerDataStore from "@/store/MultiWinnerData"; // 引入 zustand store
+import useMultiWinnerDataStore from "@/store/multi-winner-data"; // 引入 zustand store
 
 // 定义 AvatarProps 接口，明确指定 candidateId 的类型
 interface AvatarProps
@@ -120,7 +120,7 @@ const AvatarFallback = React.forwardRef<
       ref={ref}
       title={name} // 悬停时显示完整名字
       className={cn(
-        "flex h-full w-full items-center justify-center rounded-full text-white font-bold",
+        "flex h-full w-full items-center justify-center rounded-full text-white text-xs font-bold ",
         className,
       )}
       style={{ backgroundColor: color !== "OVERFLOW" ? color : "gray" }}

diff --git a/public/sample-jsons/a_guide_to_RAIRE_eg_NEB_assertions.json b/public/sample-jsons/a_guide_to_RAIRE_eg_NEB_assertions.json
@@ -12,7 +12,8 @@
             "winner": 2,
             "loser": 3
           },
-          "difficulty": 5.0
+          "difficulty": 5.0,
+          "margin": 3000
         },
         {
           "assertion": {
@@ -21,7 +22,8 @@
             "loser": 0,
             "continuing": [0, 2]
           },
-          "difficulty": 9.0
+          "difficulty": 9.0,
+          "margin": 1000
         },
         {
           "assertion": {
@@ -30,7 +32,8 @@
             "loser": 1,
             "continuing": [0, 1, 2]
           },
-          "difficulty": 5.0
+          "difficulty": 5.0,
+          "margin": 5000
         },
         {
           "assertion": {
@@ -39,7 +42,8 @@
             "loser": 3,
             "continuing": [0, 1, 2, 3]
           },
-          "difficulty": 2.25
+          "difficulty": 2.25,
+          "margin": 400
         },
         {
           "assertion": {
@@ -48,10 +52,12 @@
             "loser": 1,
             "continuing": [0, 1, 2]
           },
-          "difficulty": 3.75
+          "difficulty": 3.75,
+          "margin": 600
         }
       ],
       "difficulty": 9.0,
+      "margin": 400,
       "winner": 2,
       "num_candidates": 4
     }

diff --git a/public/sample-jsons/a_guide_to_RAIRE_eg_one_candidate_dominates.json b/public/sample-jsons/a_guide_to_RAIRE_eg_one_candidate_dominates.json
@@ -12,26 +12,30 @@
             "winner": 0,
             "loser": 1
           },
-          "difficulty": 2.0
+          "difficulty": 2.0,
+          "margin": 1000
         },
         {
           "assertion": {
             "type": "NEB",
             "winner": 0,
             "loser": 3
           },
-          "difficulty": 2.0
+          "difficulty": 2.0,
+          "margin": 500
         },
         {
           "assertion": {
             "type": "NEB",
             "winner": 0,
             "loser": 2
           },
-          "difficulty": 2.0
+          "difficulty": 2.0,
+          "margin": 2000
         }
       ],
       "difficulty": 2.0,
+      "margin": 5000,
       "winner": 0,
       "num_candidates": 4
     }