feat: add image editor in dataset form (#2180) #2246

andre-code · 2022-12-20T14:43:33Z

PR to add image editor.

Note: Also included the correction of the title in the project header when an image already exists.

Closes #2180
/deploy renku=000-cypres-tests-new-search #persist #cypress

RenkuBot · 2022-12-20T14:44:38Z

You can access the deployment of this PR at https://renku-ci-ui-2246.dev.renku.ch

ciyer

Very nice implementation. The edit feature looks good and works well!

I have a few minor things that could be improved.

It was not immediately obvious that I could reposition the center of the image. I think either adding some text to say that you can reposition the image or some controls (arrows) to move the center would make this clearer
It would be nice to have a "Reset" button to go back to how the image looked in the beginning.
The image "moves" when switching to "Edit," even though I did not reposition the image

ciyer · 2023-01-04T09:40:33Z

client/src/dataset/Dataset.present.js

@@ -109,7 +109,7 @@ function DisplayFiles(props) {
 }

 function DisplayProjects(props) {
-  if (props.projects === undefined) return null;
+  if (props?.projects === undefined) return null;


Can props be undefined?

ciyer · 2023-01-04T10:14:37Z

client/src/model/RenkuModels.js

@@ -618,9 +618,9 @@ const datasetFormSchema = new Schema({
    label: "Image",
    edit: true,
    type: FormGenerator.FieldTypes.IMAGE,
-    maxSize: 200 * 1024,
+    maxSize: 10000 * 1024,


This seems like a very high size limit to me. I can understand wanting to permit images larger than 200KB, but 10MB seems really big. I think 2MB would be a good big image size.

This is just for selecting the image, the uploaded one should be resized/downgraded to <200kb.
We can allow for bigger images here. Maybe users wish to take just a tiny part of a bigger image (E.G. I often take a full-screen screenshot and use just a tiny part from it -- that would be bigger than 2MB)

ciyer

I like the new changes, I think this works very well!

I found one small problem, which is that the old images seem to be cached in the dataset. Try the following:

create a dataset (with an avatar image)
change the avatar

Then the UI will still show the old image. If you refresh the page, the new image will appear, but not until then.

…ts even if it cannot be edited

andre-code · 2023-01-10T08:05:05Z

I like the new changes, I think this works very well!

I found one small problem, which is that the old images seem to be cached in the dataset. Try the following:

create a dataset (with an avatar image)

change the avatar

Then the UI will still show the old image. If you refresh the page, the new image will appear, but not until then.

Thanks @ciyer for reporting this, I have added a workaround to display the latest image available.
FYI, Gitlab returns the same url after editing so it was necessary to add an extra value in the url to force the browser to fetch the latest image.

ciyer

👍

RenkuBot · 2023-01-10T11:34:07Z

Tearing down the temporary RenkuLab deplyoment for this PR.

andre-code temporarily deployed to renku-ci-ui-2246 December 20, 2022 14:43 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from a870884 to 37de9a9 Compare January 3, 2023 07:49

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 07:49 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from 37de9a9 to d64bcbf Compare January 3, 2023 08:38

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 08:38 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from d64bcbf to c0e8d6c Compare January 3, 2023 09:09

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 09:09 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from c0e8d6c to 9ba7b62 Compare January 3, 2023 09:45

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 09:46 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from 9ba7b62 to ddcefcc Compare January 3, 2023 10:23

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 10:23 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from ddcefcc to b43be97 Compare January 3, 2023 13:01

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 13:01 — with GitHub Actions Inactive

andre-code changed the title ~~WIP add image input~~ feat: add image editor in datasets (#2180) Jan 3, 2023

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 13:32 — with GitHub Actions Inactive

andre-code had a problem deploying to renku-ci-ui-2246 January 3, 2023 13:38 — with GitHub Actions Error

andre-code force-pushed the 2180-add-image-editor branch from b43be97 to d645243 Compare January 3, 2023 13:39

andre-code changed the title ~~feat: add image editor in datasets (#2180)~~ feat: add image editor in dataset form (#2180) Jan 3, 2023

andre-code had a problem deploying to renku-ci-ui-2246 January 3, 2023 13:40 — with GitHub Actions Error

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 13:40 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from d645243 to a5a8feb Compare January 3, 2023 14:06

andre-code had a problem deploying to renku-ci-ui-2246 January 3, 2023 14:06 — with GitHub Actions Error

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 14:10 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 14:30 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from a5a8feb to 2440494 Compare January 3, 2023 14:35

andre-code had a problem deploying to renku-ci-ui-2246 January 3, 2023 14:36 — with GitHub Actions Failure

andre-code force-pushed the 2180-add-image-editor branch from 2440494 to e5ab5dd Compare January 3, 2023 14:39

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 14:39 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-2246 January 3, 2023 14:57 — with GitHub Actions Inactive

ciyer requested changes Jan 4, 2023

View reviewed changes

andre-code temporarily deployed to renku-ci-ui-2246 January 4, 2023 19:16 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-2246 January 5, 2023 17:17 — with GitHub Actions Inactive

andre-code had a problem deploying to renku-ci-ui-2246 January 6, 2023 09:30 — with GitHub Actions Error

andre-code force-pushed the 2180-add-image-editor branch from bdba857 to 16c7009 Compare January 6, 2023 09:31

andre-code temporarily deployed to renku-ci-ui-2246 January 6, 2023 09:31 — with GitHub Actions Inactive

andre-code had a problem deploying to renku-ci-ui-2246 January 6, 2023 09:55 — with GitHub Actions Error

andre-code temporarily deployed to renku-ci-ui-2246 January 6, 2023 10:00 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-2246 January 6, 2023 14:45 — with GitHub Actions Inactive

ciyer requested changes Jan 6, 2023

View reviewed changes

andre-code force-pushed the 2180-add-image-editor branch from 6d04659 to 2155b69 Compare January 9, 2023 14:07

andre-code temporarily deployed to renku-ci-ui-2246 January 9, 2023 14:07 — with GitHub Actions Inactive

andre-code force-pushed the 2180-add-image-editor branch from 2155b69 to f522f51 Compare January 9, 2023 16:21

andre-code temporarily deployed to renku-ci-ui-2246 January 9, 2023 16:21 — with GitHub Actions Inactive

andre-code added 7 commits January 10, 2023 08:40

feat: add image editor

9bedcd1

fix: handle error when projects use in exist but is not an array

5607974

include pic to resize images, always show controls when an image exis…

094e499

…ts even if it cannot be edited

do not display controls when the image is not editable

9c97f9d

add comment about resize image library

f53ff4e

remove title text in entity header when already exist an image

c5d3b7c

avoid cached image for dataset

7664b39

andre-code force-pushed the 2180-add-image-editor branch from f522f51 to 7664b39 Compare January 10, 2023 08:02

andre-code temporarily deployed to renku-ci-ui-2246 January 10, 2023 08:02 — with GitHub Actions Inactive

ciyer approved these changes Jan 10, 2023

View reviewed changes

Merge branch 'master' into 2180-add-image-editor

aee8f60

andre-code deployed to renku-ci-ui-2246 January 10, 2023 10:25 — with GitHub Actions Active

andre-code merged commit 14ff075 into master Jan 10, 2023

andre-code deleted the 2180-add-image-editor branch January 10, 2023 11:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add image editor in dataset form (#2180) #2246

feat: add image editor in dataset form (#2180) #2246

andre-code commented Dec 20, 2022 •

edited

Loading

RenkuBot commented Dec 20, 2022

ciyer left a comment

ciyer Jan 4, 2023

ciyer Jan 4, 2023

lorenzo-cavazzi Jan 4, 2023

ciyer left a comment

andre-code commented Jan 10, 2023 •

edited

Loading

ciyer left a comment

RenkuBot commented Jan 10, 2023

feat: add image editor in dataset form (#2180) #2246

feat: add image editor in dataset form (#2180) #2246

Conversation

andre-code commented Dec 20, 2022 • edited Loading

RenkuBot commented Dec 20, 2022

ciyer left a comment

Choose a reason for hiding this comment

ciyer Jan 4, 2023

Choose a reason for hiding this comment

ciyer Jan 4, 2023

Choose a reason for hiding this comment

lorenzo-cavazzi Jan 4, 2023

Choose a reason for hiding this comment

ciyer left a comment

Choose a reason for hiding this comment

andre-code commented Jan 10, 2023 • edited Loading

ciyer left a comment

Choose a reason for hiding this comment

RenkuBot commented Jan 10, 2023

andre-code commented Dec 20, 2022 •

edited

Loading

andre-code commented Jan 10, 2023 •

edited

Loading