Show visualization on output port hover. (enso-org/ide#1363)

Original commit: enso-org/ide@b869971

ide/CHANGELOG.md

@@ -11,8 +11,17 @@
   will be lost. In this build we added notification in statusbar to signalize
   that the connection was lost and IDE must be restarted. In future IDE will try
   to automatically reconnect.
-- [Visualization can be extended to the whole screen][1355] by selecting the
-  node and pressing space twice. To quit this view, press space again.
+  - [Visualization can be extended to the whole screen][1355] by selecting the
+    node and pressing space twice. To quit this view, press space again.
+- [Visualization preview on output port hover.][1363] There is now a quick
+  preview for visualizations and error descriptions. Hovering a node output will
+  first show a tooltip with the type information and then after some time, will
+  show the visualization of the node. The preview visualization will be located
+  above other nodes, whereas the normal view, will be shown below nodes. Errors
+  will show the preview visualization immediately. Nodes without type
+  information will also show the visualization immediately. You can enter a
+  quick preview mode by pressing ctrl (or command on macOS), which will show the
+  preview visualization immediately for any hovered node output.
 - [Database Visualizations][1335]. Visualizations for the Database library have
   been added. The Table visualization now automatically executes the underlying
   query to display its results in a table. In addition, the SQL Query
@@ -66,7 +75,7 @@
   in JavaScript. You can query it for all IDE colors, including the colors used
   to represent types.
 - [You can now start the IDE service without window again.][1353] The command
-  line arguyment `--no-window` now starts all the required backend services
+  line argument `--no-window` now starts all the required backend services
   again, and prints the port on the command line, allowing you to open the IDE
   with a browser of your choice.
 - [JS visualizations have consistent gestures with the IDE][1291]. Panning and
@@ -115,6 +124,7 @@ you can find their release notes
 [1341]: https://github.com/enso-org/ide/pull/1341
 [1348]: https://github.com/enso-org/ide/pull/1348
 [1353]: https://github.com/enso-org/ide/pull/1353
+[1363]: https://github.com/enso-org/ide/pull/1363
 [1384]: https://github.com/enso-org/ide/pull/1384
 [1385]: https://github.com/enso-org/ide/pull/1385
 [1390]: https://github.com/enso-org/ide/pull/1390

ide/src/rust/ensogl/lib/components/src/label.rs

@@ -28,15 +28,14 @@ mod background {
 
             let width      = Var::<Pixels>::from("input_size.x");
             let height     = Var::<Pixels>::from("input_size.y");
-            let padding    = style.get_number_or(theme::padding, 0.0);
+            let padding    = style.get_number_or(theme::padding_outer, 0.0);
             let width      = width  - padding.px() * 2.0;
             let height     = height - padding.px() * 2.0;
             let radius     = &height / 2.0;
             let base_shape = Rect((&width,&height)).corners_radius(&radius);
             let shape      = base_shape.fill(Var::<color::Rgba>::from(bg_color.clone()));
-
-            let alpha         = Var::<f32>::from(format!("({0}.w)",bg_color));
-            let shadow        = shadow::from_shape_with_alpha(base_shape.into(),&alpha,style);
+            let alpha      = Var::<f32>::from(format!("({0}.w)",bg_color));
+            let shadow     = shadow::from_shape_with_alpha(base_shape.into(),&alpha,style);
 
             (shadow+shape).into()
         }
@@ -103,14 +102,19 @@ impl Model {
     }
 
     fn set_width(&self, width:f32) -> Vector2 {
-        let padding     = self.style.get_number_or(theme::padding,0.0);
-        let text_size   = self.style.get_number_or(theme::text::size,0.0);
-        let text_offset = self.style.get_number_or(theme::text::offset,0.0);
-        let height      = self.height();
-        let size        = Vector2(width * 1.25,height);
-        let padded_size = size + Vector2(padding,padding) * 2.0;
+        let padding_outer   = self.style.get_number_or(theme::padding_outer,0.0);
+        let padding_inner_x = self.style.get_number_or(theme::padding_inner_x,0.0);
+        let padding_inner_y = self.style.get_number_or(theme::padding_inner_y,0.0);
+        let padding_x       = padding_outer + padding_inner_x;
+        let padding_y       = padding_outer + padding_inner_y;
+        let padding         = Vector2(padding_x,padding_y);
+        let text_size       = self.style.get_number_or(theme::text::size,0.0);
+        let text_offset     = self.style.get_number_or(theme::text::offset,0.0);
+        let height          = self.height();
+        let size            = Vector2(width,height);
+        let padded_size     = size + padding * 2.0;
         self.background.size.set(padded_size);
-        let text_origin = Vector2(padding / 2.0 + text_offset - size.x/2.0, text_size /2.0);
+        let text_origin = Vector2(text_offset - size.x/2.0, text_size /2.0);
         self.label.set_position_xy(text_origin);
         padded_size
     }
@@ -149,7 +153,7 @@ pub struct Label {
 
 impl Label {
     /// Constructor.
-    pub fn new(app:Application) -> Self {
+    pub fn new(app:&Application) -> Self {
         let frp   = Rc::new(Frp::new());
         let model = Rc::new(Model::new(app.clone_ref()));
         Label {frp,model}.init()

ide/src/rust/ensogl/lib/core/src/animation/frp/animation.rs

@@ -1,6 +1,7 @@
 //! FRP bindings to the animation engine.
 
 pub mod hysteretic;
+pub mod delayed;
 
 use crate::prelude::*;
 

ide/src/rust/ensogl/lib/core/src/animation/frp/animation/delayed.rs

@@ -0,0 +1,84 @@
+//! Animation that has a delayed onset.
+use crate::prelude::*;
+
+use crate::Easing;
+
+use enso_frp as frp;
+
+
+
+// ===========
+// === Frp ===
+// ===========
+
+crate::define_endpoints! {
+    Input {
+        /// Start the onset of the animation. After the specified delay, the animation will run
+        /// with the specified duration.
+        start(),
+        /// Reset animation immediately to 0.0.
+        reset(),
+        /// Set the onset delay of the animation.
+        set_delay(f32),
+        /// Set the duration of the animation.
+        set_duration(f32),
+    }
+    Output {
+        /// Represents the numeric state of the animation in the range 0...1.
+        value(f32),
+        /// Triggered when the state reaches 1.0.
+        on_end(),
+        /// Triggered when the state reaches 0.0.
+        on_reset(),
+    }
+}
+
+
+
+// =========================
+// === DelayedAnimation ===
+// =========================
+
+/// Animation that has a delayed onset.
+#[derive(CloneRef,Debug,Shrinkwrap)]
+pub struct DelayedAnimation {
+    #[allow(missing_docs)]
+    pub frp : FrpEndpoints,
+}
+
+impl DelayedAnimation {
+    #[allow(missing_docs)]
+    pub fn new(network:&frp::Network) -> Self {
+        let frp        = Frp::extend(network);
+        let delay      = Easing::new(network);
+        let transition = Easing::new(network);
+
+        frp::extend! { network
+            // Set delay duration.
+            delay.set_duration      <+ frp.set_delay;
+            transition.set_duration <+ frp.set_duration;
+
+            // Start the delay.
+            delay.target <+ frp.start.constant(1.0);
+
+            // End delay if 1.0 reached.
+            delay_end <- delay.value.map(|t| (t - 1.0).abs() < std::f32::EPSILON).on_true();
+
+            // Start animation.
+            transition.target <+ delay_end.constant(1.0);
+
+            // Reset the animation and delay.
+            delay.stop_and_rewind      <+ frp.reset.constant(0.0);
+            transition.stop_and_rewind <+ frp.reset.constant(0.0);
+
+            // Output bindings.
+            frp.source.value    <+ transition.value;
+            frp.source.on_reset <+ transition.value.map(|t|
+                (t - 0.0).abs() < std::f32::EPSILON).on_true();
+            frp.source.on_end   <+ transition.value.map(|t|
+                (t - 1.0).abs() < std::f32::EPSILON).on_true();
+        }
+
+        Self{frp}
+    }
+}

ide/src/rust/ensogl/lib/core/src/display/scene.rs

@@ -484,7 +484,7 @@ impl DomLayers {
         canvas.set_style_or_warn("z-index"       , "2"       , &logger);
         canvas.set_style_or_warn("pointer-events", "none"    , &logger);
         front.dom.set_class_name("front");
-        front.dom.set_style_or_warn("z-index", "1", &logger);
+        front.dom.set_style_or_warn("z-index", "3", &logger);
         back.dom.set_class_name("back");
         back.dom.set_style_or_warn("pointer-events", "auto", &logger);
         back.dom.set_style_or_warn("z-index"       , "0"   , &logger);

ide/src/rust/ensogl/lib/theme/src/lib.rs

@@ -286,11 +286,13 @@ define_themes! { [light:0, dark:1]
             background = Lcha(0.98,0.014,0.18,1.0) , Lcha(0.2,0.014,0.18,1.0);
             text       = Lcha(0.0,0.0,0.0,0.7) , Lcha(1.0,0.0,0.0,0.7);
             text {
-                offset = 10.0, 10.0;
+                offset = 00.0, 00.0;
                 size   = 12.0, 12.0;
             }
-            padding = 15.0, 15.0;
-            height  = 36.0, 36.0;
+            padding_outer   = 10.0, 10.0;
+            padding_inner_x = 10.0, 10.0;
+            padding_inner_y = 2.0, 10.0;
+            height          = 30.0, 30.0;
         }
     }
 

ide/src/rust/ide/view/graph-editor/src/builtin/visualization/native/error.rs

@@ -75,8 +75,8 @@ pub struct Input {
 #[derive(Clone,CloneRef,Debug)]
 #[allow(missing_docs)]
 pub struct Error {
+    pub frp : visualization::instance::Frp,
     model   : Model,
-    frp     : visualization::instance::Frp,
     network : frp::Network,
 }
 
@@ -103,7 +103,7 @@ impl Error {
     pub fn new(scene:&Scene) -> Self {
         let network = frp::Network::new("js_visualization_raw_text");
         let frp     = visualization::instance::Frp::new(&network);
-        let model   = Model::new(scene);
+        let model   = Model::new(scene.clone_ref());
         Self {model,frp,network} . init()
     }
 
@@ -113,11 +113,12 @@ impl Error {
         let frp     = self.frp.clone_ref();
         frp::extend! { network
             eval frp.set_size  ((size) model.set_size(*size));
-            eval frp.send_data ([frp](data) {
+            eval frp.send_data ([frp,model](data) {
                 if let Err(e) = model.receive_data(data) {
                     frp.data_receive_error.emit(Some(e));
                 }
             });
+            eval frp.set_layer ((layer) model.set_layer(*layer));
         }
 
         frp.preprocessor_change.emit(preprocessor());
@@ -152,11 +153,12 @@ pub struct Model {
     // when payload changes.
     displayed : Rc<CloneCell<Kind>>,
     messages  : SharedHashMap<Kind,ImString>,
+    scene     : Scene,
 }
 
 impl Model {
     /// Constructor.
-    fn new(scene:&Scene) -> Self {
+    fn new(scene:Scene) -> Self {
         let logger    = Logger::new("RawText");
         let div       = web::create_div();
         let dom       = DomSymbol::new(&div);
@@ -177,7 +179,7 @@ impl Model {
         dom.dom().set_style_or_warn("pointer-events","auto"               ,&logger);
 
         scene.dom.layers.back.manage(&dom);
-        Model{dom,logger,size,styles,displayed,messages}.init()
+        Model{dom,logger,size,styles,displayed,messages,scene}.init()
     }
 
     fn init(self) -> Self {
@@ -242,6 +244,10 @@ impl Model {
         let text_color   = format!("rgba({},{},{},{})",red,green,blue,text_color.alpha);
         self.dom.dom().set_style_or_warn("color",text_color,&self.logger);
     }
+
+    fn set_layer(&self, layer:Layer) {
+        layer.apply_for_html_component(&self.scene,&self.dom)
+    }
 }
 
 impl From<Error> for Instance {

ide/src/rust/ide/view/graph-editor/src/builtin/visualization/native/raw_text.rs

@@ -45,12 +45,12 @@ impl RawText {
         let path = Path::builtin("JSON");
         Definition::new(
             Signature::new_for_any_type(path,Format::Json),
-            |scene| { Ok(Self::new(scene).into()) }
+            |scene| { Ok(Self::new(scene.clone_ref()).into()) }
         )
     }
 
     /// Constructor.
-    pub fn new(scene:&Scene) -> Self {
+    pub fn new(scene:Scene) -> Self {
         let network = frp::Network::new("js_visualization_raw_text");
         let frp     = visualization::instance::Frp::new(&network);
         let model   = RawTextModel::new(scene);
@@ -63,11 +63,12 @@ impl RawText {
         let frp     = self.frp.clone_ref();
         frp::extend! { network
             eval frp.set_size  ((size) model.set_size(*size));
-            eval frp.send_data ([frp](data) {
+            eval frp.send_data ([frp,model](data) {
                 if let Err(e) = model.receive_data(data) {
                     frp.data_receive_error.emit(Some(e));
                 }
              });
+            eval frp.set_layer ((layer) model.set_layer(*layer));
         }
         self
     }
@@ -79,11 +80,12 @@ pub struct RawTextModel {
     logger : Logger,
     dom    : DomSymbol,
     size   : Rc<Cell<Vector2>>,
+    scene  : Scene,
 }
 
 impl RawTextModel {
     /// Constructor.
-    fn new(scene:&Scene) -> Self {
+    fn new(scene:Scene) -> Self {
         let logger = Logger::new("RawText");
         let div    = web::create_div();
         let dom    = DomSymbol::new(&div);
@@ -111,7 +113,7 @@ impl RawTextModel {
         dom.dom().set_style_or_warn("pointer-events","auto"               ,&logger);
 
         scene.dom.layers.back.manage(&dom);
-        RawTextModel{dom,logger,size}.init()
+        RawTextModel{dom,logger,size,scene}.init()
     }
 
     fn init(self) -> Self {
@@ -141,6 +143,10 @@ impl RawTextModel {
     fn reload_style(&self) {
         self.dom.set_size(self.size.get());
     }
+
+    fn set_layer(&self, layer:Layer) {
+        layer.apply_for_html_component(&self.scene,&self.dom)
+    }
 }
 
 impl From<RawText> for Instance {