Add missing SVG folder

svg/default.css

@@ -0,0 +1,3 @@
+.elem {cursor: pointer;} 
+.elem, .link {opacity: 0.3;}
+.elem.selected, .link.selected {opacity: 1;}

svg/default.js

@@ -0,0 +1,110 @@
+function addItemToMapOfLists(mapOfLists, name, item) {
+  // mapOfLists = {
+  //   'key1': [item1, item2, ...],
+  //   'key2': [item3, item4, ...],
+  // }
+  if (mapOfLists[name].length > 0) {
+    if (!mapOfLists[name].includes(item)) {
+      mapOfLists[name].push(item);
+    }
+  } else {
+    mapOfLists[name] = [item];
+  }
+}
+
+function main() {
+  let elems = Array.from(document.getElementsByClassName('elem'));
+  let links = Array.from(document.getElementsByClassName('link'));
+
+  let elemsMap = {};
+  let linkedElems = {};
+  let linkedLinks = {};
+
+  elems.forEach(elem => {
+    let name = elem.classList[1];
+    elemsMap[name] = elem;
+    linkedElems[name] = [];
+    linkedLinks[name] = [];
+  });
+
+  links.forEach(link => {
+    let name1 = link.classList[1];
+    let name2 = link.classList[2];
+
+    if (elemsMap[name1]) {
+      if (elemsMap[name2]) {
+        let elem1 = elemsMap[name1];
+        let elem2 = elemsMap[name2];
+
+        addItemToMapOfLists(linkedElems, name1, elem2);
+        addItemToMapOfLists(linkedElems, name2, elem1);
+
+        addItemToMapOfLists(linkedLinks, name1, link);
+        addItemToMapOfLists(linkedLinks, name2, link);
+      }
+    }
+  });
+
+  let selectedElems = [];
+  let selectedLinks = [];
+  let selectedElemName = null;
+
+  function clearSelected() {
+    selectedElems.forEach(item => {
+      item.classList.remove('selected');
+    });
+    selectedElems = [];
+
+    selectedLinks.forEach(item => {
+      item.classList.remove('selected');
+    });
+    selectedLinks = [];
+  }
+
+  function selectAll() {
+    selectedElemName = null;
+
+    selectedElems = Array.from(elems);
+    selectedElems.forEach(item => {
+      item.classList.add('selected');
+    });
+
+    selectedLinks = Array.from(links);
+    selectedLinks.forEach(item => {
+      item.classList.add('selected');
+    });
+  }
+
+  function selectElem(elemName) {
+    if (elemName === selectedElemName) {
+      selectAll();
+
+    } else {
+      clearSelected();
+      selectedElemName = elemName;
+
+      elemsMap[elemName].classList.add('selected');
+      selectedElems.push(elemsMap[elemName]);
+
+      linkedElems[elemName].forEach(linkedElem => {
+        selectedElems.push(linkedElem);
+        linkedElem.classList.add('selected');
+      });
+
+      linkedLinks[elemName].forEach(linkedLink => {
+        selectedLinks.push(linkedLink);
+        linkedLink.classList.add('selected');
+      });
+    }
+  }
+
+  Object.keys(elemsMap).forEach(name => {
+    elemsMap[name].onclick = () => { selectElem(name); };
+  });
+
+  selectAll();
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+  main();
+});