Skip to content

Commit

Permalink
Fix/mn 380/remove crops (#609)
Browse files Browse the repository at this point in the history 
* Fixed the way the damage images are processed in damage report

* Switched to show damages by default in damage modal

---------

Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>
  • Loading branch information
@souyahia-monk
souyahia-monk and souyahia-monk authored Nov 14, 2023
1 parent 7d23800 commit f94ef55
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 46 deletions.
4 changes: 2 additions & 2 deletions packages/inspection-report/src/components/DamageReport/UpdateDamageModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
const { width, height } = useWindowDimensions();
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
const [gestureState, setGestureState] = useState({});
const [seeDamages, setSeeDamages] = useState(false);
const [seeDamages, setSeeDamages] = useState(true);
const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
const [fullScreenPhoto, setFullScreenPhoto] = useState(null);

Expand Down Expand Up @@ -212,7 +212,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
</Pressable>
<Text style={styles.header}>{t(`damageReport.parts.${part}`)}</Text>
<Pressable style={styles.damageIconWrapper} onPress={handleVisibilityOfDamages}>
<MaterialIcons name={seeDamages ? "visibility-off" : "visibility"} size={20} color="#fff" />
<MaterialIcons name={seeDamages ? 'visibility-off' : 'visibility'} size={20} color="#fff" />
<Text style={styles.damageLabel}>{seeDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
</Pressable>
</View>
Expand Down
6 changes: 3 additions & 3 deletions packages/inspection-report/src/components/DamageReport/hooks/useDamageReportStateHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ export default function useDamageReportStateHandlers({
throw new Error(`Unable to find damage with corresponding pill part "${partName}"`);
}
const { images } = damage;
const partDamageImages = images.filter(img => img.base_image_type === "beauty_shot").map((img, index) => ({
const partDamageImages = images.filter((img) => img.image_type === 'beauty_shot').map((img) => ({
...img,
rendered_outputs: pictures.find(pic => pic.id === img?.id)?.rendered_outputs
rendered_outputs: pictures.find((pic) => pic.id === img?.id)?.rendered_outputs,
}));
const zoomedDamageImages = images.filter(img => img.base_image_type === "close_up");
const zoomedDamageImages = images.filter((img) => img.image_type === 'close_up');
setEditedDamage(damage);
setEditedDamagePart(partName);
setEditedDamageImages(images);
Expand Down
47 changes: 28 additions & 19 deletions packages/inspection-report/src/components/DamageReport/hooks/useProcessInspection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function getRenderedOutputImages(image) {
.find((damage) => damage?.additional_data?.description === 'rendering of detected damages');

if (!damagedImage) {
return;
return undefined;
}

return {
Expand All @@ -66,25 +66,34 @@ function getPictures(inspection) {
}

function getDamages(inspection) {
return inspection.severity_results?.map((severityResult) => ({
id: severityResult.id,
part: severityResult.label,
images: inspection.parts?.find(
(inspectionPart) => (inspectionPart.id === severityResult.related_item_id),
)?.related_images?.map(
(relatedImage) => ({
id: relatedImage.base_image_id,
base_image_type: relatedImage.base_image_type,
object_type: relatedImage.object_type,
url: relatedImage.path,
}),
) ?? [],
severity: getSeverity(severityResult.value.custom_severity.level),
pricing: severityResult.value.custom_severity.pricing ?? 0,
repairOperation: getRepairOperation(
return inspection.severity_results?.map((severityResult) => {
const damageId = severityResult.id;
const partName = severityResult.label;
const partId = inspection.parts?.find((part) => part.part_type === partName)?.id;
const images = inspection.images?.filter(
(image) => (['beauty_shot', 'close_up'].includes(image.image_type)
&& image.views?.some((view) => view?.element_id === partId)),
)?.map((image) => ({
id: image.id,
image_type: image.image_type,
object_type: image.object_type,
url: image.path,
})) ?? [];
const severity = getSeverity(severityResult.value.custom_severity.level);
const pricing = severityResult.value.custom_severity.pricing ?? 0;
const repairOperation = getRepairOperation(
severityResult.value.custom_severity.repair_operation?.REPLACE,
),
})) ?? [];
);

return {
id: damageId,
part: partName,
images,
severity,
pricing,
repairOperation,
};
}) ?? [];
}

function isTaskDone(task, inspection) {
Expand Down
49 changes: 29 additions & 20 deletions packages/inspection-report/src/components/Gallery/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { MaterialIcons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';

import Thumbnail from './Thumbnail';
import { useDesktopMode } from './../../hooks';
import { useDesktopMode } from '../../hooks';

const styles = StyleSheet.create({
container: {
Expand Down Expand Up @@ -83,7 +83,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
margin: 5,
paddingTop: 10,
}
},
});

function Gallery({ pictures }) {
Expand Down Expand Up @@ -116,7 +116,8 @@ function Gallery({ pictures }) {
onMoveShouldSetPanResponder: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: () => true,
onPanResponderRelease: (event, gestureStat) => setGestureState({ dx: gestureStat.x0, dy: gestureStat.y0 }),
onPanResponderRelease:
(event, gestureStat) => setGestureState({ dx: gestureStat.x0, dy: gestureStat.y0 }),
}),
).current;

Expand All @@ -133,7 +134,7 @@ function Gallery({ pictures }) {

let x = 0;
let y = 0;
let { dx, dy } = gestureState;
const { dx, dy } = gestureState;

if (isZoomed) {
x = 0;
Expand All @@ -144,11 +145,11 @@ function Gallery({ pictures }) {

// x > 0 will check whether we clicked on left side of image or not
if ((dx < x && x > 0) || (dx > x && x < 0)) {
x = x / 2;
x /= 2;
}
// y > 0 will check whether we clicked on top side of image or not
if ((dy < y && y > 0) || (dy > y && y < 0)) {
y = y / 2;
y /= 2;
}
}

Expand All @@ -167,28 +168,32 @@ function Gallery({ pictures }) {
return; // Do nothing if the event was already processed
}

const currentPictureIndex = pictures.findIndex(pic => pic.id === focusedPhoto.id);
const currentPictureIndex = pictures.findIndex((pic) => pic.id === focusedPhoto.id);
switch (event.key) {
case "ArrowLeft":
if ((focusedPhoto?.isRendered && currentPictureIndex >= 0) || currentPictureIndex - 1 >= 0) {
case 'ArrowLeft':
if ((focusedPhoto?.isRendered && currentPictureIndex >= 0)
|| currentPictureIndex - 1 >= 0) {
if (focusedPhoto.isRendered) {
setFocusedPhoto(pictures[currentPictureIndex]);
} else {
setFocusedPhoto(
pictures[currentPictureIndex - 1]?.rendered_outputs ?
pictures[currentPictureIndex - 1]?.rendered_outputs : pictures[currentPictureIndex]
pictures[currentPictureIndex - 1]?.rendered_outputs
? pictures[currentPictureIndex - 1]?.rendered_outputs
: pictures[currentPictureIndex],
);
}
}
break;
case "ArrowRight":
if ((!focusedPhoto?.isRendered && currentPictureIndex < pictures.length) || currentPictureIndex + 1 < pictures.length) {
case 'ArrowRight':
if ((!focusedPhoto?.isRendered && currentPictureIndex < pictures.length)
|| currentPictureIndex + 1 < pictures.length) {
if (focusedPhoto.isRendered) {
setFocusedPhoto(pictures[currentPictureIndex + 1]);
} else {
setFocusedPhoto(
pictures[currentPictureIndex]?.rendered_outputs ?
pictures[currentPictureIndex]?.rendered_outputs : pictures[currentPictureIndex + 1]
pictures[currentPictureIndex]?.rendered_outputs
? pictures[currentPictureIndex]?.rendered_outputs
: pictures[currentPictureIndex + 1],
);
}
}
Expand All @@ -206,21 +211,23 @@ function Gallery({ pictures }) {
window.removeEventListener('keydown', handleKeyboardChange);
};
}
return () => {};
}, [pictures, focusedPhoto]);

return (
<View style={[
styles.container,
pictures.length === 0 ? styles.messageContainer : {}
]}>
pictures.length === 0 ? styles.messageContainer : {},
]}
>
{pictures.length > 0 ? pictures.map((image, index) => (
// eslint-disable-next-line react/no-array-index-key
<View key={`${image.url}-${index}`} style={isDesktopMode && styles.partsImageWrapper}>
<View style={styles.thumbnailWrapper}>
<Thumbnail image={image} click={handleOnImageClick} />
</View>
{
isDesktopMode && image?.rendered_outputs && image?.rendered_outputs && (
isDesktopMode && image?.rendered_outputs && (
<View style={styles.thumbnailWrapper}>
<Thumbnail image={image.rendered_outputs} click={handleOnImageClick} />
</View>
Expand Down Expand Up @@ -248,13 +255,15 @@ function Gallery({ pictures }) {
</Pressable>
<View style={[styles.header]}>
<Text style={[styles.title]}>
{(focusedPhoto?.label) ? focusedPhoto.label[i18n.language] : ''} {focusedPhoto?.isRendered && t('gallery.withDamages')}
{(focusedPhoto?.label) ? focusedPhoto.label[i18n.language] : ''}
{' '}
{focusedPhoto?.isRendered && t('gallery.withDamages')}
</Text>
</View>
{
!isDesktopMode && (
<Pressable style={styles.damageIconWrapper} onPress={handleVisibilityOfDamages}>
<MaterialIcons name={seeDamages ? "visibility-off" : "visibility"} size={20} color="#fff" />
<MaterialIcons name={seeDamages ? 'visibility-off' : 'visibility'} size={20} color="#fff" />
<Text style={styles.damageLabel}>{seeDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
</Pressable>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/inspection-report/src/i18n/resources/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const en = {
},
gallery: {
empty: 'This inspection does not have any photo yet.',
withDamages: '(with damages)'
withDamages: '(with damages)',
},
damageManipulator: {
damages: 'Damages',
Expand Down
2 changes: 1 addition & 1 deletion packages/inspection-report/src/i18n/resources/fr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const fr = {
},
gallery: {
empty: 'Cette inspection n\'a pas encore de photo.',
withDamages: '(avec dommages)'
withDamages: '(avec dommages)',
},
damageManipulator: {
damages: 'Dégâts',
Expand Down

0 comments on commit f94ef55

Please sign in to comment.