Make users searchable in tree of skills

Related to #31
medialab · May 22, 2024 · 7def0f1 · 7def0f1
1 parent c2af02a
commit 7def0f1
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/site/js/search.js b/site/js/search.js
@@ -1,7 +1,7 @@
 import { sortBy } from "lodash";
 import unidecode from "unidecode";
 
-import {loadJSON} from "./loadMembers";
+import { loadJSON } from "./loadMembers";
 import cardsTemplate from "../templates/cards.html";
 
 const SEARCH_STATE = {
@@ -34,7 +34,6 @@ function normalizeString(string) {
 }
 
 function searchPeople(members, query, selectedSkills) {
-  console.log(query, selectedSkills);
   query = normalizeString(query);
   return members.filter((member) => {
     return (
@@ -43,7 +42,7 @@ function searchPeople(members, query, selectedSkills) {
           query
         )) &&
       (!selectedSkills.size ||
-        member.skillsArray.some((skill) => selectedSkills.has(skill)))
+        member.allSkillsArray.some((skill) => selectedSkills.has(skill)))
     );
   });
 }
@@ -61,11 +60,12 @@ loadJSON(function (data) {
       $skillsToggle.textContent = "-";
     }
   });
-  document.querySelectorAll("#skills-selector button").forEach((e) => {
+  document.querySelectorAll("#skills-selector").forEach((e) => {
     e.addEventListener("click", () => {
       const skill = e.textContent;
-      if (!SEARCH_STATE.selectedSkills.has(skill)) {
-        SEARCH_STATE.selectedSkills.add(skill);
+      const path = e.dataset.path;
+      if (!SEARCH_STATE.selectedSkills.has(path)) {
+        SEARCH_STATE.selectedSkills.add(path);
         const $skillLabel = document.createElement("li");
         $skillLabel.textContent = skill;
         const $closeButton = document.createElement("button");
@@ -74,7 +74,7 @@ loadJSON(function (data) {
         $selectedSkillsUl.appendChild($skillLabel);
         updateSearchResults();
         $closeButton.addEventListener("click", () => {
-          SEARCH_STATE.selectedSkills.delete(skill);
+          SEARCH_STATE.selectedSkills.delete(path);
           $selectedSkillsUl.removeChild($skillLabel);
           updateSearchResults();
         });

diff --git a/site/templates/mainPage.html b/site/templates/mainPage.html
@@ -38,6 +38,8 @@
             {% for category in categories %}
             <li
               style="height:{{ category.height }}px ; color:{{category.color}}"
+              data-path="{{ category.path }}"
+              id="skills-selector"
             >
               {{ category.label }}
             </li>
@@ -47,15 +49,23 @@
         <div class="sub-categories"></div>
         <ul>
           {% for category in subcategories %}
-          <li style="height:{{ category.height }}px ; color:{{category.color}}">
+          <li
+            style="height:{{ category.height }}px ; color:{{category.color}}"
+            data-path="{{ category.path }}"
+            id="skills-selector"
+          >
             {{ category.label }}
           </li>
           {% endfor %}
         </ul>
         <div class="sub-sub-categories"></div>
         <ul>
           {% for category in subsubcategories %}
-          <li style="height:{{ category.height }}px ; color:{{category.color}}">
+          <li
+            style="height:{{ category.height }}px ; color:{{category.color}}"
+            data-path="{{ category.path }}"
+            id="skills-selector"
+          >
             {{ category.label }}
           </li>
           {% endfor %}

diff --git a/src/format.js b/src/format.js
@@ -27,9 +27,16 @@ exports.formatMembers = function (formItems) {
       for (const key in item) {
         cleanItem[remap[key]] = item[key];
       }
-      cleanItem.allSkillsArray = cleanItem.allSkills.split(",").map((item) => {
-        return item.trim();
-      });
+      cleanItem.allSkillsArray = cleanItem.allSkills
+        .split(",")
+        .flatMap((item) => {
+          let paths = [];
+          const splittedPath = item.trim().split("/");
+          for (let i = 0; i < splittedPath.length; i++) {
+            paths.push(splittedPath.slice(0, i + 1).join("/"));
+          }
+          return paths;
+        });
       cleanItem.lastSkillsArray = cleanItem.allSkillsArray.map((item) => {
         return last(item.split("/"));
       });

diff --git a/src/searchTableUtils.js b/src/searchTableUtils.js
@@ -7,14 +7,10 @@ function findCategoryMetadata(tree, members, palette) {
 
   for (const member of members) {
     for (const skill of member.allSkillsArray) {
-      const paths = skill.split("/");
-      for (let i = 0; i < paths.length; i++) {
-        const path = paths.slice(0, i + 1).join("/");
-        if (!(path in memberCounts)) {
-          memberCounts[path] = 0;
-        }
-        memberCounts[path] += 1;
+      if (!(skill in memberCounts)) {
+        memberCounts[skill] = 0;
       }
+      memberCounts[skill] += 1;
     }
   }