Galaxy improvements (#628)

* galaxy: improve logging and performance reporting

* galaxy: add a full galaxy state test

* galaxy: optimize user self score computation

* galaxy: add 'generate_galaxy_test_data' command for development at scale

* galaxy: big refactor

Main changes:
  - Multiple Galaxy objects can now exist at the same time in DB. This allows for ruling a new galaxy while still
    displaying the old one.
  - The criteria to quickly know whether a user is a possible citizen is now a simple query on picture count. This
    avoids a very complicated query to database, that could often result in huge working memory load. With this change,
    it should be possible to run the galaxy even on a vanilla Postgres that didn't receive fine tuning for the Sith's
    galaxy.

* galaxy: template: make the galaxy graph work and be usable with a lot of stars

- Display focused star and its connections clearly
- Display star label faintly by default for other stars to avoid overloading the graph
- Hide non-focused lanes
- Avoid clicks on non-highlighted, too far stars
- Make the canva adapt its width to initial screen size, doesn't work dynamically

* galaxy: better docstrings

* galaxy: use bulk_create whenever possible

This is a big performance gain, especially for the tests.

Examples:

----

`./manage.py test galaxy.tests.GalaxyTest.test_full_galaxy_state`

Measurements averaged over 3 run on *my machine*™:
Before: 2min15s
After: 1m41s

----

`./manage.py generate_galaxy_test_data --user-pack-count 1`

Before: 48s
After: 25s

----

`./manage.py rule_galaxy` (for 600 citizen, corresponding to 1 user-pack)

Before: 14m4s
After: 12m34s

* core: populate: use a less ambiguous 'timezone.now()'

When running the tests around midnight, the day is changing, leading to some values being offset to the next day
depending on the timezone, and making some tests to fail. This ensure to use a less ambiguous `now` when populating
the database.

* write more extensive documentation

- add documentation to previously documented classes and functions and refactor some of the documented one, in accordance to the PEP257 and ReStructuredText standards ;
- add some type hints ;
- use a NamedTuple for the `Galaxy.compute_users_score` method instead of a raw tuple. Also change a little bit the logic in the function which call the latter ;
- add some additional parameter checks on a few functions ;
- change a little bit the logic of the log level setting for the galaxy related commands.

* galaxy: tests: split Model and View for more efficient data usage

---------

Co-authored-by: maréchal <thgirod@hotmail.com>

galaxy/templates/galaxy/user.jinja

@@ -1,37 +1,42 @@
 {% extends "core/base.jinja" %}
 
 {% block title %}
-{% trans user_name=user.get_display_name() %}{{ user_name }}'s Galaxy{% endtrans %}
+{% trans user_name=object.get_display_name() %}{{ user_name }}'s Galaxy{% endtrans %}
 {% endblock %}
 
 {% block content %}
-{% if object.galaxy_user %}
-    <p><a onclick="focus_node(get_node_from_id({{ object.id }}))">Reset on {{ object.get_display_name() }}</a></p>
-    <p>Self score: {{ object.galaxy_user.mass }}</p>
-    <table style="width: initial;">
-        <tr>
-          <th></th>
-          <th>Citizen</th>
-          <th>Score</th>
-          <th>Distance</th>
-          <th>Family</th>
-          <th>Pictures</th>
-          <th>Clubs</th>
-        </tr>
-    {% for lane in lanes %}
-        <tr>
-          <td><a onclick="focus_node(get_node_from_id({{ lane.other_star_id }}))">Locate</a></td>
-          <td><a href="{{ url("galaxy:user", user_id=lane.other_star_id) }}">{{ lane.other_star_name }}</a></td>
-          <td>{{ lane.other_star_mass }}</td>
-          <td>{{ lane.distance }}</td>
-          <td>{{ lane.family }}</td>
-          <td>{{ lane.pictures }}</td>
-          <td>{{ lane.clubs }}</td>
-        </tr>
-    {% endfor %}
-    </table>
+{% if object.current_star %}
+<div style="display: flex; flex-wrap: wrap;">
+    <div id="3d-graph"></div>
 
-  <div id="3d-graph" style="margin: 1em;"></div>
+    <div style="margin: 1em;">
+        <p><a onclick="focus_node(get_node_from_id({{ object.id }}))">Reset on {{ object.get_display_name() }}</a></p>
+        <p>Self score: {{ object.current_star.mass }}</p>
+        <table style="width: initial;">
+            <tr>
+              <th></th>
+              <th>Citizen</th>
+              <th>Score</th>
+              <th>Distance</th>
+              <th>Family</th>
+              <th>Pictures</th>
+              <th>Clubs</th>
+            </tr>
+        {% for lane in lanes %}
+            <tr>
+              <td><a onclick="focus_node(get_node_from_id({{ lane.other_star_id }}))">Locate</a></td>
+              <td><a href="{{ url("galaxy:user", user_id=lane.other_star_id) }}">{{ lane.other_star_name }}</a></td>
+              <td>{{ lane.other_star_mass }}</td>
+              <td>{{ lane.distance }}</td>
+              <td>{{ lane.family }}</td>
+              <td>{{ lane.pictures }}</td>
+              <td>{{ lane.clubs }}</td>
+            </tr>
+        {% endfor %}
+        </table>
+    </div>
+</div>
+<p>#{{ object.current_star.galaxy }}#</p>
 {% else %}
   <p>This citizen has not yet joined the galaxy</p>
 {% endif %}
@@ -53,9 +58,31 @@
       return Graph.graphData().nodes.find(n => n.id === id);
   }
 
