Possibility to toggle the legend panel

gaardhus · Apr 29, 2022 · fad7720 · fad7720
1 parent 535b3d9
commit fad7720
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 17 deletions.
diff --git a/css/widget.css b/css/widget.css
@@ -47,7 +47,7 @@
   top: 10px;
   right: 10px;
   width: 250px;
-  height: calc(100% - 20px);
+  height: 100%;
 }
 
 .ipysigma-widget .ipysigma-graph-description {
@@ -129,7 +129,7 @@
 
 .ipysigma-widget .ipysigma-information-display {
   width: 100%;
-  height: calc(100% - 45px - 5px - 20px);
+  height: calc(100% - 45px - 5px - 20px - 25px);
   overflow-y: auto;
   background-color: white;
   border: 1px solid #e0e0e0;
@@ -140,6 +140,22 @@
   padding: 10px;
 }
 
+.ipysigma-widget .ipysigma-information-shadow-display {
+  width: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  font-size: 12px;
+  /* font-style: italic; */
+  line-height: 16px;
+  padding: 10px;
+}
+
+.ipysigma-widget .ipysigma-information-hide-button,
+.ipysigma-widget .ipysigma-information-show-button {
+  float: right;
+  cursor: pointer;
+}
+
 .ipysigma-widget .ipysigma-information-contents,
 .ipysigma-widget .ipysigma-legend {
   font-family: monospace;
@@ -161,7 +177,10 @@
 .ipysigma-widget .ipysigma-download-controls {
   margin-top: 5px;
   /* display: flex; */
-  height: 30px;
+  text-align: right;
+  position: absolute;
+  bottom: 20px;
+  right: 0px;
 }
 
 .ipysigma-widget .ipysigma-download-png-button,

diff --git a/ipysigma/sigma.py b/ipysigma/sigma.py
@@ -18,7 +18,7 @@
 # =============================================================================
 DEFAULT_NODE_SIZE_RANGE = (3, 15)
 DEFAULT_EDGE_SIZE_RANGE = (0.5, 10)
-DEFAULT_CAMERA_STATE = {"ratio": 1, "x": 0.65, "y": 0.5, "angle": 0}
+DEFAULT_CAMERA_STATE = {"ratio": 1, "x": 0.5, "y": 0.5, "angle": 0}
 SUPPORTED_NODE_TYPES = (int, str, float)
 SUPPORTED_RANGE_BOUNDS = (int, str, float)
 SUPPORTED_NODE_METRICS = {"louvain", "hlouvain"}

diff --git a/notebooks/Small Multiples.ipynb b/notebooks/Small Multiples.ipynb
@@ -24,14 +24,14 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": 6,
    "id": "9434631b-a769-4fc1-a067-fc1858af9f76",
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "fc0cdca42acf4871a75c1813cc45586f",
+       "model_id": "0c5a71b7bc934ad7b0574edccee7b1c8",
        "version_major": 2,
        "version_minor": 0
       },

diff --git a/src/widget.ts b/src/widget.ts
@@ -65,7 +65,6 @@ import '../css/widget.css';
 /**
  * Constants.
  */
-const CAMERA_OFFSET = 0.65;
 const NODE_VIZ_ATTRIBUTES = new Set(['label', 'size', 'color', 'x', 'y']);
 const EDGE_VIZ_ATTRIBUTES = new Set(['label', 'size', 'color']);
 const MUTED_NODE_COLOR = '#ccc';
@@ -128,11 +127,15 @@ const TEMPLATE = `
   <select class="ipysigma-search">
     <option value="">Search a node...</option>
   </select>
+  <div class="ipysigma-information-shadow-display" style="display: none;">
+    <span class="ipysigma-information-show-button">show legend</span>
+  </div>
   <div class="ipysigma-information-display">
     <div class="ipysigma-information-display-tabs">
       <span class="ipysigma-information-legend-button ipysigma-tab-button">legend</span>
       &middot;
       <span class="ipysigma-information-info-button ipysigma-tab-button">info</span>
+      <span class="ipysigma-information-hide-button">hide</span>
     </div>
     <hr>
     <div class="ipysigma-legend"></div>
@@ -363,10 +366,15 @@ export class SigmaView extends DOMWidgetView {
 
   choices: Choices;
   currentTab: InformationDisplayTab = 'legend';
-  infoElement: HTMLElement;
+  informationDisplayElement: HTMLElement;
+  informationShadowDisplayElement: HTMLElement;
+  itemInfoElement: HTMLElement;
   legendElement: HTMLElement;
   legendButton: HTMLElement;
   nodeInfoButton: HTMLElement;
+  hideInformationButton: HTMLElement;
+  showInformationButton: HTMLElement;
+  isInformationShown: boolean = true;
   selectedNode: string | null = null;
   selectedEdge: string | null = null;
   focusedNodes: Set<string> | null = null;
@@ -538,7 +546,13 @@ export class SigmaView extends DOMWidgetView {
       position: 'bottom',
     });
 
-    this.infoElement = this.el.querySelector(
+    this.informationDisplayElement = this.el.querySelector(
+      '.ipysigma-information-display'
+    ) as HTMLElement;
+    this.informationShadowDisplayElement = this.el.querySelector(
+      '.ipysigma-information-shadow-display'
+    ) as HTMLElement;
+    this.itemInfoElement = this.el.querySelector(
       '.ipysigma-information-contents'
     ) as HTMLElement;
     this.legendElement = this.el.querySelector(
@@ -551,6 +565,12 @@ export class SigmaView extends DOMWidgetView {
     this.legendButton = this.el.querySelector(
       '.ipysigma-information-legend-button'
     ) as HTMLElement;
+    this.hideInformationButton = this.el.querySelector(
+      '.ipysigma-information-hide-button'
+    ) as HTMLElement;
+    this.showInformationButton = this.el.querySelector(
+      '.ipysigma-information-show-button'
+    ) as HTMLElement;
 
     this.changeInformationDisplayTab('legend');
 
@@ -837,18 +857,32 @@ export class SigmaView extends DOMWidgetView {
 
   changeInformationDisplayTab(tab: InformationDisplayTab) {
     if (tab === 'legend') {
-      hide(this.infoElement);
+      hide(this.itemInfoElement);
       show(this.legendElement);
       this.legendButton.classList.remove('selectable');
       this.nodeInfoButton.classList.add('selectable');
     } else {
       hide(this.legendElement);
-      show(this.infoElement);
+      show(this.itemInfoElement);
       this.legendButton.classList.add('selectable');
       this.nodeInfoButton.classList.remove('selectable');
     }
   }
 
+  toggleInformationDisplay(): void {
+    if (this.isInformationShown) {
+      // Hiding
+      hide(this.informationDisplayElement);
+      show(this.informationShadowDisplayElement);
+      this.isInformationShown = false;
+    } else {
+      // Showing
+      show(this.informationDisplayElement);
+      hide(this.informationShadowDisplayElement);
+      this.isInformationShown = true;
+    }
+  }
+
   updateLegend(
     variables: VisualVariables,
     summaries: {
@@ -1028,14 +1062,15 @@ export class SigmaView extends DOMWidgetView {
     this.selectedEdge = null;
     this.selectedNode = null;
     this.focusedNodes = null;
+    this.syncHoveredNode = null;
 
     this.choices.setChoiceByValue('');
 
     if (this.model.get('clickable_edges')) {
-      this.infoElement.innerHTML =
+      this.itemInfoElement.innerHTML =
         '<i>Click on a node/edge or search a node to display information about it...</i>';
     } else {
-      this.infoElement.innerHTML =
+      this.itemInfoElement.innerHTML =
         '<i>Click on a node or search a node to display information about it...</i>';
     }
 
@@ -1174,7 +1209,7 @@ export class SigmaView extends DOMWidgetView {
       }
     }
 
-    this.infoElement.innerHTML = innerHTML;
+    this.itemInfoElement.innerHTML = innerHTML;
 
     this.changeInformationDisplayTab('info');
 
@@ -1276,6 +1311,14 @@ export class SigmaView extends DOMWidgetView {
 
       this.changeInformationDisplayTab('info');
     };
+
+    this.hideInformationButton.onclick = () => {
+      this.toggleInformationDisplay();
+    };
+
+    this.showInformationButton.onclick = () => {
+      this.toggleInformationDisplay();
+    };
   }
 
   bindDownloadHandlers() {
@@ -1303,9 +1346,7 @@ export class SigmaView extends DOMWidgetView {
     };
 
     this.resetZoomButton.onclick = () => {
-      this.renderer
-        .getCamera()
-        .animate({ ratio: 1, x: CAMERA_OFFSET, y: 0.5, angle: 0 });
+      this.renderer.getCamera().animatedReset();
     };
   }