feat: DEV-3391: Render real Annotations in View All (#928)

* DEV-3391: Duplicate root into every annotation

* Add id for Choice(s) for test

All other tags should have the only indentifier then

* Use own names/toNames in every Annotation

* Render tags from given annotation, not common

* Fix tags with both name and id

* Fix names for duplicated tags; fix RichText

* Finally use parent Annotation, not selected

* View All! Real Annotations! Much UX

* All Labels related tags now have id and name: string

* Fix names usage

- toNames should contain references from names, not strings
- Area dispatcher should check for cleaned up ids/names

* Fix Labels.annotation by mixin

* Add feature flag (WIP)

* Full feature flag coverage

* Fix id/name props for every tag

Also don't add tags without id/name to ids map.

* Fix Channel

* Fix renderChildren, Channel and visual tags

* Fix names for tool tags

* Fix AnnotationMixin for Tools and AnnotationHistory

* Fix Taxonomy perRegion visibility

* Fix results created by current user

Connect results to tags in current annotation's tags tree

* Don't crash because of Relations tag

It's not a real control

* Other fixes for tags in area/result

- correct object for new Area
- fix for createDrawingRegion

* Fix AnnotationMixin for Tools

by @Gondragos

* Fix serialization

* Fix annotation access from KeyPoint Tool

* fix taxonomy children

* reget the children snapshots to keep it as much as it was

* putting back shallow copy of children taxonomy

* fix: DEV-3391: View all readonly (#964)

* fix: DEV-3644: Predictions should always be selectable

* fix: DEV-3644: honor readonly mode with fallbacks to editable and prediction type in snaphot creation

* fix: DEV-3644: allow regions to be selectable if readonly

* fix: DEV-3644: allow video regions to be selectable but non modifiable in readonly mode

* only run history freeze if annotation present on initialization of richtext

* improve choice spacing for selected readonly taxonomy

* improve taxonomy dropdown readonly mode to be navigable

* make textarea render readonly when it is not editable

* compute the isEditable from textarea model

* fix the topbar control state to disable readonly annotations

* fix datetime and number controls readonly mode

* fix image per region test

* use editable state of annotation as the target for readonly/disabled states of controls

* Fix taxonomy/choices loading

* use isEditable for taxonomy, don't disable just block updates

* use isEditable and isDeletable for TextArea controls and fix regression with deletion and edit capabilities

* remove editable=true on TextArea test, this ensures regression is fixed

Co-authored-by: Nick Skriabin <nr@fenelon.ru>

* make Choice and TextArea disabled look if strictly readonly, block all updates if strictly non editable

Co-authored-by: Brandon Martel <brandonmartel@gmail.com>
Co-authored-by: Nick Skriabin <nr@fenelon.ru>

Author: 3 people

src/components/App/Annotation.js

@@ -10,5 +10,5 @@ export function Annotation({ annotation, root }) {
       }
     };
   }, [annotation.pk, annotation.id]);
-  return root ? Tree.renderItem(root) : null;
+  return root ? Tree.renderItem(root, annotation) : null;
 }

src/components/App/Grid.js

@@ -7,6 +7,7 @@ import { observe } from "mobx";
 import Konva from "konva";
 import { Annotation } from "./Annotation";
 import { isDefined } from "../../utils/utilities";
+import { FF_DEV_3391, isFF } from "../../utils/feature-flags";
 import { moveStylesBetweenHeadTags } from "../../utils/html";
 
 /***** DON'T TRY THIS AT HOME *****/