+  function get_links_from_node_id(id) {
+      return Graph.graphData().links.filter(l => l.source.id === id || l.target.id === id);
+  }
+
   function focus_node(node) {
+      highlightNodes.clear();
+      highlightLinks.clear();
+
+      hoverNode = node || null;
+      if (node) { // collect neighbors and links for highlighting
+        get_links_from_node_id(node.id).forEach(link => {
+          highlightLinks.add(link);
+          highlightNodes.add(link.source);
+          highlightNodes.add(link.target);
+        });
+      }
+
+      // refresh node and link display
+      Graph
+        .nodeThreeObject(Graph.nodeThreeObject())
+        .linkWidth(Graph.linkWidth())
+        .linkDirectionalParticles(Graph.linkDirectionalParticles());
+
       // Aim at node from outside it
-      const distance = 200;
+      const distance = 42;
       const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
 
       const newPos = node.x || node.y || node.z
@@ -69,25 +96,44 @@
       );
   }
 
+  const highlightNodes = new Set();
+  const highlightLinks = new Set();
+  let hoverNode = null;
+
   document.addEventListener("DOMContentLoaded", () => {
+    var graph_div = document.getElementById('3d-graph');
     Graph = ForceGraph3D();
-    Graph(document.getElementById('3d-graph'));
+    Graph(graph_div);
     Graph
         .jsonUrl('{{ url("galaxy:data") }}')
-        .width(1000)
-        .height(700)
-        .nodeAutoColorBy('id')
-        .nodeLabel(node => `${node.name}`)
-        .onNodeClick(node => focus_node(node))
-        .linkDirectionalParticles(3)
-        .linkDirectionalParticleWidth(0.8)
-        .linkDirectionalParticleSpeed(0.006)
+        .width(graph_div.parentElement.clientWidth > 1200 ? 1200 : graph_div.parentElement.clientWidth) // Not perfect at all. JS-fu master from the future, please fix this :-)
+        .height(1000)
+        .enableNodeDrag(false) // allow easier navigation
+        .onNodeClick(node => {
+             camera = Graph.cameraPosition();
+             var distance = Math.sqrt(Math.pow(node.x - camera.x, 2) + Math.pow(node.y - camera.y, 2) + Math.pow(node.z - camera.z, 2))
+             if (distance < 120 || highlightNodes.has(node)) {
+                 focus_node(node);
+             }
+         })
+        .linkWidth(link => highlightLinks.has(link) ? 0.4 : 0.0)
+        .linkColor(link => highlightLinks.has(link) ? 'rgba(255,160,0,1)' : 'rgba(128,255,255,0.6)')
+        .linkVisibility(link => highlightLinks.has(link))
+        .nodeVisibility(node => highlightNodes.has(node) || node.mass > 4)
+        // .linkDirectionalParticles(link => highlightLinks.has(link) ? 3 : 1) // kinda buggy for now, and slows this a bit, but would be great to help visualize lanes
+        .linkDirectionalParticleWidth(0.2)
+        .linkDirectionalParticleSpeed(-0.006)
         .nodeThreeObject(node => {
           const sprite = new SpriteText(node.name);
           sprite.material.depthWrite = false; // make sprite background transparent
-          sprite.color = node.color;
-          sprite.textHeight = 5;
+          sprite.color = highlightNodes.has(node) ? node === hoverNode ? 'rgba(200,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.2)';
+          sprite.textHeight = 2;
+          sprite.center = new THREE.Vector2(1.2, 0.5);
           return sprite;
+        })
+        .onEngineStop( () =>  {
+          focus_node(get_node_from_id({{ object.id }}));
+          Graph.onEngineStop(() => {}); // don't call ourselves in a loop while moving the focus
         });
 
     // Set distance between stars
@@ -98,9 +144,6 @@
     Graph.d3Force('positionX', d3.forceX().strength(node => { return 1 - (1 / node.mass); }));
     Graph.d3Force('positionY', d3.forceY().strength(node => { return 1 - (1 / node.mass); }));
     Graph.d3Force('positionZ', d3.forceZ().strength(node => { return 1 - (1 / node.mass); }));
-
-    // Focus current user
-    setTimeout(() => focus_node(get_node_from_id({{ object.id }})), 1000);
   })
   </script>
 {% endblock %}