From a94553eb2c6a4a931fb62f1f95431f42439129d3 Mon Sep 17 00:00:00 2001
From: mshd <mshd94@gmail.com>
Date: Wed, 4 Aug 2021 07:50:35 +0800
Subject: [PATCH] Occupations (#8)

* support occupations

* update youtube links

* video toast

* move type

* remove unused

* Occupation map

* Fix video

Co-authored-by: Orlando Groppo <orlando.groppo@gmail.com>
---
 .babelrc                                      |    9 -
 jest.config.js                                |    1 +
 package.json                                  |    8 +-
 src/components/EntityNodeCard.tsx             |   65 +-
 src/constants/occupations.ts                  | 1155 +++++++++++++++++
 src/constants/properties.ts                   |    5 +
 src/constants/religions.ts                    |    8 +-
 src/constants/videos.ts                       |   62 +-
 src/helpers/getVideoByQid.ts                  |    5 +
 src/hooks/useBookmarks.ts                     |   41 +
 src/hooks/usePreload.ts                       |   24 +
 src/hooks/useRootExpanded.ts                  |   24 +
 src/hooks/useVideoOverlay.ts                  |   17 +
 src/layout/VideoPopup.tsx                     |   59 +
 src/lib/addOccupations.ts                     |   30 +
 src/lib/addPeoplePillImage.test.ts            |   28 +-
 src/lib/formatEntity.ts                       |    3 +
 src/modals/DetailsModal.tsx                   |    8 +-
 src/modals/SettingsModal.tsx                  |    3 +-
 .../[langCode]/[propSlug]/[itemSlug].tsx      |    5 +-
 src/store/alertSlice.ts                       |   11 +-
 src/store/index.ts                            |    2 +
 src/types/Entity.ts                           |   11 +-
 src/types/RelData.ts                          |    8 -
 src/types/SparqlEmoji.ts                      |    5 +
 yarn.lock                                     |   24 +-
 26 files changed, 1505 insertions(+), 116 deletions(-)
 create mode 100644 src/constants/occupations.ts
 create mode 100644 src/helpers/getVideoByQid.ts
 create mode 100644 src/hooks/useBookmarks.ts
 create mode 100644 src/hooks/usePreload.ts
 create mode 100644 src/hooks/useRootExpanded.ts
 create mode 100644 src/hooks/useVideoOverlay.ts
 create mode 100644 src/layout/VideoPopup.tsx
 create mode 100644 src/lib/addOccupations.ts
 delete mode 100644 src/types/RelData.ts
 create mode 100644 src/types/SparqlEmoji.ts

diff --git a/.babelrc b/.babelrc
index 563b746..6ddefa9 100644
--- a/.babelrc
+++ b/.babelrc
@@ -21,15 +21,6 @@
           }
         ]
       ]
-    },
-    "test": {
-      "presets": ["env", "react"],
-      "plugins": [
-        [
-          "babel-plugin-styled-components",
-          { "displayName": true, "fileName": true }
-        ]
-      ]
     }
   }
 }
diff --git a/jest.config.js b/jest.config.js
index a92b0bd..c5e0147 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   setupFilesAfterEnv: ["./test/jest.setup.ts"],
+  moduleDirectories: ["node_modules", "src"],
 };
diff --git a/package.json b/package.json
index 86fd142..5051d63 100644
--- a/package.json
+++ b/package.json
@@ -15,29 +15,28 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.5.1",
     "@types/axios": "0.14.0",
-    "@types/d3-hierarchy": "2.0.0",
     "@types/luxon": "1.26.5",
     "@types/wikidata-sdk": "6.1.0",
     "axios": "0.21.1",
     "babel-plugin-macros": "3.1.0",
     "bootstrap": "4.6.0",
     "clsx": "1.1.1",
-    "d3-hierarchy": "2.0.0",
     "entitree-flex": "*",
     "jsonp-promise": "0.1.2",
     "local-storage": "2.0.0",
     "luxon": "1.27.0",
     "nanoid": "3.1.23",
-    "next": "10.1.3",
     "next-redux-wrapper": "6.0.2",
+    "next": "10.1.3",
     "ordinalize": "1.0.2",
-    "react": "17.0.2",
     "react-bootstrap": "1.6.0",
     "react-div-100vh": "0.6.0",
     "react-dom": "17.0.2",
+    "react-draggable": "4.4.3",
     "react-ga": "3.3.0",
     "react-icons": "4.2.0",
     "react-redux": "7.2.4",
+    "react": "17.0.2",
     "react-share": "4.4.0",
     "react-zoom-pan-pinch": "2.1.1",
     "redux": "4.1.0",
@@ -56,7 +55,6 @@
     "@types/styled-components": "5.1.9",
     "@typescript-eslint/eslint-plugin": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
-    "babel-jest": "26.6.3",
     "babel-plugin-styled-components": "1.12.0",
     "eslint": "7.25.0",
     "eslint-config-airbnb": "18.2.1",
diff --git a/src/components/EntityNodeCard.tsx b/src/components/EntityNodeCard.tsx
index a586c18..8d5df24 100644
--- a/src/components/EntityNodeCard.tsx
+++ b/src/components/EntityNodeCard.tsx
@@ -9,12 +9,6 @@ import {
   NICKNAME_ID,
 } from "constants/properties";
 import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
