Show visualization on output port hover.

CHANGELOG.md

@@ -11,6 +11,15 @@
   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 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, which will show the preview visualization
+  immediately for all nodes.
 
 <br/>![Bug Fixes](/docs/assets/tags/bug_fixes.svg)
 
@@ -73,6 +82,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
 
 <br/>
 

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::*;
 

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

@@ -0,0 +1,82 @@
+//! 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}
+    }
+}

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

@@ -291,7 +291,7 @@ define_themes! { [light:0, dark:1]
                 size   = 12.0, 12.0;
             }
             padding = 15.0, 15.0;
-            height  = 36.0, 36.0;
+            height  = 30.0, 30.0;
         }
     }
 }

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,
 }
 
@@ -95,12 +95,12 @@ impl Error {
         let path = Self::path();
         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   = Model::new(scene);
@@ -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 {

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 {