@searpent/react-image-annotate 2.0.77 → 2.0.78

package/src/Annotator/index.story.js

@@ -1,899 +0,0 @@
-// @flow
-
-import React, { useState } from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action as actionAddon } from "@storybook/addon-actions"
-import exampleImage from "../ImageCanvas/seves_desk.story.jpg"
-import bikeImg1 from "./bike-pic.png"
-import bikeImg2 from "./bike-pic2.png"
-import { HotKeys } from "react-hotkeys"
-import { defaultKeyMap } from "../ShortcutsManager"
-
-import Annotator from "./"
-
-import { testRegions, testRegionsBoxes } from "../ImageCanvas/index.story"
-import photosToImages from "../utils/photosToImages"
-import examplePhotos from "./examplePhotos"
-import exampleImages from './exampleImages';
-
-const middlewares = [
-  (store) => (next) => (action) => {
-    actionAddon(action.type)(action)
-    return next(action)
-  },
-]
-
-storiesOf("Annotator", module)
-  .add("Basic", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      regionTagList={["tag1", "tag2", "tag3"]}
-      imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      imageTagList={["tag1", "tag2", "tag3"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=1",
-          name: "Frame 0036",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=2",
-          name: "Frame 0037",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=3",
-          name: "Frame 0038",
-        },
-      ]}
-    />
-  ))
-  .add("Basic with onImagesChange", () => (
-    <HotKeys keyMap={defaultKeyMap}>
-      <div>
-        <div >
-          <Annotator
-            middlewares={middlewares}
-            labelImages
-            regionClsList={[
-              "author",
-              "appendix",
-              "photo_author",
-              "photo_caption",
-              "advertisement",
-              "other_graphics",
-              "unknown",
-              "title",
-              "about_author",
-              "image",
-              "subtitle",
-              "interview",
-              "table",
-              "text",
-              "continuation_ref",
-              "cover_clip",
-              "page_id",
-              "continuation_mark",
-              "follow_up_mark",
-              "article_termination_mark",
-              "page_splitting_stripe",
-              "column_id_stripe",
-              "prev_page_reference",
-              "section_subcategory"
-
-            ]}
-            help={`# Tools\n\n**E** - select tool\n\n**D** - frame tool\n\n**Ctrl** + **click frame** - edit frame\n\n**1**- **9** - change class`}
-            onImagesChange={(images) => console.log("[images changed to]:", images)}
-            images={photosToImages([examplePhotos[0]])}
-            clsColors={{
-              title: "#f70202",
-              subtitle: "#ffb405",
-              text: "#14deef",
-              author: "#f8d51e",
-              appendix: "#bfede2",
-              photo_author: "#9a17bb",
-              photo_caption: "#ff84f6",
-              advertisement: "#ffb201",
-              other_graphics: "#ff5400",
-              unknown: "#bfede2",
-              about_author: "#9a17bb",
-              image: "#14deef",
-              interview: "#23b20f",
-              table: "#02b4ba",
-              continuation_ref: '#FF33CC',
-              cover_clip: '#669966',
-              page_id: '#4433AA',
-              continuation_mark: '#660066',
-              follow_up_mark: '#873e23',
-              article_termination_mark: '#873e23',
-              page_splitting_stripe: '#873e23',
-              column_id_stripe: '#873e23',
-              prev_page_reference: '#f3a864',
-              section_subcategory: '#442c55',
-
-            }}
-            // groupColors={[
-            //   "#3853F1",
-            //   "#F6E54C",
-            //   "#39D33C",
-            //   "#CF24CF",
-            //   "#22E3ED",
-            //   "#EF3029",
-            // ]}
-            enabledTools={[]}
-            groupColors={['#343434', '#989898', '#dcdcdc']}
-            onGroupSelect={(groupId) => console.log('selected groupid:', groupId)}
-            hideHeader={true}
-            hideHistory={true}
-            hideNotEditingLabel={true}
-            showEditor={true}
-            showPageSelector={true}
-            albumMetadata={[{
-              key: "issueNumber", value: "12"
-            }, {
-              key: "issueType", value: "news"
-            }]}
-            metadataConfigs={[{
-              key: "issueNumber",
-              level: "album",
-              options: []
-            }, {
-              key: "issueType",
-              level: "album",
-              options: ['news', 'magazine', 'q&a']
-            }, {
-              key: "mutation",
-              level: "photo",
-              options: ['Morava', 'Slezsko', 'Cechy']
-            }, {
-              key: "previousArticleId",
-              level: "photo_metadata-engine",
-              options: [{
-                value: "alpha",
-                label: "0 - alpha"
-              }, {
-                value: "beta",
-                label: "1 - beta"
-              }, {
-                value: "gamma",
-                label: "2 - gamma"
-              }]
-            }, {
-              key: "pageNumber",
-              level: "photo",
-              options: []
-            }, {
-              key: "articleType",
-              level: "photo_metadata-engine",
-              // options: ['news', 'ads', 'interview']
-              selectable: true,
-              options: [{
-                value: "alpha",
-                label: "0 - alpha"
-              }, {
-                value: "beta",
-                label: "1 - beta"
-              }, {
-                value: "gamma",
-                label: "2 - gamma"
-              }]
-            }, {
-              key: "section",
-              level: "photo_metadata-engine",
-              options: ['editorial', 'article', 'last page']
-            }]}
-            onSelectedImageChange={(d) => console.log("[onSelectedImageChange] triggered:", d)}
-            onExit={(s) => console.log('[onExit] triggered:', s)}
-            save={async ({ image, triggerRecalc, albumMetadata }) => {
-              console.log(`[SYNC] image ${image.id} saving...  recalc: ${triggerRecalc} albumMetadata: ${albumMetadata.length}`)
-              return new Promise((resolve, reject) => {
-                setTimeout(() => {
-                  let lockedUntil = null;
-                  if (triggerRecalc) {
-                    var now = new Date();
-                    now.setSeconds(now.getSeconds() + 60);
-                    lockedUntil = now
-                  }
-                  resolve({ lockedUntil })
-                }, 3000)
-              })
-            }}
-            fetchImage={async ({ imageId }) => {
-              console.log(`[SYNC] image ${imageId} fetching...`)
-              return new Promise((resolve, reject) => {
-                setTimeout(() => {
-                  console.log(`[SYNC] image ${imageId} fetched`,)
-                  // resolve({
-                  //   image: { ...exampleImages[0], lockedUntil: new Date().toISOString(), id: imageId }
-                  // })
-                  resolve({
-                    image: { ...exampleImages[0], lockedUntil: null, id: imageId }
-                  })
-                }, 5000)
-              })
-            }}
-          />
-        </div>
-      </div>
-    </HotKeys >
-  ))
-  .add("Basic - Allow Comments", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      regionTagList={["tag1", "tag2", "tag3"]}
-      imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      imageTagList={["tag1", "tag2", "tag3"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=1",
-          name: "Frame 0036",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=2",
-          name: "Frame 0037",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=3",
-          name: "Frame 0038",
-        },
-      ]}
-      allowComments
-    />
-  ))
-  .add("Fixed Size Container", () => (
-    <div style={{ width: 500, height: 500 }}>
-      <Annotator
-        onExit={actionAddon("onExit")}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        labelImages
-        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        regionTagList={["tag1", "tag2", "tag3"]}
-        imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        imageTagList={["tag1", "tag2", "tag3"]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=1",
-            name: "Frame 0036",
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=2",
-            name: "Frame 0037",
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=3",
-            name: "Frame 0038",
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Shrunk Annotator (Test Fullscreen)", () => (
-    <div style={{ padding: 100 }}>
-      <Annotator
-        onExit={actionAddon("onExit")}
-        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        regionTagList={["tag1", "tag2", "tag3"]}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Annotator w/o No Region Labels or Image Labels", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-      ]}
-    />
-  ))
-  .add("Annotator with no enabled tools", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      enabledTools={[]}
-      showTags={false}
-      middlewares={middlewares}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-      ]}
-    />
-  ))
-  .add("Bounding Box Annotator with output to console.log", () => (
-    <Annotator
-      onExit={(out) => {
-        window.lastOutput = out
-        console.log(out)
-      }}
-      taskDescription={`## Annotate Hands\nDraw a bounding box around each hand.`}
-      enabledTools={["select", "create-box"]}
-      regionClsList={["Hand", "Face"]}
-      regionTagList={["Open Pinch", "Closed Pinch", "In Frame"]}
-      showTags={false}
-      images={[
-        {
-          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
-          name: "Bounding Box Test",
-          regions: [],
-        },
-        {
-          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
-          name: "Bounding Box Test",
-          regions: [],
-        },
-      ]}
-    />
-  ))
-  .add("Bounding Box Annotator with allowed area", () => (
-    <Annotator
-      taskDescription={`## Annotate Hands\nDraw a bounding box around each hand.`}
-      enabledTools={["select", "create-box"]}
-      regionClsList={["Hand", "Face"]}
-      regionTagList={["Open Pinch", "Closed Pinch", "In Frame"]}
-      showTags={false}
-      allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
-      images={[
-        {
-          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
-          name: "Bounding Box Test",
-          regions: [],
-        },
-      ]}
-    />
-  ))
-  .add("Car Annotation", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      regionClsList={["Car", "Sign", "Construction Barrier"]}
-      regionTagList={["Moving", "Stopped", "Obstacle"]}
-      imageClsList={["On Street", "Sidewalk", "Other"]}
-      // imageTagList={["tag1", "tag2", "tag3"]}
-      images={[
-        {
-          src: bikeImg1,
-          name: "Frame 03021",
-          regions: [
-            {
-              cls: "Car",
-              color: "hsl(82,100%,50%)",
-              h: 0.45921666772960146,
-              w: 0.3932156342484836,
-              x: 0.6302148980776354,
-              y: 0.5559504689545722,
-              type: "box",
-              id: "8776160642957009",
-              tags: ["Stopped"],
-              highlighted: false,
-              editingLabels: false,
-            },
-            {
-              cls: "Car",
-              color: "hsl(264,100%,50%)",
-              type: "box",
-              id: "885140028730734",
-              tags: ["Moving"],
-              w: 0.2627711048576583,
-              x: 0.20751775748638238,
-              y: 0.5566583219431673,
-              h: 0.268717618171478,
-              highlighted: false,
-              editingLabels: false,
-            },
-            {
-              cls: "Car",
-              color: "hsl(127,100%,50%)",
-              w: 0.033016094117647055,
-              x: 0.5051247779336334,
-              y: 0.5396378545840628,
-              h: 0.03423999999999994,
-              type: "box",
-              id: "5952553512262024",
-              tags: ["Stopped"],
-              highlighted: false,
-              editingLabels: false,
-            },
-            {
-              type: "box",
-              x: 0.7847296794208894,
-              y: 0.3635007199404308,
-              w: 0.04871147880041349,
-              h: 0.10995961095800888,
-              highlighted: true,
-              editingLabels: false,
-              color: "hsl(268,100%,50%)",
-              id: "5647593040225252",
-              cls: "Sign",
-            },
-          ],
-        },
-        {
-          src: bikeImg2,
-          name: "Frame 03022",
-          regions: [
-            {
-              type: "box",
-              x: 0.12226982552783494,
-              y: 0.5578947368421052,
-              w: 0.3301518695958121,
-              h: 0.33562583001232194,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(171,100%,50%)",
-              id: "014393439034159128",
-              cls: "Car",
-              tags: ["Stopped"],
-            },
-            {
-              type: "box",
-              x: 0.5018477698901193,
-              y: 0.5954194079501558,
-              w: 0.07194249496837657,
-              h: 0.06826906557009338,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(17,100%,50%)",
-              id: "02954614542034717",
-              cls: "Car",
-              tags: ["Moving"],
-            },
-            {
-              type: "box",
-              x: 0.6483083881082046,
-              y: 0.6217109311709718,
-              w: 0.08786544324705947,
-              h: 0.20450608002345438,
-              highlighted: true,
-              editingLabels: true,
-              color: "hsl(337,100%,50%)",
-              id: "9124138360972984",
-              cls: "Construction Barrier",
-              tags: ["Obstacle"],
-            },
-            {
-              type: "box",
-              x: 0.7628671305695606,
-              y: 0.6299511028935285,
-              w: 0.12734928166820647,
-              h: 0.2689292407634438,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(89,100%,50%)",
-              id: "5960600741979638",
-              cls: "Construction Barrier",
-            },
-            {
-              type: "box",
-              x: 0.5871362440754417,
-              y: 0.6232091442114366,
-              w: 0.06562102723514573,
-              h: 0.15281773012741662,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(326,100%,50%)",
-              id: "7955287536996538",
-              cls: "Construction Barrier",
-            },
-            {
-              type: "box",
-              x: 0.42943330004934643,
-              y: 0.6054718359824862,
-              w: 0.053210066743122564,
-              h: 0.054984658299147116,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(66,100%,50%)",
-              id: "49573139861381166",
-              cls: "Car",
-              tags: ["Stopped"],
-            },
-          ],
-        },
-      ]}
-      onExit={(out) => {
-        window.lastOutput = out
-        console.log(JSON.stringify(out.images))
-      }}
-    />
-  ))
-  .add("Annotator blocks scroll from propagating", () => (
-    <div style={{ height: "200vh" }}>
-      <Annotator
-        onExit={actionAddon("onExit")}
-        showTags={false}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-        ]}
-      />
-      <div style={{ color: "red" }}>You shouldn't be able to see this</div>
-    </div>
-  ))
-  .add("Annotator should not expand beyond parent", () => (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        padding: 100,
-        boxSizing: "border-box",
-      }}
-    >
-      <Annotator
-        onExit={actionAddon("onExit")}
-        showTags={false}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Video with frames as each image", () => (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        boxSizing: "border-box",
-      }}
-    >
-      <Annotator
-        onExit={actionAddon("onExit")}
-        showTags={false}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-            frameTime: 0,
-            name: "Frame 1",
-          },
-          {
-            src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-            frameTime: 4500,
-            name: "Frame 2",
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Keyframe video", () => (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        boxSizing: "border-box",
-      }}
-    >
-      <Annotator
-        onExit={(...args) => {
-          console.log(...args)
-          actionAddon("onExit")(...args)
-        }}
-        showTags
-        videoSrc="https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4"
-        videoTime={1000}
-        keyframes={{
-          0: {
-            regions: [
-              {
-                type: "point",
-                x: 0.1608187134502924,
-                y: 0.5769980506822612,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(238,100%,50%)",
-                id: "9995495728521284",
-              },
-              {
-                type: "box",
-                x: 0.089171974522293,
-                y: 0.36801132342533616,
-                w: 0.30573248407643316,
-                h: 0.4170794998820476,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(263,100%,50%)",
-                id: "04858393322065635",
-              },
-            ],
-          },
-          3333: {
-            regions: [
-              {
-                type: "point",
-                x: 0.1608187134502924,
-                y: 0.5769980506822612,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(238,100%,50%)",
-                id: "9995495728521284",
-              },
-              {
-                type: "box",
-                x: 0.14861995753715496,
-                y: 0.0934182590233546,
-                w: 0.3163481953290871,
-                h: 0.7596131163010142,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(263,100%,50%)",
-                id: "04858393322065635",
-              },
-            ],
-          },
-        }}
-      />
-    </div>
-  ))
-  .add("Override Next/Prev Button Handling", () => {
-    const images = [
-      exampleImage,
-      "https://loremflickr.com/100/100/cars?lock=1",
-      "https://loremflickr.com/100/100/cars?lock=2",
-    ]
-    const [selectedImageIndex, changeSelectedImageIndex] = useState(0)
-
-    return (
-      <Annotator
-        onExit={actionAddon("onExit")}
-        onNextImage={() => {
-          actionAddon("onNextImage")()
-          changeSelectedImageIndex((selectedImageIndex + 1) % 3)
-        }}
-        onPrevImage={() => {
-          actionAddon("onPrevImage")()
-          changeSelectedImageIndex((selectedImageIndex - 1 + 3) % 3)
-        }}
-        labelImages
-        selectedImage={images[selectedImageIndex]}
-        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-          },
-          {
-            src: images[1],
-            name: "Frame 0036",
-          },
-          {
-            src: images[2],
-            name: "Frame 0037",
-          },
-        ]}
-      />
-    )
-  })
-  .add("Override RegionEditLabel", () => {
-    const images = [
-      exampleImage,
-      "https://loremflickr.com/100/100/cars?lock=1",
-      "https://loremflickr.com/100/100/cars?lock=2",
-    ]
-
-    const NewRegionEditLabel = ({
-      region,
-      editing,
-      onDelete,
-      onChange,
-      onClose,
-      onOpen,
-    }) => {
-      return (
-        <div style={{ backgroundColor: "white" }}>
-          I'm the closed part
-          <div style={{ display: editing ? "block" : "none" }}>
-            I'm the part that shows when it's being edited!
-            <button onClick={() => onDelete(region)}>Delete This Region</button>
-            <button
-              onClick={() => onChange({ ...region, cls: "awesome-value" })}
-            >
-              Set Classification to "awesome-value"
-            </button>
-            <button onClick={() => onClose(region)}>Close the edit mode</button>
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <Annotator
-        onExit={actionAddon("onExit")}
-        labelImages
-        selectedImage={images[0]}
-        RegionEditLabel={NewRegionEditLabel}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-          },
-          {
-            src: images[1],
-            name: "Frame 0036",
-          },
-          {
-            src: images[2],
-            name: "Frame 0037",
-          },
-        ]}
-      />
-    )
-  })
-  .add("Two on sample page w/ hotkeys", () => {
-    return (
-      <HotKeys keyMap={defaultKeyMap}>
-        <div>
-          <div style={{ height: 600 }}>
-            <Annotator
-              onExit={actionAddon("onExit")}
-              regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-              imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-              middlewares={[
-                (store) => (next) => (action) => {
-                  actionAddon(action.type)(action)
-                  return next(action)
-                },
-              ]}
-              images={[
-                {
-                  src: exampleImage,
-                  name: "Seve's Desk",
-                  regions: testRegions,
-                },
-              ]}
-            />
-          </div>
-          <div style={{ height: 600 }}>
-            <Annotator
-              onExit={actionAddon("onExit")}
-              middlewares={[
-                (store) => (next) => (action) => {
-                  actionAddon(action.type)(action)
-                  return next(action)
-                },
-              ]}
-              images={[
-                {
-                  src: exampleImage,
-                  name: "Seve's Desk",
-                  regions: testRegions,
-                },
-              ]}
-            />
-          </div>
-        </div>
-      </HotKeys>
-    )
-  })
-  .add("CORs Error (Pixel Segmentation)", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      fullImageSegmentationMode
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: "https://placebear.com/200/300",
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))
-  .add("Modify Allowed Area", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      fullImageSegmentationMode
-      allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
-      enabledTools={["modify-allowed-area"]}
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))
-  .add("Hide Next, Hide Header Text", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      labelImages
-      hideNext
-      hideHeaderText
-      fullImageSegmentationMode
-      enabledTools={["modify-allowed-area"]}
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))
-  .add("Hide Header", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      labelImages
-      hideHeader
-      fullImageSegmentationMode
-      enabledTools={["modify-allowed-area"]}
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))