Node and edge description tooltips (#1081)

* Show tooltips in weightConfig UI

* Updated to pass checks from prettier

* Updates unit tests to check WeightSlider descriptions

* Update CHANGELOG.md to reflect PR #1081

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## [Unreleased]
+- Add description tooltips for node and edge types in the weight configuration UI (#1081)
 - Add the `export-graph` command (#1110)
 - Enable loading private repositories (#1085)
 - Enable setting type weights to 0 in the UI (#1005)

src/explorer/weights/EdgeTypeConfig.js

@@ -15,6 +15,7 @@ export class EdgeTypeConfig extends React.Component<{
         <EdgeWeightSlider
           name={this.props.weightedType.type.backwardName}
           weight={this.props.weightedType.forwardWeight}
+          description={this.props.weightedType.type.description}
           onChange={(forwardWeight) => {
             this.props.onChange({
               ...this.props.weightedType,
@@ -25,6 +26,7 @@ export class EdgeTypeConfig extends React.Component<{
         <EdgeWeightSlider
           name={this.props.weightedType.type.forwardName}
           weight={this.props.weightedType.backwardWeight}
+          description={this.props.weightedType.type.description}
           onChange={(backwardWeight) => {
             this.props.onChange({
               ...this.props.weightedType,
@@ -57,6 +59,7 @@ export class EdgeWeightSlider extends React.Component<WeightSliderProps> {
       <WeightSlider
         name={modifiedName}
         weight={this.props.weight}
+        description={this.props.description}
         onChange={this.props.onChange}
       />
     );

src/explorer/weights/EdgeTypeConfig.test.js

@@ -35,6 +35,12 @@ describe("explorer/weights/EdgeTypeConfig", () => {
       expect(backwardSlider.props().name).toBe(assemblesEdgeType.forwardName);
       expect(backwardSlider.props().weight).toBe(wet.backwardWeight);
     });
+    it("has a description", () => {
+      const {backwardSlider} = example();
+      expect(backwardSlider.props().description).toBe(
+        assemblesEdgeType.description
+      );
+    });
     it("forward weight slider onChange works", () => {
       const {wet, forwardSlider, onChange} = example();
       forwardSlider.props().onChange(9);
@@ -54,7 +60,12 @@ describe("explorer/weights/EdgeTypeConfig", () => {
     function example() {
       const onChange = jest.fn();
       const element = shallow(
-        <EdgeWeightSlider weight={3} name="foo" onChange={onChange} />
+        <EdgeWeightSlider
+          weight={3}
+          name="foo"
+          description="Description for test slider"
+          onChange={onChange}
+        />
       );
       const weightSlider = element.find(WeightSlider);
       return {element, onChange, weightSlider};

src/explorer/weights/NodeTypeConfig.js

@@ -13,6 +13,7 @@ export class NodeTypeConfig extends React.Component<{
       <WeightSlider
         name={this.props.weightedType.type.name}
         weight={this.props.weightedType.weight}
+        description={this.props.weightedType.type.description}
         onChange={(weight) => {
           this.props.onChange({
             ...this.props.weightedType,

src/explorer/weights/NodeTypeConfig.test.js

@@ -28,6 +28,10 @@ describe("explorer/weights/NodeTypeConfig", () => {
       expect(slider.props().name).toBe(wnt.type.name);
       expect(slider.props().weight).toBe(wnt.weight);
     });
+    it("has a description", () => {
+      const {wnt, slider} = example();
+      expect(slider.props().description).toBe(wnt.type.description);
+    });
     it("weight slider onChange works", () => {
       const {wnt, slider, onChange} = example();
       slider.props().onChange(9);

src/explorer/weights/WeightSlider.js

@@ -28,6 +28,7 @@ export type Props = {|
   +name: React$Node,
   // Callback invoked with the new weight after the user adjusts the slider.
   +onChange: (Weight) => void,
+  +description: string,
 |};
 
 /**
@@ -54,7 +55,7 @@ export type Props = {|
 export class WeightSlider extends React.Component<Props> {
   render() {
     return (
-      <label style={{display: "flex"}}>
+      <label style={{display: "flex"}} title={this.props.description}>
         <span style={{flexGrow: 1}}>{this.props.name}</span>
         <input
           type="range"

src/explorer/weights/WeightSlider.test.js

@@ -20,7 +20,12 @@ describe("explorer/weights/WeightSlider", () => {
     function example(weight: Weight) {
       const onChange = jest.fn();
       const element = shallow(
-        <WeightSlider weight={weight} name="foo" onChange={onChange} />
+        <WeightSlider
+          weight={weight}
+          name="foo"
+          onChange={onChange}
+          description="A test description"
+        />
       );
       return {element, onChange};
     }
@@ -64,6 +69,15 @@ describe("explorer/weights/WeightSlider", () => {
         expect(onChange).toHaveBeenCalledWith(sliderToWeight(sliderVal));
       }
     });
+    it("has a description tooltip", () => {
+      const {element} = example(0);
+      expect(
+        element
+          .find("label")
+          .at(0)
+          .prop("title")
+      ).toBe("A test description");
+    });
     it("the weight and slider position may be inconsistent", () => {
       // If the weight does not correspond to an integer slider value, then
       // changing the slider to its current position can change the weight.