Merge branch 'release' into feature/yilin2

app/dashboard/components/Information-icon-text.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import { FaInfoCircle } from "react-icons/fa";
+import Link from "next/link";
+
+interface TooltipWithIconProps {
+  title: string;
+  linkText: string;
+  linkHref: string;
+  description: string;
+}
+
+const TooltipWithIcon: React.FC<TooltipWithIconProps> = ({
+  title,
+  linkText,
+  linkHref,
+  description,
+}) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="ml-2 relative">
+            {/* Information Icon */}
+            <FaInfoCircle className="text-black cursor-pointer" size={18} />
+          </span>
+        </TooltipTrigger>
+
+        <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={linkHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:underline"
+            >
+              {linkText}
+            </Link>
+            .
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default TooltipWithIcon;

app/dashboard/components/AssertionsDetailsModal.tsx → app/dashboard/components/assertions-details-modal.tsx

@@ -1,5 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Avatar } from "@/components/ui/avatar";
+import { FaInfoCircle } from "react-icons/fa";
+import Link from "next/link";
+import TooltipWithIcon from "@/app/dashboard/components/Information-icon-text";
 
 // 更新 Assertion 接口，添加 candidateId 字段
 interface Assertion {
@@ -26,6 +29,7 @@ const AssertionsDetailsModal: React.FC<AssertionsDetailsModalProps> = ({
   maxDifficulty,
   minMargin,
 }) => {
+  const [isTooltipVisible, setTooltipVisible] = useState(false);
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -61,7 +65,15 @@ const AssertionsDetailsModal: React.FC<AssertionsDetailsModalProps> = ({
           </svg>
         </button>
 
-        <h2 className="text-2xl font-bold mb-4">Assertions Details</h2>
+        <h2 className="text-2xl font-bold mb-4 flex items-center relative">
+          Assertions Details
+          <TooltipWithIcon
+            title="Need Help?"
+            description="For detailed guidance on understanding the assertion attributes, please refer to our"
+            linkText="Tutorial"
+            linkHref="/tutorial"
+          />
+        </h2>
         <div className="mb-4">
           <p className="text-gray-700 font-bold">
             <span className="font-semibold">Maximum Difficulty:</span>{" "}

app/dashboard/components/AvatarAssignColor.tsx → app/dashboard/components/avatar-assign-color.tsx

@@ -1,7 +1,7 @@
-//AvatarAssignColor.tsx
+//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;

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>
   );
 }

app/dashboard/components/elimination-tree/demo.ts

@@ -1,4 +1,4 @@
-import { TreeNode } from "@/components/Tree/helper";
+import { TreeNode } from "@/components/tree/helper";
 
 type demoType = {
   winnerInfo: {

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() {

app/dashboard/components/elimination-tree/index.tsx

@@ -3,11 +3,12 @@ import CandidateListBar from "@/app/dashboard/components/elimination-tree/candid
 import Dropdown from "@/app/dashboard/components/elimination-tree/dropdown";
 import StepByStep from "@/app/dashboard/components/elimination-tree/step-by-step";
 // import { demoFromCore } from "@/app/dashboard/components/elimination-tree/demo";
-import Tree from "@/components/Tree";
+import Tree from "../../../../components/tree";
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import useMultiWinnerDataStore from "@/store/MultiWinnerData";
+import { ArrowLeft, ArrowRight, Undo2 } from "lucide-react";
+import TooltipWithIcon from "@/app/dashboard/components/Information-icon-text";
+import useMultiWinnerDataStore from "@/store/multi-winner-data";
 
 function EliminationTree() {
   const { multiWinner } = useMultiWinnerDataStore();
@@ -22,6 +23,8 @@ function EliminationTree() {
   const [selectedWinnerId, setSelectedWinnerId] = useState<number>(0);
   const [selectedStep, setSelectedStep] = useState<number>(1); // Ensure this is always defined
 
+  const [resetHiddenNodes, setResetHiddenNodes] = useState(false);
+
   // Use useEffect to initialize selectedWinnerId when multiWinner loads
   useEffect(() => {
     if (multiWinner && multiWinner.length > 0) {
@@ -79,16 +82,35 @@ function EliminationTree() {
     </Button>
   );
 
+  const handleRevertAssertion = () => {
+    setResetHiddenNodes(true);
+  };
+
+  const handleResetComplete = () => {
+    setResetHiddenNodes(false);
+  };
+
   return (
     <div className="border border-gray-300 rounded-lg p-6 h-auto flex flex-col justify-between pl-10">
-      <div className="flex justify-between">
-        <h3 className="text-2xl font-bold">Elimination Tree</h3>
-        <Dropdown />
+      <div className="flex items-center justify-between">
+        {/* Elimination Tree title and Tooltip with Icon */}
+        <div className="flex items-center">
+          <h3 className="text-2xl font-bold">Elimination Tree</h3>
+          <TooltipWithIcon
+            title="Need Help?"
+            description="For detailed guidance on the elimination tree process, please refer to our"
+            linkText="Tutorial"
+            linkHref="/tutorial"
+          />
+        </div>
+
+        {/*<Dropdown />*/}
       </div>
       <div>
         <CandidateListBar
           selectedWinnerId={selectedWinnerId}
           handleSelectWinner={(id: number) => {
+            handleRevertAssertion();
             setSelectedStep(1); // Reset step
             setSelectedWinnerId(id);
           }}
@@ -108,8 +130,23 @@ function EliminationTree() {
             key={`${selectedWinnerId}-${selectedStep}`}
             nextComponent={NextComponent}
             backComponent={BackComponent}
+            resetHiddenNodes={resetHiddenNodes}
+            onResetComplete={handleResetComplete}
           />
         </div>
+        <div className="w-48 flex flex-col gap-4">
+          <div>
+            <div className="font-bold">Applied Assertion: </div>
+            <div>{data.process[selectedStep].assertion}</div>
+          </div>
+
+          <div>
+            <Button onClick={handleRevertAssertion}>
+              Revert Assertion
+              <Undo2 className="ml-2 h-4 w-4" />
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   );

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)}

app/dashboard/page.tsx

@@ -1,17 +1,17 @@
 "use client";
 import React, { useState } from "react";
 import Card from "./components/card";
-import AssertionTable from "./components/assertionTable";
-import AssertionsDetailsModal from "./components/AssertionsDetailsModal";
+import AssertionTable from "./components/assertion-table";
+import AssertionsDetailsModal from "./components/assertions-details-modal";
 import { FaUserFriends, FaTrophy, FaList } from "react-icons/fa";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { ChevronRight, FilePenLine } from "lucide-react";
 
 import EliminationTree from "./components/elimination-tree";
-import AvatarAssignColor from "./components/AvatarAssignColor"; // 引入 Avatar 组件
-import useMultiWinnerDataStore from "@/store/MultiWinnerData";
-import multiWinnerData from "@/store/MultiWinnerData"; // 引入 zustand store
+import AvatarAssignColor from "./components/avatar-assign-color"; // 引入 Avatar 组件
+import useMultiWinnerDataStore from "@/store/multi-winner-data";
+import multiWinnerData from "@/store/multi-winner-data"; // 引入 zustand store
 
 const Dashboard: React.FC = () => {
   const { candidateList, assertionList, winnerInfo } =

app/explain-assertions/components/DescribeRaireResult.tsx → app/explain-assertions/components/describe-raire-result.tsx

@@ -1,4 +1,4 @@
-// components/DescribeRaireResult.tsx
+// components/describe-raire-result.tsx
 
 import React from "react";
 import {