analyze tab wip, link fix, adding tooltip help

src/components/modals/config/AnalyzeTab.tsx

@@ -12,19 +12,20 @@ import { CountryContestant } from '../../../data/CountryContestant';
 import Dropdown from '../../Dropdown';
 import { saveCategories } from '../../../utilities/CategoryUtil';
 import { setActiveCategory } from '../../../redux/actions';
+import { getSourceCountryKey, getVoteTypeCodeFromOption } from '../../../utilities/VoteUtil';
 
 const AnalyzeTab: React.FC = () => {
   const dispatch = useDispatch<any>();
   const year = useSelector((state: AppState) => state.year);
   const categories = useSelector((state: AppState) => state.categories);
   const activeCategory = useSelector((state: AppState) => state.activeCategory);
-  const [voteType, setVoteType] = useState('televote');
+  const [voteType, setVoteType] = useState('Televote');
   const [mostSimilarComparisons, setMostSimilarComparisons] = useState<RankingComparison[]>([]);
   const [mostDissimilarComparisons, setMostDissimilarComparisons] = useState<RankingComparison[]>([]);
   const [codeCountryNameMap, setCodeCountryNameMap] = useState<Map<string, Country[]>>(new Map());
 
 
-  
+
   // Get all country rank codes for the selected year and vote type
   const getAllCountryRankCodes = async (voteType: string, round: string, voteYear: string) => {
     const codeCountryNameMap = new Map<string, Country[]>();
@@ -59,7 +60,7 @@ const AnalyzeTab: React.FC = () => {
     return sortedContestants.map((cc) => cc.id).join('');
   };
 
-    // Find the most similar vote by country for the current ranking
+  // Find the most similar vote by country for the current ranking
   const findMostSimilarVoteByCountry = async () => {
     const extractedParams = getUrlParams(activeCategory);
     const currentRankingCode = extractedParams.rankings;
@@ -81,9 +82,9 @@ const AnalyzeTab: React.FC = () => {
     setMostDissimilarComparisons(dissimilarComparisons);
   };
 
-  
+
   function getCountryNamesFromComparisons(
-    mostSimilarComparisons: RankingComparison[], 
+    mostSimilarComparisons: RankingComparison[],
     codeCountryNameMap: Map<string, Country[]>
   ): string[] {
     return mostSimilarComparisons
@@ -98,7 +99,10 @@ const AnalyzeTab: React.FC = () => {
 
   // Get the URL for the ranking link based on the comparison, year, vote type, and country name
   const getRankingUrl = (comparison: RankingComparison, countryName: string) => {
-    return `?r=${comparison.list2Code}&y=${year.substring(2, 4)}&n=${getRankingTitle(voteType, countryName).replaceAll(' ', '+')}&v=${voteType === 'televote' ? 'tv' : 'j'}`;
+    return `?r=${comparison.list2Code}` + 
+           `&y=${year.substring(2, 4)}` +
+           `&n=${getRankingTitle(voteType, countryName).replaceAll(' ', '+')}` + 
+           `&v=f-${getVoteTypeCodeFromOption(voteType)}-${getSourceCountryKey(countryName)}`;
   };
 
   // Format the percent similarity to the nearest tenth percent or percent if it's .0
@@ -121,7 +125,7 @@ const AnalyzeTab: React.FC = () => {
         weight: 5,
       };
       updatedCategories = [...updatedCategories, originalRanking];
-   
+
     }
 
     // comparison categories should have no weight so that the total 
@@ -133,9 +137,9 @@ const AnalyzeTab: React.FC = () => {
 
     const categoriesWithNewRanking = [...updatedCategories, newCategory];
     saveCategories(
-      categoriesWithNewRanking, 
-      dispatch, 
-      updatedCategories, 
+      categoriesWithNewRanking,
+      dispatch,
+      updatedCategories,
       activeCategory
     );
 
@@ -146,26 +150,28 @@ const AnalyzeTab: React.FC = () => {
     });
   };
 
-  
+
   return (
     <div className="mb-0">
       <p className="relative mb-[1em] mt-2 text-sm">
         Compare your current ranking with the Jury or Tele vote from each participating country
       </p>
       <div className="mt-5 mb-[1.5em]">
-        <Dropdown
-          key="vote-type-selector"
-          className="z-50 ml-3 mx-auto mb-2"
-          menuClassName="w-auto"
-          value={voteType}
-          onChange={(v) => {
-            setVoteType(v);
-            setMostSimilarComparisons([]);
-            setMostDissimilarComparisons([]);
-          }}
-          options={['televote', 'jury']}
-          showSearch={false}
-        />
+        <div className="mb-1">
+          <Dropdown
+            key="vote-type-selector"
+            className="z-50 ml-3 mx-auto mb-2"
+            menuClassName="w-auto"
+            value={voteType}
+            onChange={(v) => {
+              setVoteType(v);
+              setMostSimilarComparisons([]);
+              setMostDissimilarComparisons([]);
+            }}
+            options={['Total', 'Televote', 'Jury']}
+            showSearch={false}
+          />
+        </div>
         <IconButton
           className="ml-3 font-normal pl-[0.7em] rounded-md text-xs py-[0.5em] pr-[1em]"
           onClick={async () => await findMostSimilarVoteByCountry()}
@@ -184,7 +190,7 @@ const AnalyzeTab: React.FC = () => {
           <p className="text-sm">Most similar {voteType} rankings:</p>
           <ul>
             {mostSimilarComparisons.map((comparison, index) => (
-              <li key={index}>
+              <li key={index} className="mt-4">
                 {getCountryNamesFromComparisons([comparison], codeCountryNameMap).map((countryName, countryIndex) => {
                   const rankingTitle = getRankingTitle(voteType, countryName);
                   return (
@@ -218,7 +224,7 @@ const AnalyzeTab: React.FC = () => {
           <p className="text-sm">Most dissimilar {voteType} rankings:</p>
           <ul>
             {mostDissimilarComparisons.map((comparison, index) => (
-              <li key={index}>
+              <li key={index} className="mt-4">
                 {getCountryNamesFromComparisons([comparison], codeCountryNameMap).map((countryName, countryIndex) => {
                   const rankingTitle = getRankingTitle(voteType, countryName);
                   return (

src/components/modals/config/CategoriesTab.tsx

@@ -4,12 +4,17 @@ import IconButton from '../../IconButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from '../../../redux/types';
 import { deleteCategory, isValidCategoryName, parseCategoriesUrlParam, saveCategories } from '../../../utilities/CategoryUtil';
+import TooltipHelp from '../../TooltipHelp';
+import Checkbox from '../../Checkbox';
+import { setShowComparison } from '../../../redux/actions';
+import { updateQueryParams } from '../../../utilities/UrlUtil';
 
 const CategoriesTab: React.FC = () => {
   const dispatch: Dispatch<any> = useDispatch();
   const categories = useSelector((state: AppState) => state.categories);
   const activeCategory = useSelector((state: AppState) => state.activeCategory);
   const [newCategoryName, setNewCategoryName] = useState('');
+  const showComparison = useSelector((state: AppState) => state.showComparison);
 
 
   const addCategory = () => {
@@ -38,6 +43,17 @@ const CategoriesTab: React.FC = () => {
     saveCategories(updatedCategories, dispatch, categories, activeCategory);
   };
 
+    /**
+     * Handle check even on show category comparison checkbox
+     * @param checked 
+     */
+      const onShowComparisonChange = (checked: boolean) => {
+        updateQueryParams({ cm: checked === true ? 't' : 'f' })
+        dispatch(
+            setShowComparison(checked === true)
+        );
+    };
+
   return (
     <div className="mb-0">
       <p className="relative mb-[1em] mt-2 text-sm">
@@ -75,6 +91,18 @@ const CategoriesTab: React.FC = () => {
             />
           )}
         </div>
+        <div className="mt-1">
+            <TooltipHelp
+                tooltipContent="When viewing a category ranking, also display the contestant's rank in each other category"
+                className="ml-2 pb-1"
+            />
+            <Checkbox
+                id="total-checkbox"      
+                checked={showComparison}
+                onChange={(c) => onShowComparisonChange(c)}
+                label="Show Category Comparisons"
+            />
+        </div>
         <table className="mt-4 w-full table-auto">
           {categories?.length > 0 && (
             <thead>

src/components/modals/config/DisplayTab.tsx

@@ -76,15 +76,15 @@ const DisplayTab: React.FC = () => {
         }
     };
 
-    // Handle vote type input change
+    /**
+     * Handle click even on show category comparison checkbox
+     * @param checked 
+     */
     const onShowComparisonChange = (checked: boolean) => {
-
         updateQueryParams({ cm: checked === true ? 't' : 'f' })
         dispatch(
             setShowComparison(checked === true)
         );
-
-
     };
 
     // Get vote source code from option
@@ -135,11 +135,9 @@ const DisplayTab: React.FC = () => {
             <div>
                 <div className="mb-[0.5em] border-slate-700 border-b-[1px] pb-2 -mt-2">
                     <span className="flex items-center ml-2">
-                    <TooltipHelp
-                                icon={faQuestionCircle}
-                                tooltipContent="Select which types of votes to display with each ranked country"
-                                place="bottom-start"
-                            />
+                        <TooltipHelp                        
+                            tooltipContent="Select which types of votes to display with each ranked country"
+                        />
                         <span className="ml-3 text-sm font-semibold">
 
                             Show Votes:
@@ -170,12 +168,10 @@ const DisplayTab: React.FC = () => {
                     </span>
 
                     <div className="mt-[0.5em]">
-                    <TooltipHelp
-                                icon={faQuestionCircle}
-                                tooltipContent="Select the country to display votes from"
-                                place="bottom-start"
-                                className="ml-4"
-                            />
+                        <TooltipHelp
+                            tooltipContent="Choose which country to display voting counts from. 'All' will show the total vote count"
+                            className="ml-4"
+                        />
                         <span className="ml-3 text-sm font-semibold">
                             From:
                         </span>
@@ -197,6 +193,10 @@ const DisplayTab: React.FC = () => {
                 <div className="mt-4">
                     <div>
                         <div className="mb-2">
+                            <TooltipHelp
+                                tooltipContent="When viewing a category ranking, also display the contestant's rank in each other category"
+                                className="ml-4 pb-1"
+                            />
                             <Checkbox
                                 id="total-checkbox"
                                 className="ml-2"
@@ -208,7 +208,7 @@ const DisplayTab: React.FC = () => {
                         <span className="ml-5 font-semibold text-sm mb-[0.7em]">Theme:</span>
                         <Dropdown
                             key="theme-selector"
-                            className="ml-5 z-50 w-30 mx-auto mb-3"
+                            className="ml-5 w-30 mx-auto mb-3"
                             menuClassName=""
                             value={themeSelection}
                             onChange={(v) => onThemeInputChanged(v)}

src/components/modals/config/RankingsTab.tsx

@@ -9,6 +9,7 @@ import { countries } from '../../../data/Countries';
 import Dropdown from '../../Dropdown';
 import IconButton from '../../IconButton';
 import { goToUrl } from '../../../utilities/UrlUtil';
+import TooltipHelp from '../../TooltipHelp';
 
 const RankingsTab: React.FC = () => {
     const year = useSelector((state: AppState) => state.year);
@@ -137,8 +138,11 @@ const RankingsTab: React.FC = () => {
                             options={supportedYears.filter((i) => i !== '2020')}
                             showSearch={true}
                         />
-                        <span className="ml-2 text-sm">{'from'}</span>
-
+                        <span className="ml-2 text-sm">from</span>
+                        <TooltipHelp
+                            tooltipContent="Choose which country to display voting counts from. 'All' will show the total vote count"
+                            className="ml-4"
+                        />
                         <Dropdown
                             key="country-selector"
                             className="z-50 ml-3 mx-auto mb-2"

src/components/ranking/DetailsCard.tsx

@@ -179,7 +179,7 @@ export const DetailsCard: FC<DetailsCardProps> = (props) => {
         }
 
       </div>
-      {categories?.length && (showTotalRank || showComparison) && (
+      {categories?.length > 0 && (showTotalRank || showComparison) && (
         <div 
           ref={categoryRankingsRef}
           className="mt-0 mx-[0.6em] shadow-lg rounded-b-md bg-[#1c214c] bg-opacity-100 border-gray-600 border-x-[0.01em] border-b-[0.01em] overflow-x-auto relative"

src/utilities/VoteProcessor.ts

@@ -159,8 +159,9 @@ export function updateVoteTypeCode(
 } 
 
 function getVoteTypeFieldName(voteType: string) {
-    switch (voteType) {
+    switch (voteType?.toLowerCase()) {
         case 'tv':
+        case 'tele':
         case 'tele-vote':
         case 'televote':
             return 'telePoints';

src/utilities/VoteUtil.ts

@@ -43,19 +43,20 @@ export function getVoteTypeOption(voteCode: string) {
     }
 }
 
-function getVoteTypeCodeFromOption(
+export function getVoteTypeCodeFromOption(
     optionName: string
 ) {
     if (!optionName) {
         return;
     }
 
-    switch (optionName) {
-        case 'Jury':
+    switch (optionName?.toLowerCase()) {
+        case 'jury':
             return 'j'
-        case 'Total':
+        case 'total':
             return 't';
-        case 'Tele':
+        case 'tele':
+        case 'televote':
             return 'tv'
         default:
             return;