{"componentChunkName":"component---smooth-doc-smooth-doc-src-templates-doc-js","path":"/docs/viewer/overlays/","result":{"data":{"mdx":{"fields":{"pageType":"doc","title":"Overlays Panel","editLink":""},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Overlays Panel\",\n  \"description\": \"overlays panel\",\n  \"order\": 21,\n  \"section\": \"Viewer\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"overlays-panel\"\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#overlays-panel\",\n    \"aria-label\": \"overlays panel permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overlays Panel\"), mdx(\"br\", null), mdx(\"p\", null, \"The overlay feature allows one or more images to be attached to an image in the Repository. This feature has been designed for visualizing image analysis results such as segmentation results.\"), mdx(\"p\", null, \"When multiple overlays are attached to an image, the z-position of each overlay in the stack is determined by the position of the overlay in the Overlays panel. The first entry in the panel is visually on the bottom of the stack and subsequent entries are positioned higher in the stack. The image that overlays are attached to is positioned visually below all of the overlays.\"), mdx(\"h2\", {\n    \"id\": \"attaching-overlays\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#attaching-overlays\",\n    \"aria-label\": \"attaching overlays permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Attaching Overlays\"), mdx(\"p\", null, \"Overlays are by default positioned at the top left corner of the image they have been attached to, at the base resolution layer. The initial height and width of the overlay will match the overlay's base resolution layer (i.e., pixel scaling of the overlay is not considered). An overlay image can be repositioned using the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#overlay-transform\"\n  }, \"Transform\"), \" properties.\"), mdx(\"div\", {\n    className: \"info\"\n  }, mdx(\"div\", null, mdx(\"a\", {\n    href: \"../overview/#sub-images\"\n  }, \"Sub-images\"), \" may complicate overlay positioning for the following reasons: 1) if the image has multiple sub-images, the overlay\\u2019s position is determined relative to the first sub-image, at the base resolution layer; and 2) if the overlay contains multiple sub-images, only the first sub-image is viewable.\")), mdx(\"details\", null, mdx(\"summary\", null, \" Attach an overlay using drag and drop \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Upload an image from your computer by dragging a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/flow/manual/latest/docs/overview/supported-formats/#supported-image-formats\"\n  }, \"supported image\"), \" file onto the sidebar\")))), mdx(\"details\", null, mdx(\"summary\", null, \" Attach an overlay using the file selection dialog \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"+\"), \" button at the top of the sidebar to reveal the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Add image overlay\"), \" dialog\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click in the blue box to activate the file selection dialog or simply drag an image into the blue box\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Start upload\"), \" button\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"X\"), \" button at the top right of the popup dialog or anywhere outside of the dialog box to close it\")))), mdx(\"h3\", {\n    \"id\": \"deleting-overlays\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#deleting-overlays\",\n    \"aria-label\": \"deleting overlays permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Deleting Overlays\"), mdx(\"p\", null, \"Overlays can be deleted from the Overlays panel.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To delete an overlay from the Overlays panel \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Identify the overlay entry to be modified\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/a32ec4f732d0a65b77c514651863e448/viewer-panel-trash.svg\",\n    \"alt\": \"Delete\"\n  }), \" button\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"OK\"), \" button to confirm\")))), mdx(\"h2\", {\n    \"id\": \"overlay-properties\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#overlay-properties\",\n    \"aria-label\": \"overlay properties permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overlay Properties\"), mdx(\"div\", {\n    className: \"info\"\n  }, mdx(\"div\", null, \"If you attempt to modify an item which is governed by a \", mdx(\"a\", {\n    href: \"../../settings/policies/#reason-for-change-tracking\"\n  }, \"reason for change tracking policy\"), \", you will be required to provide a reason for the change.\")), mdx(\"h3\", {\n    \"id\": \"overlay-name\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#overlay-name\",\n    \"aria-label\": \"overlay name permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overlay Name\"), mdx(\"p\", null, \"The name is a single line text field that supports unicode characters.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To rename an overlay from the Overlays panel \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Identify the overlay entry to be modified\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the name of the entry\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Provide a name or edit the existing text\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Press the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Enter\"), \" key or click away from the textbox to save your changes\")))), mdx(\"h3\", {\n    \"id\": \"overlay-visibility\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#overlay-visibility\",\n    \"aria-label\": \"overlay visibility permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overlay Visibility\"), mdx(\"p\", null, \"Overlays are visible on the image by default once attached.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To change the visibility of individual overlays \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Identify the overlay entry to be modified\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/c715f4c9668501aaaf2cb016a175117f/viewer-panel-eye.svg\",\n    \"alt\": \"Eye\"\n  }), \" button to toggle visibility\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To change the visibility of all overlays \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/c715f4c9668501aaaf2cb016a175117f/viewer-panel-eye.svg\",\n    \"alt\": \"Eye\"\n  }), \" button at the top right corner of the Overlays panel to toggle visibility for all overlays\")))), mdx(\"h2\", {\n    \"id\": \"overlay-transform\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#overlay-transform\",\n    \"aria-label\": \"overlay transform permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overlay Transform\"), mdx(\"p\", null, \"By default, overlays are positioned at the origin (top left corner of the image's first sub-image's base resolution layer). If an uploaded overlay is meant to span a different region of interest, an appropriate transform may be defined.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To reposition an overlay \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/3283a4e311b90c09dff241e923f0ccaf/viewer-panel-transform.svg\",\n    \"alt\": \"Show Transformation\"\n  }), \" button next to an entry name in the panel to open the transform controls\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Perform one of the following:\"), mdx(\"ol\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Set the X and Y values to specify the coordinates of the top left corner (with respect to the image) and set the W (width) and H (height) values to specify the extent of the overlay, or\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"li\",\n    \"src\": \"/flow/manual/latest/028db2b9e0eeace2c6e52b2674003525/viewer-panel-scale.svg\",\n    \"alt\": \"Scale to Fit\"\n  }), \" button to scale the overlay so that it fits the image width\")))), mdx(\"div\", {\n    className: \"info\"\n  }, \"All values should be provided in pixel coordinates relative to the base resolution level of the image\")), mdx(\"h3\", {\n    \"id\": \"transform-limitations\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#transform-limitations\",\n    \"aria-label\": \"transform limitations permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Transform Limitations\"), mdx(\"p\", null, \"Transform operations may be limited for a given overlay depending on how it was generated.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Manually created overlays can be moved and resized\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Overlays imported from \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/flow/manual/latest/docs/integrations/halo-integration/\"\n  }, \"Indica Labs HALO\"), \" cannot be moved or resized\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/flow/manual/latest/docs/integrations/visiopharm-integration/\"\n  }, \"Visiopharm\"), \" MLD files converted to overlays can be moved, however the point of origin is the default position of the overlay and not the top left corner\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"These overlays can also be resized, but doing so may affect their position\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Heatmap overlays imported from Visiopharm can be moved and resized.\")), mdx(\"h2\", {\n    \"id\": \"overlay-rendering\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#overlay-rendering\",\n    \"aria-label\": \"overlay rendering permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overlay Rendering\"), mdx(\"p\", null, \"Overlays have a number of properties that define how they are rendered. These properties are shared for all team members and therefore, changes made by any user will be visible to other users.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To change the opacity of an overlay \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Adjust the opacity slider in the range of \", \"[0, 100]\", \" for an entry in the Overlays panel\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To add pseudocolor to an overlay \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"+ Add Pseudocolor\"), \" button for an entry in the Overlays panel\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"(Optional) Click on the color block to open the color palette and select a color from the palette\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To remove pseudocolor from an overlay \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"x Remove\"), \" button next to the color block of an entry in the Overlays panel (only available if a pseudocolor has been previously defined)\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To change the composite operation for an overlay \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the left sidebar is not displayed, toggle it by clicking on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu \", \">\"), \" button at the bottom left of the Viewer\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/dde7aad20071a1b9b0bd025ee70f9273/viewer-nav-layers.svg\",\n    \"alt\": \"Overlays\"\n  }), \" button in the left sidebar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Select a composite mode from the dropdown menu for an entry in the Overlays panel. See \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#compositing-operations\"\n  }, \"compositing operations\"), \" for more details. The default composite operation is \\\"Normal\\\"\")))), mdx(\"h3\", {\n    \"id\": \"compositing-operations\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#compositing-operations\",\n    \"aria-label\": \"compositing operations permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Compositing Operations\"), mdx(\"p\", null, \"Various compositing techniques are available for rendering overlaid images. These are a number of other modes that may be helpful depending on the types of images and desired effects.\"), mdx(\"details\", null, mdx(\"summary\", null, \" Overlay composition modes \"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Composite mode\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Normal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw this image on top of existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Source In\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw this image only where it overlaps existing content. Non-overlapping areas are made transparent.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Source Out\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw this image only where it doesn\\u2019t overlap existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Source Atop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw this image only where it overlaps existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Destination Over\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw this image behind existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Destination In\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw existing content only where it overlaps this image. Non-overlapping areas are made transparent.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Destination Out\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw existing content only where it does not overlap this image.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Destination Atop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw existing content only where it overlaps this image. This image is drawn behind existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Lighter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Add color values of this image with the color values of the existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Copy\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Replace the existing content with this image.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"XOR\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"This image and existing content are drawn only where there is no overlap.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Multiply\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Multiply the color values of this image with the color values of existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Screen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Color values of this image and the existing content are inverted, multiplied, then inverted again.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Overlay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A combination of multiply and screen.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Hard Light\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Like overlay, but with the top and bottom layers swapped.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Soft Light\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A softer version of hard light.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Darken\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Retain the darkest pixel between this image and the existing content.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Color Dodge\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Divide the color values of the existing content by the inverted color values of this image.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Color Burn\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Divide the inverted color values of the existing content by the color values of this image, and then invert the result.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Difference\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Subtract the color values of this image from the color values of the existing content and compute the absolute value.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Exclusion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Like difference, but with lower contrast.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Hue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Preserve the luma and chroma of the existing content while adopting the hue of this image.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Saturation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Preserve the luma and hue of the existing content while adopting the chroma of this image.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Color\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Preserve the luma of the existing content while adopting the hue and chroma of this image.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Luminosity\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Preserve the hue and chroma of the existing content while adopting the luma of this image.\"))))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#overlays-panel","title":"Overlays Panel","items":[{"url":"#attaching-overlays","title":"Attaching Overlays","items":[{"url":"#deleting-overlays","title":"Deleting Overlays"}]},{"url":"#overlay-properties","title":"Overlay Properties","items":[{"url":"#overlay-name","title":"Overlay Name"},{"url":"#overlay-visibility","title":"Overlay Visibility"}]},{"url":"#overlay-transform","title":"Overlay Transform","items":[{"url":"#transform-limitations","title":"Transform Limitations"}]},{"url":"#overlay-rendering","title":"Overlay Rendering","items":[{"url":"#compositing-operations","title":"Compositing Operations"}]}]}]}}},"pageContext":{"id":"8e4f3903-e76f-531f-aaa8-cc053dbe2d5e"}},"staticQueryHashes":["1086510573","1106176283","1122327541","2140385554","2719290676","3597609067","4027383558"]}