@@ -51,7 +52,7 @@ export default class Grid extends Component {
   }
 
   componentDidMount() {
-    if (this.props.annotations[0] !== this.props.store.selected) {
+    if (!isFF(FF_DEV_3391) && this.props.annotations[0] !== this.props.store.selected) {
       this.startRenderCycle();
     }
   }
@@ -151,7 +152,8 @@ export default class Grid extends Component {
 
   render() {
     const i = this.state.item;
-    const { annotations, store: { selected } } = this.props;
+    const { annotations } = this.props;
+    const selected = isFF(FF_DEV_3391) ? null : this.props.store.selected;
     const isRenderingNext = i < annotations.length && annotations[i] === selected;
 
     return (
@@ -166,20 +168,23 @@ export default class Grid extends Component {
                 bordered={false}
                 style={{ height: 44 }}
               />
-              {!this.state.loaded.has(c.id) && (
-                <div style={{
-                  top: 0,
-                  left: 0,
-                  position: 'absolute',
-                  width: '100%',
-                  height: '100%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                  <Spin size="large" />
-                </div>
-              )}
+              {isFF(FF_DEV_3391)
+                ? <Annotation root={this.props.root} annotation={c} />
+                : !this.state.loaded.has(c.id) && (
+                  <div style={{
+                    top: 0,
+                    left: 0,
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                    <Spin size="large" />
+                  </div>
+                )
+              }
             </div>
           ))}
           {isRenderingNext && (

src/components/HtxTextBox/HtxTextBox.js

@@ -145,20 +145,20 @@ export class HtxTextBox extends React.Component {
   }
 
   renderView() {
-    const { onChange, onDelete, text, ...props } = this.props;
+    const { onChange, onDelete, isEditable, isDeleteable, text, ...props } = this.props;
 
     return (
       <>
         <Paragraph {...props}>
           <span ref={this.textRef}>{text}</span>
-          {onChange && <EditOutlined onClick={this.startEditing} className="ant-typography-edit" />}
+          {isEditable && onChange && <EditOutlined onClick={this.startEditing} className="ant-typography-edit" />}
         </Paragraph>
-        {onDelete && <DeleteOutlined className={styles.delete} onClick={onDelete} />}
+        {isDeleteable && onDelete && <DeleteOutlined className={styles.delete} onClick={onDelete} />}
       </>
     );
   }
 
   render() {
-    return this.state.editing || this.props.onlyEdit ? this.renderEdit() : this.renderView();
+    return (this.state.editing || this.props.onlyEdit) && this.props.isEditable ? this.renderEdit() : this.renderView();
   }
 }

src/components/ImageView/ImageView.js

@@ -50,7 +50,7 @@ const splitRegions = (regions) => {
 };
 
 const Region = memo(({ region, showSelected = false }) => {
-  return useObserver(() => region.inSelection !== showSelected ? null : Tree.renderItem(region, false));
+  return useObserver(() => region.inSelection !== showSelected ? null : Tree.renderItem(region, region.annotation, false));
 });
 
 const RegionsLayer = memo(({ regions, name, useLayers, showSelected = false }) => {
@@ -466,7 +466,7 @@ export default observer(
 
     handleOnClick = e => {
       const { item } = this.props;
-    
+
       if (isFF(FF_DEV_1442)) {
         this.handleDeferredMouseDown?.();
       }
@@ -475,8 +475,6 @@ export default observer(
         return;
       }
 
-      if (!item.annotation.editable) return;
-
       const evt = e.evt || e;
 
       return item.event("click", evt, evt.offsetX, evt.offsetY);

src/components/Taxonomy/Taxonomy.module.scss

@@ -33,10 +33,13 @@
     margin: 0 2px 4px 0;
     background: hsl(0, 0%, 95%);
     padding: 0; // all the right space should be a clickable button, so no padding
-    padding-left: 8px;
     border-radius: 4px;
     display: flex;
     align-items: center;
+
+    span {
+      padding-inline: 8px;
+    }
   }
 
   input[type="button"] {
@@ -50,6 +53,7 @@
     font-weight: 500;
     font-size: 20px;
     color: #09f;
+    margin-left: -8px; // to align with the right edge of the text
 
     &:hover {
       color: red;

src/components/Taxonomy/Taxonomy.tsx

@@ -43,7 +43,7 @@ type TaxonomyProps = {
   onAddLabel?: onAddLabelCallback,
   onDeleteLabel?: onDeleteLabelCallback,
   options?: TaxonomyOptions,
-  isReadonly?: boolean,
+  isEditable?: boolean,
 };
 
 type TaxonomySelectedContextValue = [TaxonomyPath[], (path: TaxonomyPath, value: boolean) => any];
@@ -61,6 +61,7 @@ interface RowProps {
   style: any;
   dimensionCallback: (ref: any) => void;
   maxWidth: number;
+  isEditable?: boolean;
   item: {
     row: {
       id: string,
@@ -113,7 +114,7 @@ const UserLabelForm = ({ onAddLabel, onFinish, path }: UserLabelFormProps) => {
   );
 };
 
-const SelectedList = ({ isReadonly, flatItems } : { isReadonly:boolean, flatItems:TaxonomyItem[] }) => {
+const SelectedList = ({ isEditable, flatItems } : { isEditable: boolean, flatItems:TaxonomyItem[] }) => {
   const [selected, setSelected] = useContext(TaxonomySelectedContext);
   const { showFullPath, pathSeparator = " / " } = useContext(TaxonomyOptionsContext);
 
@@ -130,10 +131,10 @@ const SelectedList = ({ isReadonly, flatItems } : { isReadonly:boolean, flatItem
     <div className={styles.taxonomy__selected}>
       {selectedLabels.map((path, index) => (
         <div key={path.join("|")}>
-          {showFullPath ? path.join(pathSeparator) : path[path.length - 1]}
-          {!isReadonly &&
+          <span>{showFullPath ? path.join(pathSeparator) : path[path.length - 1]}</span>
+          {isEditable ? (
             <input type="button" onClick={() => setSelected(selected[index], false)} value="×" />
-          }
+          ): null}
         </div>
       ))}
     </div>
@@ -146,7 +147,7 @@ function isSubArray(item: string[], parent: string[]) {
   return parent.every((n, i) => item[i] === n);
 }
 
-const Item: React.FC<RowProps> = ({ style, item, dimensionCallback, maxWidth }: RowProps) => {
+const Item: React.FC<RowProps> = ({ style, item, dimensionCallback, maxWidth, isEditable }: RowProps) => {
   const {
     row: { id, isOpen, childCount, isFiltering, name, path, padding, isLeaf },
     toggle,
@@ -226,12 +227,16 @@ const Item: React.FC<RowProps> = ({ style, item, dimensionCallback, maxWidth }:
               disabled={disabled}
               checked={checked}
               ref={setIndeterminate}
-              onChange={e => setSelected(path, e.currentTarget.checked)}
+              onChange={e => {
+                if (isEditable) {
+                  setSelected(path, e.currentTarget.checked);
+                }
+              }}
             />
             <label
               htmlFor={id}
               style={{ maxWidth: `${labelMaxWidth}px` }}
-              onClick={onClick}
+              onClick={isEditable ? onClick : undefined}
               title={title}
               className={disabled ? styles.taxonomy__collapsable : undefined}
             >
@@ -240,7 +245,7 @@ const Item: React.FC<RowProps> = ({ style, item, dimensionCallback, maxWidth }:
             {!isFiltering && (
               <div className={styles.taxonomy__extra}>
                 <span className={styles.taxonomy__extra_count}>{childCount}</span>
-                {onAddLabel && (
+                {isEditable && onAddLabel && (
                   <div className={styles.taxonomy__extra_actions}>
                     <Dropdown
                       destroyPopupOnHide // important for long interactions with huge taxonomy
@@ -284,6 +289,7 @@ type TaxonomyDropdownProps = {
   flatten: TaxonomyItem[],
   items: TaxonomyItem[],
   show: boolean,
+  isEditable?: boolean,
 };
 
 const filterTreeByPredicate = (flatten: TaxonomyItem[], predicate: (item: TaxonomyItem) => boolean) => {
@@ -324,7 +330,7 @@ const filterTreeByPredicate = (flatten: TaxonomyItem[], predicate: (item: Taxono
   return roots;
 };
 
-const TaxonomyDropdown = ({ show, flatten, items, dropdownRef }: TaxonomyDropdownProps) => {
+const TaxonomyDropdown = ({ show, flatten, items, dropdownRef, isEditable }: TaxonomyDropdownProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [search, setSearch] = useState("");
   const predicate = (item: TaxonomyItem) => item.label.toLocaleLowerCase().includes(search);
@@ -382,6 +388,7 @@ const TaxonomyDropdown = ({ show, flatten, items, dropdownRef }: TaxonomyDropdow
       />
       <TreeStructure
         items={list}
+        isEditable={isEditable}
         rowComponent={Item}
         flatten={search !== ""}
         rowHeight={30}
@@ -395,11 +402,11 @@ const TaxonomyDropdown = ({ show, flatten, items, dropdownRef }: TaxonomyDropdow
         <div className={styles.taxonomy__add__container}>
           {isAdding ? (
             <UserLabelForm path={[]} onAddLabel={onAddLabel} onFinish={closeForm} />
-          ) : (
+          ) : isEditable ? (
             <div className={styles.taxonomy__add}>
               <button onClick={addInside}>Add</button>
             </div>
-          )}
+          ): null}
         </div>
       )}
     </div>
@@ -413,7 +420,7 @@ const Taxonomy = ({
   onAddLabel,
   onDeleteLabel,
   options = {},
-  isReadonly = false,
+  isEditable = true,
 }: TaxonomyProps) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const taxonomyRef = useRef<HTMLDivElement>(null);
@@ -517,16 +524,14 @@ const Taxonomy = ({
   return (
     <TaxonomySelectedContext.Provider value={contextValue}>
       <TaxonomyOptionsContext.Provider value={optionsWithMaxUsages}>
-        <SelectedList isReadonly={isReadonly} flatItems={flatten} />
-        {!isReadonly && (
-          <div className={[styles.taxonomy, isOpenClassName].join(" ")} ref={taxonomyRef}>
-            <span onClick={() => setOpen(val => !val)}>
-              {options.placeholder || "Click to add..."}
-              <LsChevron stroke="#09f" />
-            </span>
-            <TaxonomyDropdown show={isOpen} items={items} flatten={flatten} dropdownRef={dropdownRef} />
-          </div>
-        )}
+        <SelectedList isEditable={isEditable} flatItems={flatten} />
+        <div className={[styles.taxonomy, isOpenClassName].join(" ")} ref={taxonomyRef}>
+          <span onClick={() => setOpen(val => !val)}>
+            {options.placeholder || "Click to add..."}
+            <LsChevron stroke="#09f" />
+          </span>
+          <TaxonomyDropdown show={isOpen} isEditable={isEditable} items={items} flatten={flatten} dropdownRef={dropdownRef} />
+        </div>
       </TaxonomyOptionsContext.Provider>
     </TaxonomySelectedContext.Provider>
   );

src/components/TopBar/Controls.js

@@ -33,13 +33,13 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
   const isReview = store.hasInterface("review");
 
   const historySelected = isDefined(store.annotationStore.selectedHistory);
-  const { userGenerate, sentUserGenerate, versions, results } = annotation;
+  const { userGenerate, sentUserGenerate, versions, results, editable: annotationEditable } = annotation;
   const buttons = [];
 
   const [isInProgress, setIsInProgress] = useState(false);
 
   // const isReady = store.annotationStore.selected.objects.every(object => object.isReady === undefined || object.isReady);
-  const disabled = store.isSubmitting || historySelected || isInProgress; // || !isReady;
+  const disabled = !annotationEditable || store.isSubmitting || historySelected || isInProgress; // || !isReady;
   const submitDisabled = store.hasInterface("annotations:deny-empty") && results.length === 0;
 
   const buttonHandler = useCallback(async (e, callback, tooltipMessage) => {

src/components/TopBar/TopBar.js

@@ -10,7 +10,7 @@ import "./TopBar.styl";
 export const TopBar = observer(({ store }) => {
   const annotationStore = store.annotationStore;
   const entity = annotationStore?.selected;
-  const isPrediction = entity?.type === 'prediction';
+  const isPrediction = entity?.type === "prediction";
 
   const isViewAll = annotationStore?.viewingAll === true;
 
@@ -36,7 +36,7 @@ export const TopBar = observer(({ store }) => {
         )}
         {!isViewAll && store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
           <Elem name="section" mod={{ flat: true }} style={{ width: 320, boxSizing: 'border-box' }}>
-            <Controls annotation={entity}/>
+            <Controls annotation={entity} />
           </Elem>
         )}
       </Elem>

src/components/TreeStructure/TreeStructure.tsx

@@ -69,8 +69,10 @@ const TreeStructure = ({
   maxWidth,
   transformationCallback,
   defaultExpanded,
+  isEditable,
 }: {
   items: any[],
+  isEditable?: boolean,
   rowComponent: React.FC<any>,
   flatten: boolean,
   rowHeight: number,
@@ -130,12 +132,13 @@ const TreeStructure = ({
   };
 
   const addInside = (id?: string) => {
+    if (!isEditable) return;
+
     if (id) {
       setData(recursiveTreeWalker({ items, addInsideId: id }));
     }
     else setData(recursiveTreeWalker({ items }));
     updateHeight();
-
   };
 
   const Row = ({
@@ -183,7 +186,7 @@ const TreeStructure = ({
     }, [width]);
 
     return (
-      <RowComponent {...{ item, style, dimensionCallback, maxWidth }} />
+      <RowComponent {...{ isEditable, item, style, dimensionCallback, maxWidth }} />
     );
   };