Graph de famille en frontend (#820)

* Remove graphviz and use cytoscape.js instead

* Frontend generated graphs
* Make installation easier and faster
* Better user experience
* Family api and improved interface
* Fix url history when using 0, improve button selection and reset reverse with reset button
* Use klay layout
* Add js translations and apply review comments

core/static/user/user_godfathers.scss

@@ -1,3 +1,85 @@
+.graph {
+  width: 100%;
+  height: 70vh;
+  display: block;
+}
+
+.graph-toolbar {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 30px;
+
+  .toolbar-column{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    min-width: 30%;
+  }
+
+  .toolbar-input {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    align-items: center;
+    width: 100%;
+
+    label {
+      max-width: 70%;
+      text-align: left;
+      margin-bottom: 0;
+    }
+
+    .depth-choice {
+      white-space: nowrap;
+      input[type="number"] {
+        -webkit-appearance: textfield;
+        -moz-appearance: textfield;
+        appearance: textfield;
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+          -webkit-appearance: none;
+        }
+      }
+      button {
+        background: none;
+        & > .fa {
+          border-radius: 50%;
+          font-size: 12px;
+          padding: 5px;
+        }
+        &:enabled > .fa {
+          background-color: #354a5f;
+          color: white;
+        }
+        &:enabled:hover > .fa {
+          color: white;
+          background-color: #35405f; // just a bit darker
+        }
+        &:disabled > .fa {
+          background-color: gray;
+          color: white;
+        }
+      }
+    }
+
+    input {
+      align-self: center;
+      max-width: 40px;
+    }
+  }
+
+  @media screen and (max-width: 500px) {
+    flex-direction: column;
+    gap: 20px;
+    .toolbar-column {
+      min-width: 100%;
+    }
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -9,6 +91,14 @@
     margin: 0;
   }
 }
+#family-tree-link {
+  display: inline-block;
+  margin-top: 10px;
+  text-align: center;
+  @media (min-width: 450px) {
+    margin-right: auto;
+  }
+}
 
 .users {
   display: flex;
@@ -90,7 +180,7 @@
         }
       }
 
-      &:last-of-type {
+      &.delete {
         margin-top: 10px;
         display: block;
         text-align: center;
@@ -98,7 +188,7 @@
 
         @media (max-width: 375px) {
           position: absolute;
-          bottom: 0%;
+          bottom: 0;
           right: 0;
         }
       }