feat: add height to 100%

note this is not meant to work in notebooks, only in dashboards

CHANGELOG.md

@@ -16,6 +16,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- it is now possible to extend the widget's height to 100% of its container. To do so,
+  do `Aladin(height=-1)`. This is implemented to support use in dashboard
+  applications, this cannot work in a notebook.
+
 ### Fixed
 
 - remove `requests` from mandatory dependencies (accident in version 0.5.0)

js/models/event_handler.js

@@ -1,5 +1,5 @@
 import MessageHandler from "./message_handler";
-import { divNumber, setDivNumber, Lock } from "../utils";
+import { divNumber, setDivNumber, Lock, setDivHeight } from "../utils";
 
 export default class EventHandler {
   /**
@@ -131,8 +131,7 @@ export default class EventHandler {
 
     /* Div control */
     this.model.on("change:_height", () => {
-      let height = this.model.get("_height");
-      this.aladinDiv.style.height = `${height}px`;
+      setDivHeight(this.model.get("_height"), this.aladinDiv);
       // Update WCS and FoV only if this is the last div
       this.updateWCS();
       this.update2AxisFoV();

js/utils.js

@@ -46,10 +46,19 @@ function setDivNumber(num) {
   divNumber = num;
 }
 
+function setDivHeight(height, div) {
+  if (height == -1) {
+    div.style.height = "100%";
+  } else {
+    div.style.height = `${height}px`;
+  }
+}
+
 export {
   snakeCaseToCamelCase,
   convertOptionNamesToCamelCase,
   Lock,
   divNumber,
   setDivNumber,
+  setDivHeight,
 };

js/widget.js

@@ -1,6 +1,11 @@
 import "./widget.css";
 import EventHandler from "./models/event_handler";
-import { divNumber, setDivNumber, snakeCaseToCamelCase } from "./utils";
+import {
+  divNumber,
+  setDivHeight,
+  setDivNumber,
+  snakeCaseToCamelCase,
+} from "./utils";
 import A from "./aladin_lite";
 
 function initAladinLite(model, el) {
@@ -13,8 +18,7 @@ function initAladinLite(model, el) {
 
   let aladinDiv = document.createElement("div");
   aladinDiv.classList.add("aladin-widget");
-  aladinDiv.style.height = `${model.get("_height")}px`;
-
+  setDivHeight(model.get("_height"), aladinDiv);
   aladinDiv.id = `aladin-lite-div-${divNumber}`;
   let aladin = new A.aladin(aladinDiv, initOptions);
   el.appendChild(aladinDiv);

src/ipyaladin/widget.py

@@ -262,13 +262,16 @@ def selected_objects(self) -> List[Table]:
 
     @property
     def height(self) -> int:
-        """The height of the Aladin Lite widget.
+        """The height of the widget.
 
         Returns
         -------
         int
             The height of the widget in pixels.
-
+            Setting the height to -1 will expand the widget at 100% height of its
+            container. This is generally a bad idea in a notebook but can be usefull
+            for dashbord applications.
+            The default height is 400 pixels.
         """
         return self._height