Anno fixes (easy) (#925)

* change wording from value to label

* tooltip position

* Padding for text & code whitespace

client/src/components/autosave/index.js

@@ -4,78 +4,78 @@ import { connect } from "react-redux";
 import actions from "../../actions";
 
 @connect(state => ({
-	universe: state.universe,
+  universe: state.universe,
-	obsAnnotations: state.universe.obsAnnotations,
+  obsAnnotations: state.universe.obsAnnotations,
-	saveInProgress: state.autosave?.saveInProgress ?? false,
+  saveInProgress: state.autosave?.saveInProgress ?? false,
-	lastSavedObsAnnotations: state.autosave?.lastSavedObsAnnotations,
+  lastSavedObsAnnotations: state.autosave?.lastSavedObsAnnotations,
-	error: state.autosave?.error,
+  error: state.autosave?.error,
-	writableCategoriesEnabled: state.config?.parameters?.["label_file"] ?? false
+  writableCategoriesEnabled: state.config?.parameters?.["label_file"] ?? false
 }))
 class Autosave extends React.Component {
-	constructor(props) {
+  constructor(props) {
-		super(props);
+    super(props);
-		this.state = {
+    this.state = {
-			timer: null
+      timer: null
-		};
+    };
-	}
+  }
 
-	componentDidMount() {
+  componentDidMount() {
-		const { writableCategoriesEnabled } = this.props;
+    const { writableCategoriesEnabled } = this.props;
 
-		let { timer } = this.state;
+    let { timer } = this.state;
-		if (timer) clearInterval(timer);
+    if (timer) clearInterval(timer);
-		if (writableCategoriesEnabled) {
+    if (writableCategoriesEnabled) {
-			timer = setInterval(this.tick, 2500);
+      timer = setInterval(this.tick, 2500);
-		} else {
+    } else {
-			timer = null;
+      timer = null;
-		}
+    }
-		this.setState({ timer });
+    this.setState({ timer });
-	}
+  }
 
-	componentWillUnmount() {
+  componentWillUnmount() {
-		const { timer } = this.state;
+    const { timer } = this.state;
-		if (timer) this.clearInterval(timer);
+    if (timer) this.clearInterval(timer);
-	}
+  }
 
-	tick = () => {
+  tick = () => {
-		const { dispatch, saveInProgress } = this.props;
+    const { dispatch, saveInProgress } = this.props;
-		if (this.needToSave() && !saveInProgress) {
+    if (this.needToSave() && !saveInProgress) {
-			dispatch(actions.saveObsAnnotations());
+      dispatch(actions.saveObsAnnotations());
-		}
+    }
-	};
+  };
 
-	needToSave = () => {
+  needToSave = () => {
-		/* return true if we need to save, false if we don't */
+    /* return true if we need to save, false if we don't */
-		const { obsAnnotations, lastSavedObsAnnotations } = this.props;
+    const { obsAnnotations, lastSavedObsAnnotations } = this.props;
-		return (
+    return (
-			lastSavedObsAnnotations && obsAnnotations !== lastSavedObsAnnotations
+      lastSavedObsAnnotations && obsAnnotations !== lastSavedObsAnnotations
-		);
+    );
-	};
+  };
 
-	statusMessage() {
+  statusMessage() {
-		const { error } = this.props;
+    const { error } = this.props;
-		if (error) {
+    if (error) {
-			return `Autosave error: ${error}`;
+      return `Autosave error: ${error}`;
-		}
+    }
-		return this.needToSave() ? "Unsaved" : "All saved";
+    return this.needToSave() ? "Unsaved" : "All saved";
-	}
+  }
 
-	render() {
+  render() {
-		const { writableCategoriesEnabled } = this.props;
+    const { writableCategoriesEnabled } = this.props;
-		return writableCategoriesEnabled ? (
+    return writableCategoriesEnabled ? (
-			<div
+      <div
-				id="autosave"
+        id="autosave"
-				style={{
+        style={{
-					position: "fixed",
+          position: "fixed",
-					display: "inherit",
+          display: "inherit",
-					right: 0,
+          right: 5,
-					bottom: 0
+          bottom: 5
-				}}
+        }}
-			>
+      >
-				{this.statusMessage()}
+        {this.statusMessage()}
-			</div>
+      </div>
-		) : null;
+    ) : null;
-	}
+  }
 }
 
 export default Autosave;

client/src/components/categorical/category.js

@@ -349,7 +349,7 @@ class Category extends React.Component {
                 <Popover
                   interactionKind={PopoverInteractionKind.HOVER}
                   boundary="window"
-                  position={Position.RIGHT}
+                  position={Position.RIGHT_TOP}
                   content={
                     <Menu>
                       <MenuItem

client/src/components/categorical/value.js

@@ -384,7 +384,7 @@ class CategoryValue extends React.Component {
                         data-testclass="handleDeleteValue"
                         data-testid={`handleDeleteValue-${metadataField}`}
                         onClick={this.handleDeleteValue}
-                        text="Delete this value, and reassign all cells to type 'unknown'"
+                        text="Delete this label, and reassign all cells to type 'unknown'"
                       />
                     ) : null}
                   </Menu>