-import {
-  CHILD_BOOKMARK_SYMBOL,
-  PARENT_BOOKMARK_SYMBOL,
-  SIBLING_BOOKMARK_SYMBOL,
-  SPOUSE_BOOKMARK_SYMBOL,
-} from "constants/bookmarks";
 import { FaEye, FaFemale, FaMale, FaUser } from "react-icons/fa";
 import {
   FiChevronDown,
@@ -25,17 +19,13 @@ import {
 import { GiBigDiamondRing, GiPerson } from "react-icons/gi";
 import React, { memo, useEffect, useState } from "react";
 import { RiGroupLine, RiParentLine } from "react-icons/ri";
+import styled, { css, useTheme } from "styled-components";
 import {
-  preloadChildren,
-  preloadParents,
-  preloadSiblings,
-  preloadSpouses,
   toggleChildren,
   toggleParents,
   toggleSiblings,
   toggleSpouses,
 } from "actions/treeActions";
-import styled, { css, useTheme } from "styled-components";
 
 import { BsImage } from "react-icons/bs";
 import DetailsModal from "modals/DetailsModal";
@@ -53,47 +43,19 @@ import getGeniProfile from "services/geniService";
 import { isProperyId } from "helpers/isPropertyId";
 import { isValidImage } from "helpers/isValidImage";
 import { useAppSelector } from "store";
+import useBookmarks from "hooks/useBookmarks";
 import { useDispatch } from "react-redux";
-import { useRouter } from "next/router";
+import usePreload from "hooks/usePreload";
+import useRootExpanded from "hooks/useRootExpanded";
+import useVideoOverlay from "hooks/useVideoOverlay";
 
 export default memo(({ node }: { node: EntityNode }) => {
   const dispatch = useDispatch();
 
-  const router = useRouter();
-  useEffect(() => {
-    //preload connected nodes
-    if (!node.isRoot) {
-      dispatch(preloadChildren(node));
-      dispatch(preloadParents(node));
-      dispatch(preloadSiblings(node));
-      dispatch(preloadSpouses(node));
-    }
-
-    //Make sure root is expanded by default
-    if (node.isRoot) {
-      dispatch(toggleChildren(node, { followNavigation: false }));
-      dispatch(toggleParents(node, { followNavigation: false }));
-      dispatch(toggleSiblings(node, { followNavigation: false }));
-      dispatch(toggleSpouses(node, { followNavigation: false }));
-    }
-
-    //Expand bookmarks, applies only to non-root
-    const bookmark = router.query?.[node.treeId!];
-    if (bookmark && !node.isRoot) {
-      if (bookmark?.indexOf(CHILD_BOOKMARK_SYMBOL) > -1) {
-        dispatch(toggleChildren(node, { followNavigation: false }));
-      }
-      if (bookmark?.indexOf(PARENT_BOOKMARK_SYMBOL) > -1) {
-        dispatch(toggleParents(node, { followNavigation: false }));
-      }
-      if (bookmark?.indexOf(SIBLING_BOOKMARK_SYMBOL) > -1) {
-        dispatch(toggleSiblings(node, { followNavigation: false }));
-      }
-      if (bookmark?.indexOf(SPOUSE_BOOKMARK_SYMBOL) > -1) {
-        dispatch(toggleSpouses(node, { followNavigation: false }));
-      }
-    }
-  }, []);
+  usePreload(node);
+  useRootExpanded(node);
+  useBookmarks(node);
+  useVideoOverlay(node);
 
   const [showModal, setShowModal] = useState(false);
   const [lifeSpanInYears, setLifeSpanInYears] = useState(node.lifeSpanInYears);
@@ -395,6 +357,15 @@ export default memo(({ node }: { node: EntityNode }) => {
                 </span>
               </>
             )}
+            {settings.showExtraInfo &&
+              settings.extraInfo === "occupation" &&
+              node.occupations && (
+                <div className="occupation">
+                  {node.occupations.map((entry) => (
+                    <span title={entry.itemLabel}>{entry.emoji}</span>
+                  ))}
+                </div>
+              )}
           </div>
           <div className="dates">
             {node.lifeSpan || lifeSpanInYears
diff --git a/src/constants/occupations.ts b/src/constants/occupations.ts
new file mode 100644
index 0000000..6b82303
--- /dev/null
+++ b/src/constants/occupations.ts
@@ -0,0 +1,1155 @@
+import { SparqlEmoji } from "types/SparqlEmoji";
+
+export const OCCUPATIONS: SparqlEmoji[] = [
+  {
+    item: "http://www.wikidata.org/entity/Q47088054",
+    itemLabel: "Q47088054",
+    emoji: "🚘",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1302317",
+    itemLabel: "handball referee",
+    emoji: "🤾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👨🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👨🏻🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👨🏼🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👨🏽🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👨🏾🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👨🏿🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👩🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👩🏻🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👩🏼🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👩🏽🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👩🏾🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11631",
+    itemLabel: "astronaut",
+    emoji: "👩🏿🚀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q9402",
+    itemLabel: "ninja",
+    emoji: "🥷",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q42973",
+    itemLabel: "architect",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2859663",
+    itemLabel: "ice hockey referee",
+    emoji: "🏒",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1784753",
+    itemLabel: "répétiteur",
+    emoji: "🕺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5695233",
+    itemLabel: "heavy equipment operator",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2067634",
+    itemLabel: "quantity surveyor",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q58443379",
+    itemLabel: "construction painter",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10718797",
+    itemLabel: "nursing assistant",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10718797",
+    itemLabel: "nursing assistant",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2865776",
+    itemLabel: "Artificer",
+    emoji: "🎆",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q19397650",
+    itemLabel: "road worker",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3665646",
+    itemLabel: "basketball player",
+    emoji: "🏀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q27431213",
+    itemLabel: "cookery writer",
+    emoji: "🍳",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q73174840",
+    itemLabel: "construction contractor",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q55652056",
+    itemLabel: "diamond dealer",
+    emoji: "💎",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11303721",
+    itemLabel: "golfer",
+    emoji: "🏌",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q24033993",
+    itemLabel: "karate coach",
+    emoji: "🥋",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1708232",
+    itemLabel: "medalist",
+    emoji: "🏅",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3621342",
+    itemLabel: "field hockey umpire",
+    emoji: "🏑",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q6673651",
+    itemLabel: "literary",
+    emoji: "🖎",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q58443379",
+    itemLabel: "construction painter",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q6673651",
+    itemLabel: "literary",
+    emoji: "✍",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q7358",
+    itemLabel: "clown",
+    emoji: "🤡",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3014296",
+    itemLabel: "motorcycle rider",
+    emoji: "🏍",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5276395",
+    itemLabel: "gamer",
+    emoji: "🎮",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q9017214",
+    itemLabel: "karateka",
+    emoji: "🥋",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q73174840",
+    itemLabel: "construction contractor",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q811122",
+    itemLabel: "construction worker",
+    emoji: "👷",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13381863",
+    itemLabel: "fencer",
+    emoji: "🤺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1756083",
+    itemLabel: "pusher",
+    emoji: "🚇",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q82955",
+    itemLabel: "politician",
+    emoji: "👔",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3499072",
+    itemLabel: "chef",
+    emoji: "🍳",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q247797",
+    itemLabel: "customs officer",
+    emoji: "🛃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3951423",
+    itemLabel: "rock climber",
+    emoji: "🧗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q490253",
+    itemLabel: "professional golfer",
+    emoji: "🏌",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q48676230",
+    itemLabel: "registered player",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3621345",
+    itemLabel: "volleyball referee",
+    emoji: "🏐",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q48995125",
+    itemLabel: "amateur tennis player",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13381376",
+    itemLabel: "weightlifter",
+    emoji: "🏋",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q465501",
+    itemLabel: "stunt performer",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q12803959",
+    itemLabel: "runner",
+    emoji: "🏃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3502546",
+    itemLabel: "tennis umpire",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q62900222",
+    itemLabel: "juggler",
+    emoji: "🤹",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q384593",
+    itemLabel: "police officer",
+    emoji: "👮",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q19799599",
+    itemLabel: "mountain biker",
+    emoji: "🚵",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q4009406",
+    itemLabel: "sprinter",
+    emoji: "🏃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q289612",
+    itemLabel: "general contractor",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q721834",
+    itemLabel: "manager",
+    emoji: "🤼",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q4270517",
+    itemLabel: "skier",
+    emoji: "⛷",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q846750",
+    itemLabel: "jockey",
+    emoji: "🏇",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q628099",
+    itemLabel: "association football manager",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q948329",
+    itemLabel: "character actor",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q691522",
+    itemLabel: "construction foreman",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q716711",
+    itemLabel: "official",
+    emoji: "🏈",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q848466",
+    itemLabel: "courier",
+    emoji: "🚚",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q937857",
+    itemLabel: "association football player",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13561328",
+    itemLabel: "surfer",
+    emoji: "🏄",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1255632",
+    itemLabel: "flatulist",
+    emoji: "💨",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5357713",
+    itemLabel: "electrical contractor",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q859528",
+    itemLabel: "association football referee",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1340643",
+    itemLabel: "master builder",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5716684",
+    itemLabel: "dancer",
+    emoji: "💃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1141526",
+    itemLabel: "stripper",
+    emoji: "💃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q865935",
+    itemLabel: "baseball coach",
+    emoji: "⚾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q4070300",
+    itemLabel: "ballerina",
+    emoji: "🩰",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q806798",
+    itemLabel: "banker",
+    emoji: "🏦",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q289612",
+    itemLabel: "general contractor",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10843402",
+    itemLabel: "swimmer",
+    emoji: "🏊",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q17487600",
+    itemLabel: "real estate developer",
+    emoji: "🏘",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q23038514",
+    itemLabel: "sleeper",
+    emoji: "💤",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q713200",
+    itemLabel: "performing artist",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q270389",
+    itemLabel: "news presenter",
+    emoji: "📡",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q4951095",
+    itemLabel: "bowler",
+    emoji: "🎳",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3020534",
+    itemLabel: "ski teacher",
+    emoji: "⛷",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5420718",
+    itemLabel: "exotic dancer",
+    emoji: "💃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q46123106",
+    itemLabel: "teddy bear creator",
+    emoji: "🧸",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q186360",
+    itemLabel: "nurse",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q186360",
+    itemLabel: "nurse",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q805221",
+    itemLabel: "ballet dancer",
+    emoji: "🩰",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1075651",
+    itemLabel: "keyboardist",
+    emoji: "🎹",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q40348",
+    itemLabel: "lawyer",
+    emoji: "⚖",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q806805",
+    itemLabel: "bank teller",
+    emoji: "🏦",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q101204362",
+    itemLabel: "ultimate player",
+    emoji: "🥏",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q23038514",
+    itemLabel: "sleeper",
+    emoji: "🛌",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q42331263",
+    itemLabel: "American football coach",
+    emoji: "🏈",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q106961895",
+    itemLabel: "swimming instructor",
+    emoji: "🏊",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q691522",
+    itemLabel: "construction foreman",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1186921",
+    itemLabel: "baseball manager",
+    emoji: "⚾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5716684",
+    itemLabel: "dancer",
+    emoji: "🕺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1141526",
+    itemLabel: "stripper",
+    emoji: "🕺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q15709642",
+    itemLabel: "snowboarder",
+    emoji: "🏂",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5357713",
+    itemLabel: "electrical contractor",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1340643",
+    itemLabel: "master builder",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q42973",
+    itemLabel: "architect",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q331432",
+    itemLabel: "fisher",
+    emoji: "🎣",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q221488",
+    itemLabel: "pedestrian",
+    emoji: "🚶",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q43845",
+    itemLabel: "businessperson",
+    emoji: "💼",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1622552",
+    itemLabel: "Q1622552",
+    emoji: "💒",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5695233",
+    itemLabel: "heavy equipment operator",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2125610",
+    itemLabel: "cyclist",
+    emoji: "🚴",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5420718",
+    itemLabel: "exotic dancer",
+    emoji: "🕺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2067634",
+    itemLabel: "quantity surveyor",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2180295",
+    itemLabel: "mail carrier",
+    emoji: "🚚",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q55296227",
+    itemLabel: "baseball player-managers",
+    emoji: "⚾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1519593",
+    itemLabel: "fencing master",
+    emoji: "🤺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1856798",
+    itemLabel: "baseball umpire",
+    emoji: "⚾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1759246",
+    itemLabel: "theatrical producer",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1478408",
+    itemLabel: "association football national coach",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1784753",
+    itemLabel: "répétiteur",
+    emoji: "💃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1459149",
+    itemLabel: "schoolmaster",
+    emoji: "🏫",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2182752",
+    itemLabel: "basketball official",
+    emoji: "🏀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q20385120",
+    itemLabel: "Q20385120",
+    emoji: "🛤",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1147709",
+    itemLabel: "fireman",
+    emoji: "🚂",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q36180",
+    itemLabel: "writer",
+    emoji: "🖎",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q20424482",
+    itemLabel: "Q20424482",
+    emoji: "銅",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q156839",
+    itemLabel: "cook",
+    emoji: "🍳",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q36180",
+    itemLabel: "writer",
+    emoji: "✍",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q23038514",
+    itemLabel: "sleeper",
+    emoji: "😴",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q47088054",
+    itemLabel: "Q47088054",
+    emoji: "🚗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2962020",
+    itemLabel: "station master",
+    emoji: "🚉",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q7438308",
+    itemLabel: "football scout",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13218361",
+    itemLabel: "polo player",
+    emoji: "🏇",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q12840545",
+    itemLabel: "handball player",
+    emoji: "🤾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11500768",
+    itemLabel: "cooking expert",
+    emoji: "🍳",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q106191850",
+    itemLabel: "construction technology manager",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q7892860",
+    itemLabel: "grocer",
+    emoji: "🏪",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q17307272",
+    itemLabel: "circus performer",
+    emoji: "🎪",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q106560844",
+    itemLabel: "lacrosse coach",
+    emoji: "🥍",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q28143257",
+    itemLabel: "badminton coach",
+    emoji: "🏸",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13141064",
+    itemLabel: "badminton player",
+    emoji: "🏸",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q24336659",
+    itemLabel: "medal cutter",
+    emoji: "🪙",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q102382810",
+    itemLabel: "Q102382810",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q52316029",
+    itemLabel: "stocking weaver",
+    emoji: "🧦",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q20730881",
+    itemLabel: "volleyball coach",
+    emoji: "🏐",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q86629158",
+    itemLabel: "field hockey coach",
+    emoji: "🏑",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5482740",
+    itemLabel: "programmer",
+    emoji: "👨🏻💻",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5482740",
+    itemLabel: "programmer",
+    emoji: "👩🏽💻",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q12331975",
+    itemLabel: "Plejer",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q12331975",
+    itemLabel: "Plejer",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13415036",
+    itemLabel: "rugby player",
+    emoji: "🏉",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q53474871",
+    itemLabel: "satellite engineer",
+    emoji: "🛰",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5137571",
+    itemLabel: "basketball coach",
+    emoji: "🏀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13388586",
+    itemLabel: "softball player",
+    emoji: "🥎",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q20814940",
+    itemLabel: "caviste",
+    emoji: "🍷",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q17682262",
+    itemLabel: "lacrosse player",
+    emoji: "🥍",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13382519",
+    itemLabel: "table tennis player",
+    emoji: "🏓",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1020621",
+    itemLabel: "theatrical technician",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q20671900",
+    itemLabel: "weightmaster",
+    emoji: "🛤",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q21778977",
+    itemLabel: "building engineer",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13365201",
+    itemLabel: "handball coach",
+    emoji: "🤾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q19204627",
+    itemLabel: "American football player",
+    emoji: "🏈",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q48673045",
+    itemLabel: "professional tennis player",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13382191",
+    itemLabel: "water polo referee",
+    emoji: "🤽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q17279652",
+    itemLabel: "basketball assistant coach",
+    emoji: "🏀",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10843263",
+    itemLabel: "field hockey player",
+    emoji: "🏑",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q5137576",
+    itemLabel: "ice hockey coach",
+    emoji: "🏒",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13219424",
+    itemLabel: "tennis coach",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10871364",
+    itemLabel: "baseball player",
+    emoji: "⚾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q21778977",
+    itemLabel: "building engineer",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q66060315",
+    itemLabel: "telescope maker",
+    emoji: "🔭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13474373",
+    itemLabel: "professional wrestler",
+    emoji: "🤼",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q104737963",
+    itemLabel: "Q104737963",
+    emoji: "🪁",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q9648008",
+    itemLabel: "banjoist",
+    emoji: "🪕",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q58487031",
+    itemLabel: "typist",
+    emoji: "🖎",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q58487031",
+    itemLabel: "typist",
+    emoji: "✍",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q19713790",
+    itemLabel: "Q19713790",
+    emoji: "🗡",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q15117302",
+    itemLabel: "volleyball player",
+    emoji: "🏐",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q88214543",
+    itemLabel: "golf coach",
+    emoji: "🏌",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q105064360",
+    itemLabel: "Mahjongist",
+    emoji: "🀄",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q50992309",
+    itemLabel: "Q50992309",
+    emoji: "🚉",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q38088701",
+    itemLabel: "match official",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q63349579",
+    itemLabel: "handball national coach",
+    emoji: "🤾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q9352089",
+    itemLabel: "spy",
+    emoji: "🕵",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q65218872",
+    itemLabel: "Q65218872",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q18052877",
+    itemLabel: "assistant football coach",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q9355558",
+    itemLabel: "film accompanist",
+    emoji: "🎦",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q18204663",
+    itemLabel: "director of football",
+    emoji: "⚽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q63183273",
+    itemLabel: "piarist father",
+    emoji: "✝",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13608061",
+    itemLabel: "registered nurse",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q13608061",
+    itemLabel: "registered nurse",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10349745",
+    itemLabel: "racing automobile driver",
+    emoji: "🏎",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10833314",
+    itemLabel: "tennis player",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q84507395",
+    itemLabel: "theater and performance scholar",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10385895",
+    itemLabel: "nursing technician",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10385895",
+    itemLabel: "nursing technician",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11774891",
+    itemLabel: "ice hockey player",
+    emoji: "🏒",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q27156775",
+    itemLabel: "rope dancer",
+    emoji: "💃",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q85790021",
+    itemLabel: "nurse midwife",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q85790021",
+    itemLabel: "nurse midwife",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q98636346",
+    itemLabel: "table tennis coach",
+    emoji: "🏓",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q11336312",
+    itemLabel: "professional baseball player",
+    emoji: "⚾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q63755054",
+    itemLabel: "building contractor",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2259451",
+    itemLabel: "stage actor",
+    emoji: "🎭",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q18544928",
+    itemLabel: "cue sports player",
+    emoji: "🎱",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q10514696",
+    itemLabel: "executive chef",
+    emoji: "🍳",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q88192501",
+    itemLabel: "tennis instructor",
+    emoji: "🎾",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q3389507",
+    itemLabel: "pizzaiole",
+    emoji: "🍕",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q28834672",
+    itemLabel: "announcer",
+    emoji: "📺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q106191850",
+    itemLabel: "construction technology manager",
+    emoji: "🚧",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q27156775",
+    itemLabel: "rope dancer",
+    emoji: "🕺",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q16699775",
+    itemLabel: "Q16699775",
+    emoji: "🛤",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q6048774",
+    itemLabel: "lactation consultant",
+    emoji: "🤱",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q2309784",
+    itemLabel: "sport cyclist",
+    emoji: "🚴",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q16495453",
+    itemLabel: "Q16495453",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q16495453",
+    itemLabel: "Q16495453",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q21086673",
+    itemLabel: "Q21086673",
+    emoji: "👨⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q21086673",
+    itemLabel: "Q21086673",
+    emoji: "👩⚕️",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q18482969",
+    itemLabel: "cemeteriologist",
+    emoji: "⛼",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q97789791",
+    itemLabel: "engine shed worker",
+    emoji: "🚂",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q56746433",
+    itemLabel: "catch trainer",
+    emoji: "🤼",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q1622272",
+    itemLabel: "university teacher",
+    emoji: "👨🏫",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q17524364",
+    itemLabel: "water polo player",
+    emoji: "🤽",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q63755054",
+    itemLabel: "building contractor",
+    emoji: "🏗",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q12299841",
+    itemLabel: "cricketer",
+    emoji: "🏏",
+  },
+  {
+    item: "http://www.wikidata.org/entity/Q102382810",
+    itemLabel: "Q102382810",
+    emoji: "🚧",
+  },
+];
+//https://query.wikidata.org/#%23Occupations%20with%20emojis%0ASELECT%20DISTINCT%20%3Fitem%20%3FitemLabel%20%3Femoji%20%0AWHERE%20%0A%7B%0A%20%20%7B%20%3Fitem%20wdt%3AP31%20wd%3AQ12737077.%20%7D%0A%20%20UNION%20%7B%20%3Fitem%20wdt%3AP31%2Fwdt%3AP279%2a%20wd%3AQ28640%20%7D%0A%20%20.%0A%20%20%7B%20%3Fitem%20wdt%3AP487%20%3Femoji%20.%20%7D%0A%20%20UNION%0A%20%20%7B%20%3Fitem%20wdt%3AP425%20%3Ffield.%20%23use%20emoji%20of%20field%20of%20occupation%0A%20%20%20%20%3Ffield%20wdt%3AP487%20%3Femoji%20.%7D%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%7D%0ALIMIT%20800
+
+export const OCCUPATION_MAP = OCCUPATIONS.reduce((map, curr) => {
+  map[curr.item] = curr;
+  return map;
+}, {});
diff --git a/src/constants/properties.ts b/src/constants/properties.ts
index 3806870..d211d8c 100644
--- a/src/constants/properties.ts
+++ b/src/constants/properties.ts
@@ -25,6 +25,7 @@ export const MOTHER_ID = "P25";
 export const NAME_IN_KANA_ID = "P1814";
 export const NICKNAME_ID = "P1449";
 export const NUMBER_OF_CHILDREN_ID = "P1971";
+export const OCCUPATION_ID = "P106";
 export const PARTNER_ID = "P451"; // unmarried partner
 export const RELIGION_ID = "P140";
 export const SIBLINGS_ID = "P3373";
@@ -230,4 +231,8 @@ export const EXTRA_INFO_OPTIONS = [
     code: "religion",
     title: "Religion",
   },
+  {
+    code: "occupation",
+    title: "Occupations",
+  },
 ];
diff --git a/src/constants/religions.ts b/src/constants/religions.ts
index e2e76a1..ff57f86 100644
--- a/src/constants/religions.ts
+++ b/src/constants/religions.ts
@@ -1,10 +1,6 @@
-export type Religion = {
-  item: string;
-  itemLabel: string;
-  emoji: string;
-};
+import { SparqlEmoji } from "types/SparqlEmoji";
 
-export const RELIGIONS: Religion[] = [
+export const RELIGIONS: SparqlEmoji[] = [
   {
     item: "http://www.wikidata.org/entity/Q1458238",
     itemLabel: "United Reformed Church",
diff --git a/src/constants/videos.ts b/src/constants/videos.ts
index 3e0c7d0..3af6b32 100644
--- a/src/constants/videos.ts
+++ b/src/constants/videos.ts
@@ -1,5 +1,63 @@
-export default {
+export interface VideoLink {
+  qid: string;
+  url: string;
+  channel?: string;
+  label?: string;
+  title?: string;
+  embedLink?: string;
+}
+
+export const YOUTUBE_LINKS: Record<string, VideoLink> = {
   Q8409: {
-    src: "https://www.youtube.com/embed/NgK4fJ709Xo",
+    qid: "Q8409",
+    url: "https://www.youtube.com/watch?v=NgK4fJ709Xo",
+    embedLink: "https://www.youtube.com/embed/NgK4fJ709Xo",
+    channel: "UsefulCharts",
+    label: "Alexander the great",
+  },
+  Q6279: {
+    qid: "Q6279",
+    url: "https://www.youtube.com/watch?v=L-2eYJBZKXY",
+    embedLink: "https://www.youtube.com/embed/L-2eYJBZKXY",
+    channel: "UsefulCharts",
+    label: "Joe Biden",
+  },
+  Q56226: {
+    qid: "Q56226",
+    url: "https://www.youtube.com/watch?v=SjKB3BQlgks",
+    embedLink: "https://www.youtube.com/embed/SjKB3BQlgks",
+    channel: "UsefulCharts",
+    label: "Kim Jong-un",
+  },
+  Q180589: {
+    qid: "Q180589",
+    url: "https://www.youtube.com/watch?v=b48PqY2hd38",
+    embedLink: "https://www.youtube.com/embed/b48PqY2hd38",
+    channel: "UsefulCharts",
+    label: "Boris Johnson",
+  },
+  Q9696: {
+    qid: "Q9696",
+    url: "https://www.youtube.com/watch?v=F9TZ5UHMPAE",
+    embedLink: "https://www.youtube.com/embed/F9TZ5UHMPAE",
+    title: "Kennedy Family Tree",
+    channel: "UsefulCharts",
+    label: "John F. Kennedy",
+  },
+  Q76988: {
+    qid: "Q76988",
+    url: "https://www.youtube.com/watch?v=hr1hisvjoAI",
+    embedLink: "https://www.youtube.com/embed/hr1hisvjoAI",
+    title: "Rothschild Family Tree",
+    channel: "UsefulCharts",
+    label: "Mayer Amschel Rothschild",
+  },
+  Q355288: {
+    qid: "Q355288",
+    url: "https://www.youtube.com/watch?v=sFqxYkraTrY",
+    embedLink: "https://www.youtube.com/embed/sFqxYkraTrY",
+    title: "Berry Gordy Family Tree | Jimmy Carter's Motown Cousins",
+    channel: "UsefulCharts",
+    label: "Berry Gordy",
   },
 };
diff --git a/src/helpers/getVideoByQid.ts b/src/helpers/getVideoByQid.ts
new file mode 100644
index 0000000..709dbcf
--- /dev/null
+++ b/src/helpers/getVideoByQid.ts
@@ -0,0 +1,5 @@
+import { YOUTUBE_LINKS } from "../constants/videos";
+
+export default function getVideoByQid(qid: string) {
+  return YOUTUBE_LINKS[qid];
+}
diff --git a/src/hooks/useBookmarks.ts b/src/hooks/useBookmarks.ts
new file mode 100644
index 0000000..6f2ea2a
--- /dev/null
+++ b/src/hooks/useBookmarks.ts
@@ -0,0 +1,41 @@
+import {
+  CHILD_BOOKMARK_SYMBOL,
+  PARENT_BOOKMARK_SYMBOL,
+  SIBLING_BOOKMARK_SYMBOL,
+  SPOUSE_BOOKMARK_SYMBOL,
+} from "constants/bookmarks";
+import {
+  toggleChildren,
+  toggleParents,
+  toggleSiblings,
+  toggleSpouses,
+} from "actions/treeActions";
+
+import { EntityNode } from "types/EntityNode";
+import { useDispatch } from "react-redux";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+export default function useBookmarks(node: EntityNode) {
+  const dispatch = useDispatch();
+  const router = useRouter();
+
+  useEffect(() => {
+    //Expand bookmarks, applies only to non-root
+    const bookmark = router.query?.[node.treeId!];
+    if (bookmark && !node.isRoot) {
+      if (bookmark?.indexOf(CHILD_BOOKMARK_SYMBOL) > -1) {
+        dispatch(toggleChildren(node, { followNavigation: false }));
+      }
+      if (bookmark?.indexOf(PARENT_BOOKMARK_SYMBOL) > -1) {
+        dispatch(toggleParents(node, { followNavigation: false }));
+      }
+      if (bookmark?.indexOf(SIBLING_BOOKMARK_SYMBOL) > -1) {
+        dispatch(toggleSiblings(node, { followNavigation: false }));
+      }
+      if (bookmark?.indexOf(SPOUSE_BOOKMARK_SYMBOL) > -1) {
+        dispatch(toggleSpouses(node, { followNavigation: false }));
+      }
+    }
+  }, []);
+}
diff --git a/src/hooks/usePreload.ts b/src/hooks/usePreload.ts
new file mode 100644
index 0000000..363defe
--- /dev/null
+++ b/src/hooks/usePreload.ts
@@ -0,0 +1,24 @@
+import {
+  preloadChildren,
+  preloadParents,
+  preloadSiblings,
+  preloadSpouses,
+} from "actions/treeActions";
+
+import { EntityNode } from "types/EntityNode";
+import { useDispatch } from "react-redux";
+import { useEffect } from "react";
+
+export default function usePreload(node: EntityNode) {
+  const dispatch = useDispatch();
+
+  //preload connected nodes
+  useEffect(() => {
+    if (!node.isRoot) {
+      dispatch(preloadChildren(node));
+      dispatch(preloadParents(node));
+      dispatch(preloadSiblings(node));
+      dispatch(preloadSpouses(node));
+    }
+  }, []);
+}
diff --git a/src/hooks/useRootExpanded.ts b/src/hooks/useRootExpanded.ts
new file mode 100644
index 0000000..299a75c
--- /dev/null
+++ b/src/hooks/useRootExpanded.ts
@@ -0,0 +1,24 @@
+import {
+  toggleChildren,
+  toggleParents,
+  toggleSiblings,
+  toggleSpouses,
+} from "actions/treeActions";
+
+import { EntityNode } from "types/EntityNode";
+import { useDispatch } from "react-redux";
+import { useEffect } from "react";
+
+export default function useRootExpanded(node: EntityNode) {
+  const dispatch = useDispatch();
+
+  //Make sure root is expanded by default
+  useEffect(() => {
+    if (node.isRoot) {
+      dispatch(toggleChildren(node, { followNavigation: false }));
+      dispatch(toggleParents(node, { followNavigation: false }));
+      dispatch(toggleSiblings(node, { followNavigation: false }));
+      dispatch(toggleSpouses(node, { followNavigation: false }));
+    }
+  }, []);
+}
diff --git a/src/hooks/useVideoOverlay.ts b/src/hooks/useVideoOverlay.ts
new file mode 100644
index 0000000..c86694d
--- /dev/null
+++ b/src/hooks/useVideoOverlay.ts
@@ -0,0 +1,17 @@
+import { EntityNode } from "types/EntityNode";
+import getVideoByQid from "helpers/getVideoByQid";
+import { setVideo } from "store/alertSlice";
+import { useDispatch } from "react-redux";
+import { useEffect } from "react";
+
+export default function useVideoOverlay(node: EntityNode) {
+  const dispatch = useDispatch();
+
+  //Make sure root is expanded by default
+  useEffect(() => {
+    const video = getVideoByQid(node.id);
+    if (video) {
+      dispatch(setVideo(video));
+    }
+  }, []);
+}
diff --git a/src/layout/VideoPopup.tsx b/src/layout/VideoPopup.tsx
new file mode 100644
index 0000000..d919f07
--- /dev/null
+++ b/src/layout/VideoPopup.tsx
@@ -0,0 +1,59 @@
+import Draggable from "react-draggable";
+import React from "react";
+import { Toast } from "react-bootstrap";
+import { setVideo } from "store/alertSlice";
+import styled from "styled-components";
+import { useAppSelector } from "store";
+import { useDispatch } from "react-redux";
+
+export default function VideoPopup() {
+  const dispatch = useDispatch();
+  const video = useAppSelector(({ alert }) => alert.video);
+
+  if (!video) return null;
+
+  return (
+    <Draggable>
+      <StyledToast onClose={() => dispatch(setVideo(undefined))} show>
+        <Toast.Header>
+          <strong className="mr-auto">{video.label}</strong>
+        </Toast.Header>
+        <StyledBody>
+          <IFrameWrapper className="mb-2">
+            <iframe
+              src="https://www.youtube.com/embed/NgK4fJ709Xo"
+              title="YouTube video player"
+              allowFullScreen
+            />
+          </IFrameWrapper>
+        </StyledBody>
+      </StyledToast>
+    </Draggable>
+  );
+}
+
+const IFrameWrapper = styled.div`
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const StyledToast = styled(Toast)`
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 330px;
+  cursor: move;
+  z-index: 99;
+`;
+
+const StyledBody = styled(Toast.Body)`
+  padding-bottom: 5px;
+`;
diff --git a/src/lib/addOccupations.ts b/src/lib/addOccupations.ts
new file mode 100644
index 0000000..3a90019
--- /dev/null
+++ b/src/lib/addOccupations.ts
@@ -0,0 +1,30 @@
+import { Entity, SimpleClaim } from "types/Entity";
+
+import { OCCUPATION_ID } from "constants/properties";
+import { OCCUPATION_MAP } from "constants/occupations";
+import { SparqlEmoji } from "types/SparqlEmoji";
+
+export default function addOccupations(entity: Entity) {
+  const occs = entity.simpleClaims?.[OCCUPATION_ID];
+  if (occs !== undefined) {
+    const emojis = getEmojisByOccupations(entity.simpleClaims?.[OCCUPATION_ID]);
+    entity.occupations = emojis;
+  }
+}
+function getEmojisByOccupations(
+  occupations: SimpleClaim[] | undefined,
+): SparqlEmoji[] {
+  // const occupations = entity.simpleClaims?.[OCCUPATION_ID];
+  if (!occupations) {
+    return [];
+  }
+
+  return occupations.reduce((sparqlEmojis: SparqlEmoji[], occupation) => {
+    if (occupation.value) {
+      const occupationEmoji =
+        OCCUPATION_MAP["http://www.wikidata.org/entity/" + occupation.value];
+      if (occupationEmoji) return sparqlEmojis.concat(occupationEmoji);
+    }
+    return sparqlEmojis;
+  }, []);
+}
diff --git a/src/lib/addPeoplePillImage.test.ts b/src/lib/addPeoplePillImage.test.ts
index 139aa81..c6a5092 100644
--- a/src/lib/addPeoplePillImage.test.ts
+++ b/src/lib/addPeoplePillImage.test.ts
@@ -1,13 +1,21 @@
+import { Entity } from "types/Entity";
+import { INSTANCE_OF_ID } from "constants/properties";
 import addPeoplePillImage from "./addPeoplePillImage";
 import getWikidataEntities from "../wikidata/getWikidataEntities";
-import formatEntity from "./formatEntity";
 
-// describe("addPeoplePillImage", () => {
-//   test("it should give the correct name", async () => {
-//     const id = "Q47122";
-//     const res = await getWikidataEntities({ ids: [id] });
-//     const entity = formatEntity(res[id], "en");
-//     addPeoplePillImage(entity);
-//     expect(res[id].id).toBe("enrique-iglesias");
-//   });
-// });
+describe("addPeoplePillImage", () => {
+  test("it should give the correct name", async () => {
+    const id = "Q47122";
+    const res = await getWikidataEntities({ ids: [id] });
+
+    const entity: Entity = {
+      ...res[id],
+      simpleClaims: {
+        [INSTANCE_OF_ID]: [{ value: "Q5", qualifiers: {} }],
+      },
+    };
+
+    addPeoplePillImage(entity);
+    expect(entity.peoplepillSlug).toBe("enrique-iglesias");
+  });
+});
diff --git a/src/lib/formatEntity.ts b/src/lib/formatEntity.ts
index c0f61ae..e8719af 100644
--- a/src/lib/formatEntity.ts
+++ b/src/lib/formatEntity.ts
@@ -23,6 +23,7 @@ import addIsHuman from "./addIsHuman";
 import addIsInfantDeath from "./addIsInfantDeath";
 import addLabel from "./addLabel";
 import addLifeSpan from "./addLifeSpan";
+import addOccupations from "./addOccupations";
 import addPeoplePillImage from "./addPeoplePillImage";
 import addReligion from "./addReligion";
 import addSecondLabels from "./addSecondLabels";
@@ -84,6 +85,8 @@ export default function formatEntity(
 
   addReligion(entity);
 
+  addOccupations(entity);
+
   addEyeColor(entity);
   addHairColor(entity);
 
diff --git a/src/modals/DetailsModal.tsx b/src/modals/DetailsModal.tsx
index 8e0b81c..1331c90 100644
--- a/src/modals/DetailsModal.tsx
+++ b/src/modals/DetailsModal.tsx
@@ -11,7 +11,7 @@ import styled from "styled-components";
 import { useAppSelector } from "store";
 import { useDispatch } from "react-redux";
 import { useRouter } from "next/router";
-import videos from "constants/videos";
+import getVideoByQid from "../helpers/getVideoByQid";
 
 export default function DetailsModal({ node, onHideModal, nodeImages }) {
   const { languageCode } = useAppSelector(({ settings }) => settings);
@@ -52,6 +52,8 @@ export default function DetailsModal({ node, onHideModal, nodeImages }) {
     }
   }, [languageCode, node.birthPlaceId, node.deathPlaceId]);
 
+  const video = getVideoByQid(node.id);
+
   return (
     <StyledModal show onHide={onHideModal}>
       <Modal.Header closeButton>
@@ -67,10 +69,10 @@ export default function DetailsModal({ node, onHideModal, nodeImages }) {
         </Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        {videos[node.id] && (
+        {video && (
           <IFrameWrapper className="mb-2">
             <iframe
-              src={videos[node.id].src}
+              src={video.embedLink}
               title="YouTube video player"
               frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/src/modals/SettingsModal.tsx b/src/modals/SettingsModal.tsx
index 96ac439..47fe619 100644
--- a/src/modals/SettingsModal.tsx
+++ b/src/modals/SettingsModal.tsx
@@ -279,7 +279,8 @@ export default function SettingsModal({ show, onHideModal }) {
           {showExtraInfo && (
             <Dropdown className="imageDropdown d-inline-block ml-1">
               <Dropdown.Toggle as={CustomToggle}>
-                {EXTRA_INFO_OPTIONS.find((c) => c.code === extraInfo)?.title}
+                {EXTRA_INFO_OPTIONS.find((c) => c.code === extraInfo)
+                  ?.title || <i>Select</i>}
               </Dropdown.Toggle>
               <Dropdown.Menu>
                 {EXTRA_INFO_OPTIONS.map((extraOption) => (
diff --git a/src/pages/[langCode]/[propSlug]/[itemSlug].tsx b/src/pages/[langCode]/[propSlug]/[itemSlug].tsx
index 6ff5f2e..4380d98 100644
--- a/src/pages/[langCode]/[propSlug]/[itemSlug].tsx
+++ b/src/pages/[langCode]/[propSlug]/[itemSlug].tsx
@@ -18,12 +18,10 @@ import React from "react";
 import { SITE_NAME } from "constants/meta";
 import SearchBar from "layout/SearchBar";
 import TreeLoader from "layout/TreeLoader";
-import fs from "fs";
-import getConfig from "next/config";
+import VideoPopup from "../../../layout/VideoPopup";
 import getWikipediaArticle from "wikipedia/getWikipediaArticle";
 import { isItemId } from "helpers/isItemId";
 import { loadEntity } from "treeHelpers/loadEntity";
-import path from "path";
 import { setLangCode } from "store/settingsSlice";
 import styled from "styled-components";
 
@@ -70,6 +68,7 @@ const TreePage = ({
         <Header />
         <SearchBar />
         {loadingEntity ? <TreeLoader /> : <DrawingArea />}
+        <VideoPopup />
       </Page>
       <Footer />
     </>
diff --git a/src/store/alertSlice.ts b/src/store/alertSlice.ts
index abc40c5..d6e8031 100644
--- a/src/store/alertSlice.ts
+++ b/src/store/alertSlice.ts
@@ -1,7 +1,10 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
+import { VideoLink } from "constants/videos";
+
 type AlertState = {
   errors: string[];
+  video?: VideoLink;
 };
 
 const initialState: AlertState = {
@@ -15,12 +18,12 @@ export const alertSlice = createSlice({
     setError: (state, { payload }: PayloadAction<string>) => {
       state.errors?.push(payload);
     },
+    setVideo: (state, { payload }: PayloadAction<VideoLink | undefined>) => {
+      state.video = payload;
+    },
   },
 });
 
-export const { setError } = alertSlice.actions;
-
-export const showError = (message: string) => (dispatch) =>
-  dispatch(setError(message));
+export const { setError, setVideo } = alertSlice.actions;
 
 export default alertSlice.reducer;
diff --git a/src/store/index.ts b/src/store/index.ts
index 167adc6..4179a2c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -17,11 +17,13 @@ import {
 } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
+import alertReducer from "./alertSlice";
 import settingsReducer from "./settingsSlice";
 import storage from "redux-persist/lib/storage";
 import treeReducer from "./treeSlice";
 
 const rootReducer = combineReducers({
+  alert: alertReducer,
   settings: settingsReducer,
   tree: treeReducer,
 });
diff --git a/src/types/Entity.ts b/src/types/Entity.ts
index 5b3bc3b..63612b9 100644
--- a/src/types/Entity.ts
+++ b/src/types/Entity.ts
@@ -2,7 +2,7 @@ import { Claim } from "./Claim";
 import { Country } from "constants/countries";
 import { LangCode } from "types/Lang";
 import { PropColor } from "constants/eyeHairColors";
-import { Religion } from "constants/religions";
+import { SparqlEmoji } from "types/SparqlEmoji";
 
 export interface Sitelink {
   site: string;
@@ -47,8 +47,8 @@ export interface Entity extends WikiEntity {
   birthName?: string;
   birthPlaceId?: string;
   birthYear?: string;
-  childrenTreeIds?: string[];
   childrenCount?: number;
+  childrenTreeIds?: string[];
   countryOfCitizenship?: Country;
   deathDate?: string;
   deathPlaceId?: string;
@@ -78,13 +78,14 @@ export interface Entity extends WikiEntity {
   loadingParents?: boolean;
   loadingSiblings?: boolean;
   loadingSpouses?: boolean;
+  nameInKana?: string;
+  nickName?: string;
+  occupations?: SparqlEmoji[];
   parentsTreeIds?: string[];
   peoplepillImageUrl?: string;
   peoplepillSlug?: string;
-  religion?: Religion;
+  religion?: SparqlEmoji;
   rightIds?: string[];
-  nickName?: string;
-  nameInKana?: string;
   siblingsTreeIds?: string[];
   simpleClaims?: SimpleClaims; //TODO not available on client
   spousesTreeIds?: string[];
diff --git a/src/types/RelData.ts b/src/types/RelData.ts
deleted file mode 100644
index d491cc5..0000000
--- a/src/types/RelData.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Entity } from "./Entity";
-import { EntityNode } from "types/EntityNode";
-import { HierarchyLink } from "d3-hierarchy";
-
-// export interface RelData extends HierarchyLink<Entity> {
-//   source: EntityNode;
-//   target: EntityNode;
-// }
diff --git a/src/types/SparqlEmoji.ts b/src/types/SparqlEmoji.ts
new file mode 100644
index 0000000..877b88f
--- /dev/null
+++ b/src/types/SparqlEmoji.ts
@@ -0,0 +1,5 @@
+export type SparqlEmoji = {
+  item: string;
+  itemLabel: string;
+  emoji: string;
+};
diff --git a/yarn.lock b/yarn.lock
index 3c58b67..2144cb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -791,11 +791,6 @@
   dependencies:
     classnames "*"
 
-"@types/d3-hierarchy@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz"
-  integrity sha512-YxdskUvwzqggpnSnDQj4KVkicgjpkgXn/g/9M9iGsiToLS3nG6Ytjo1FoYhYVAAElV/fJBGVL3cQ9Hb7tcv+lw==
-
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -963,7 +958,7 @@
 
 "@types/wikidata-sdk@6.1.0":
   version "6.1.0"
-  resolved "https://registry.npmjs.org/@types/wikidata-sdk/-/wikidata-sdk-6.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/wikidata-sdk/-/wikidata-sdk-6.1.0.tgz#9775573cdaa25462461caf9023dade6917ea4ad7"
   integrity sha512-4IG0mbD97vnpNUCCsybYOZvXDPOgv4riDHllKKkv4yKM90md2j2lH3yqp2pnPURHS79tbQibZybANHT++J25fA==
   dependencies:
     wikidata-sdk "*"
@@ -1312,7 +1307,7 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-jest@26.6.3, babel-jest@^26.6.3:
+babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz"
   integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
@@ -2036,11 +2031,6 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
-d3-hierarchy@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz"
-  integrity sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==
-
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz"
@@ -4972,7 +4962,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5104,6 +5094,14 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-draggable@4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
+  integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-ga@3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz"