Adding RectangleRoi state with external data is not being rendered in a thumbnail of the correct canvas

[JoseMoreville]

Prerequisites

• [4.15.2] Which version are you using?
• [Yes] Are you reporting to the correct repository?
• [Yes] Did you search existing issues? (Were any related?)

Description

I calling the server to provide me annotations if exist to display it in a preview of the case image (thumbnail) What i basically do is to enable the element, and then do an axios call to fetch the data, I iterate until I get the toolstate data and then I add the tool State with addToolState. the data is being added according the getToolState method but is not being rendered(I tried with update image and resize too).

Steps to Reproduce the issue

This is the code i use to render the annotations. I'm using Vue.

cornerstone.enable(this.$refs.firstElement);

      cornerstone
        .loadImage(this.$refs.firstElement.getAttribute(["data-image"]))
        .then((img) => {
          cornerstone.displayImage(this.$refs.firstElement, img);

          const RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
          const PanTool = cornerstoneTools.PanTool;
          const ZoomTool = cornerstoneTools.ZoomTool;
          cornerstoneTools.addToolForElement(
            this.$refs.firstElement,
            RectangleRoiTool
          );
          cornerstoneTools.addToolForElement(this.$refs.firstElement, PanTool);
          cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });

          axios
            .post("/menu/thumbnail_annotations", {
              case_uuid: this.case_uuid,
            })
            .then((e) => {
              const first_image = this.$refs.firstElement
                .getAttribute(["data-image"])
                .split("/")[5]
                .split(".")[0];

              for (const report in e.data.reports) {
                if (Object.hasOwnProperty.call(e.data.reports, report)) {
                  const ALL_REPORTS = e.data.reports[report]["annotations"];
                  for (const report in ALL_REPORTS) {

                    if (Object.hasOwnProperty.call(ALL_REPORTS, report)) {
                      const REPORT = ALL_REPORTS[report];

                      for (const REPORT_ANNOTATIONS in element[report]) {
                        ALL_REPORTS[report][REPORT_ANNOTATIONS].map((bbox) => {
                          // Render the annotation from case report using addToolState function of cornerstoneTools
                          console.log(bbox);
                          cornerstoneTools.addToolState(
                            this.$refs.firstElement,
                            RectangleRoiTool.name,
                            bbox
                          );
                        });
                      }
                    }

                  }

                  // Update cornerstone enabled element
                  cornerstone.updateImage(this.$refs.firstElement);

                  // get the current tool state and update the UI
                  const toolState = cornerstoneTools.getToolState(
                    this.$refs.firstElement,
                    RectangleRoiTool.name
                  );

                  console.log(toolState, "ToolState");
                  for (const ele of cornerstone.getEnabledElements()) {
                    cornerstone.resize(ele["element"]);
                  }
                  cornerstone.updateImage(this.$refs.firstElement);
                }
              }
            });
        });

Expected behavior: It's expected to show the images in a smaller canvas (thumbnail)

Actual behavior: Data is being stored but not rendered inside of the canvas

[burnpiro]

Call:

cornerstone.draw(HTMLElementReference)

CS won't redraw a new state until you either call it or generate an Event. Calling draw() is easier.

[JoseMoreville]

Call:

cornerstone.draw(HTMLElementReference)

CS won't redraw a new state until you either call it or generate an Event. Calling draw() is easier.

It didn't work, it's the save as updating the canvas. tried before, and after the code