Skip to content

Commit 3d133b5

Browse files
Prajwal-MicrosoftPrajwal-Microsoft
authored
Merge pull request #11 from microsoft/psl-raju-dev
fix : Bug fixes ( #15933 and #16073)
2 parents 807b62f + 5d6bc70 commit 3d133b5

File tree

6 files changed

+121
-33
lines changed

6 files changed

+121
-33
lines changed

‎src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,44 @@
44
border: 1px solid rgb(219, 219, 219)
55
}
66

7+
.imageErrorContainer{
8+
background: rgba(0, 0, 0, 0.3);
9+
/* margin: auto; */
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
15+
.invalidImagePopup{
16+
width: 100%;
17+
padding: auto;
18+
margin: auto;
19+
z-index: 99999;
20+
/* background: white; */
21+
padding: 35px;
22+
box-sizing: content-box;
23+
margin: 30px;
24+
border-radius: 6px;
25+
border: 1px solid #c0c0c0;
26+
/* font-size: 21px; */
27+
/* font-weight: 600; */
28+
box-shadow: azure;
29+
/* transform: translate(-50%, -50%); */
30+
/* top: 50%; */
31+
/* left: 50%; */
32+
background: white;
33+
/* display: flex
34+
; */
35+
background-color: white;
36+
border: 1px solid #ddd;
37+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
38+
39+
.imgEH{
40+
font-size: 24px;
41+
font-weight: 600;
42+
}
43+
44+
}
45+
46+
47+

‎src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
22
import { useTranslation } from "react-i18next";
33
import { Document } from "./DocumentViewer.types";
44
import { TIFFViewer } from 'react-tiff';
@@ -17,10 +17,18 @@ interface IIFrameComponentProps {
1717

1818
const DocumentViewer = ({ className, metadata, urlWithSasToken, iframeKey }: IIFrameComponentProps) => {
1919
const { t } = useTranslation();
20+
const [imgError, setImageError] = useState(false);
21+
22+
useEffect(() => {
23+
setImageError(false)
24+
}, [urlWithSasToken])
25+
26+
// Ref for the container div where the Dialog will be rendered
27+
const containerRef = React.useRef<HTMLDivElement | null>(null);
2028

2129
const getContentComponent = () => {
2230
if (!metadata || !urlWithSasToken) {
23-
return <div style={{textAlign:'center'}}>{t("components.document.none", "No document available")}</div>;
31+
return <div style={{ textAlign: 'center' }}>{t("components.document.none", "No document available")}</div>;
2432
}
2533

2634
switch (metadata.mimeType) {
@@ -50,7 +58,7 @@ const DocumentViewer = ({ className, metadata, urlWithSasToken, iframeKey }: IIF
5058
case "image/svg+xml": {
5159
return <div className="imageContainer">
5260
<Zoom>
53-
<img src={urlWithSasToken} alt={"Document"} width="100%" height="100%" className="document-image" />
61+
<img src={urlWithSasToken} alt={"Document"} onError={() => setImageError(true)} width="100%" height="100%" className="document-image" />
5462
</Zoom>
5563
</div>;
5664
}
@@ -94,7 +102,17 @@ const DocumentViewer = ({ className, metadata, urlWithSasToken, iframeKey }: IIF
94102
}
95103
};
96104

97-
return <div className={`${className}`}>{getContentComponent()}</div>;
105+
return <> <div className={`${className} ${imgError ? 'imageErrorContainer' : ''}`}>
106+
{imgError ?
107+
<div className={"invalidImagePopup"}>
108+
<span className="imgEH">We can't open this file</span>
109+
<p className="imgCtn">Something went wrong.</p>
110+
</div>
111+
: getContentComponent()
112+
}
113+
</div>
114+
115+
</>;
98116
}
99117

100118
export default DocumentViewer;

‎src/ContentProcessorWeb/src/Pages/DefaultPage/DefaultPageContent.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
2626
import httpUtility from "../../Services/httpUtility.ts";
2727
import { JsonEditor } from "json-edit-react";
2828
import { CheckmarkCircleFilled } from "@fluentui/react-icons";
29-
import { fetchContentJsonData } from '../../store/slices/centerPanelSlice';
29+
import { fetchContentJsonData , setActiveProcessId } from '../../store/slices/centerPanelSlice';
3030

3131

3232
interface ContentProps {
@@ -113,7 +113,7 @@ const ContentDevelopers: React.FC<ContentProps> = ({
113113
const styles = useStyles();
114114
const dispatch = useDispatch<AppDispatch>();
115115
const [comment, setComment] = React.useState("");
116-
const [selectedProcessId, setSelectedProcessId] = React.useState<string | null>(null);
116+
//const [selectedProcessId, setSelectedProcessId] = React.useState<string | null>(null);
117117
const [selectedTab, setSelectedTab] = React.useState<TabValue>("extracted-results");
118118
const [ApiLoader ,setApiLoader] = useState(false);
119119
const status = ['extract','processing','map','evaluate'];
@@ -125,12 +125,14 @@ const ContentDevelopers: React.FC<ContentProps> = ({
125125
modified_result: state.centerPanel.modified_result,
126126
isSavingInProgress: state.centerPanel.isSavingInProgress,
127127
processStepsData: state.centerPanel.processStepsData,
128-
selectedItem : state.leftPanel.selectedItem
128+
selectedItem : state.leftPanel.selectedItem,
129+
activeProcessId : state.centerPanel.activeProcessId
129130
}), shallowEqual
130131
);
131132

132133
useEffect(() => {
133-
setSelectedProcessId(store.processId)
134+
//setSelectedProcessId(store.processId);
135+
dispatch(setActiveProcessId(store.processId))
134136
setComment('');
135137
}, [store.processId])
136138

@@ -144,19 +146,19 @@ const ContentDevelopers: React.FC<ContentProps> = ({
144146
try {
145147
setApiLoader(true);
146148
await Promise.allSettled([
147-
dispatch(fetchContentJsonData({ processId: selectedProcessId })),
148-
dispatch(fetchProcessSteps({ processId: selectedProcessId }))
149+
dispatch(fetchContentJsonData({ processId: store.activeProcessId })),
150+
dispatch(fetchProcessSteps({ processId: store.activeProcessId }))
149151
]);
150152
} catch (error) {
151153
console.error("Error fetching data:", error);
152154
} finally {
153155
setApiLoader(false);
154156
}
155157
}
156-
if ((selectedProcessId != null || selectedProcessId != '') && !status.includes(store.selectedItem.status) && store.selectedItem?.process_id === selectedProcessId ) {
158+
if ((store.activeProcessId != null || store.activeProcessId != '') && !status.includes(store.selectedItem.status) && store.selectedItem?.process_id === store.activeProcessId ) {
157159
fetchContent();
158160
}
159-
}, [selectedProcessId, store.selectedItem])
161+
}, [store.activeProcessId, store.selectedItem])
160162

161163
const renderProcessTimeInSeconds = (timeString: string) => {
162164
if (!timeString) {
@@ -176,13 +178,13 @@ const ContentDevelopers: React.FC<ContentProps> = ({
176178

177179
const ExtractedResults = React.useCallback(() => (
178180
<div role="tabpanel" className={styles.tabItemCotnent} aria-labelledby="Extracted Results">
179-
{selectedProcessId && !status.includes(store.selectedItem.status) ? (
181+
{store.activeProcessId && !status.includes(store.selectedItem.status) ? (
180182
<JSONEditor
181-
processId={selectedProcessId}
183+
processId={store.activeProcessId}
182184
/>
183185
) : <p style={{textAlign:'center'}}>No data available</p>}
184186
</div>
185-
), [selectedProcessId,store.selectedItem]);
187+
), [store.activeProcessId,store.selectedItem]);
186188

187189
const ProcessHistory = useCallback(() => (
188190
<div role="tabpanel" className={styles.processTabItemCotnent} aria-labelledby="Process Steps">
@@ -220,7 +222,7 @@ const ContentDevelopers: React.FC<ContentProps> = ({
220222
{ApiLoader ? <div className={styles.apiLoader}><p>Loading...</p></div>
221223
: (store.processStepsData?.length == 0 || status.includes(store.selectedItem.status)) && <p style={{textAlign:'center'}}> No data available</p>}
222224
</div>
223-
), [store.processStepsData, selectedProcessId, styles.tabItemCotnent, ApiLoader]);
225+
), [store.processStepsData, store.activeProcessId, styles.tabItemCotnent, ApiLoader]);
224226

225227
const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
226228
setSelectedTab(data.value);
@@ -230,7 +232,7 @@ const ContentDevelopers: React.FC<ContentProps> = ({
230232
try {
231233
dispatch(startLoader("1"));
232234
dispatch(setUpdateComments(comment))
233-
await dispatch(saveContentJson({ 'processId': selectedProcessId, 'contentJson': store.modified_result.extracted_result, 'comments': comment , 'savedComments': store.comments }))
235+
await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result.extracted_result, 'comments': comment , 'savedComments': store.comments }))
234236
} catch (error) {
235237
console.error('API Error:', error);
236238
} finally {

‎src/ContentProcessorWeb/src/Pages/DefaultPage/DefaultPagePanelRight.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,33 @@ const PanelRight: React.FC<PanelRightProps> = () => {
1818
processId: state.leftPanel.processId,
1919
fileHeaders: state.rightPanel.fileHeaders,
2020
blobURL : state.rightPanel.blobURL,
21-
rLoader: state.rightPanel.rLoader
21+
rLoader: state.rightPanel.rLoader,
22+
fileResponse : state.rightPanel.fileResponse
2223
}),shallowEqual );
2324

25+
const isBlobExists = ()=>{
26+
const isfileExists = store.fileResponse.find(i =>i.processId == store.processId)
27+
return isfileExists;
28+
}
2429
useEffect(() => {
25-
if (store.processId != null && store.processId != '') {
30+
if (store.processId != null && store.processId != '' && !isBlobExists()) {
2631
dispatch(fetchContentFileData({ processId: store.processId }))
2732
}
2833
}, [store.processId])
2934

30-
useEffect(() => {
31-
if (Object.keys(store.fileHeaders).length > 0) {
32-
//const fileURL = `${process.env.REACT_APP_API_BASE_URL}/contentprocessor/processed/files/${store.processId}`;
33-
setFileData({ 'urlWithSasToken': store.blobURL, 'mimeType': store.fileHeaders['content-type'] })
35+
// useEffect(() => {
36+
// if (Object.keys(store.fileHeaders).length > 0) {
37+
// //const fileURL = `${process.env.REACT_APP_API_BASE_URL}/contentprocessor/processed/files/${store.processId}`;
38+
// setFileData({ 'urlWithSasToken': store.blobURL, 'mimeType': store.fileHeaders['content-type'] })
39+
// }
40+
// }, [store.fileHeaders])
41+
42+
useEffect(()=>{
43+
const isExists = isBlobExists();
44+
if(store.fileResponse.length > 0 && isExists && isExists.processId == store.processId){
45+
setFileData({ 'urlWithSasToken': isExists.blobURL, 'mimeType': isExists.headers['content-type'] })
3446
}
35-
}, [store.fileHeaders])
47+
},[store.processId, store.fileResponse])
3648

3749

3850
return (

‎src/ContentProcessorWeb/src/store/slices/centerPanelSlice.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface CenterPanelState {
1010
modified_result: any;
1111
comments: string;
1212
isSavingInProgress: boolean;
13-
13+
activeProcessId : string,
1414
processStepsData: any[];
1515
}
1616

@@ -78,7 +78,7 @@ const initialState: CenterPanelState = {
7878
modified_result: {},
7979
comments: '',
8080
isSavingInProgress: false,
81-
81+
activeProcessId : '',
8282
processStepsData: [],
8383
};
8484

@@ -91,7 +91,10 @@ const centerPanelSlice = createSlice({
9191
},
9292
setUpdateComments : (state, action) => {
9393
state.comments = action.payload
94-
}
94+
},
95+
setActiveProcessId :(state,action) =>{
96+
state.activeProcessId = action.payload
97+
}
9598
},
9699
extraReducers: (builder) => {
97100
//Fetch Dropdown values
@@ -103,9 +106,11 @@ const centerPanelSlice = createSlice({
103106
state.comments = '';
104107
})
105108
.addCase(fetchContentJsonData.fulfilled, (state, action) => { // Adjust `any` to the response data type
106-
state.contentData = action.payload;
107-
state.comments = action.payload.comment?? "" ;
108-
state.cLoader = false;
109+
if(state.activeProcessId == action.payload.process_id){
110+
state.contentData = action.payload;
111+
state.comments = action.payload.comment?? "" ;
112+
state.cLoader = false;
113+
}
109114
})
110115
.addCase(fetchContentJsonData.rejected, (state, action) => {
111116
state.cError = action.error.message || 'An error occurred';
@@ -146,5 +151,5 @@ const centerPanelSlice = createSlice({
146151
},
147152
});
148153

149-
export const { setModifiedResult ,setUpdateComments} = centerPanelSlice.actions;
154+
export const { setModifiedResult ,setUpdateComments, setActiveProcessId} = centerPanelSlice.actions;
150155
export default centerPanelSlice.reducer;

‎src/ContentProcessorWeb/src/store/slices/rightPanelSlice.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,18 @@ import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
33
import httpUtility from '../../Services/httpUtility';
44

55
import { toast } from "react-toastify";
6+
interface T {
7+
headers:any,
8+
blobURL:string,
9+
processId : string
10+
}
611

712
interface RightPanelState {
813
fileHeaders: any;
914
rLoader: boolean;
1015
blobURL: string;
1116
rError: string | null;
17+
fileResponse : Array<T>
1218
}
1319

1420
export const fetchContentFileData = createAsyncThunk<any, { processId: string | null }>('/contentprocessor/processed/files/', async ({ processId }, { rejectWithValue }): Promise<any> => {
@@ -24,7 +30,7 @@ export const fetchContentFileData = createAsyncThunk<any, { processId: string |
2430
throw new Error("Failed to fetch headers");
2531
}
2632
const headersObject = Object.fromEntries(headers.entries());
27-
return { headers: headersObject, blobURL: blobURL };
33+
return { headers: headersObject, blobURL: blobURL, processId: processId };
2834
}
2935
catch (error) {
3036
return rejectWithValue({
@@ -40,7 +46,8 @@ const initialState: RightPanelState = {
4046
fileHeaders: {},
4147
blobURL: '',
4248
rLoader: false,
43-
rError: ''
49+
rError: '',
50+
fileResponse :[]
4451
};
4552

4653
const rightPanelSlice = createSlice({
@@ -62,6 +69,9 @@ const rightPanelSlice = createSlice({
6269
state.fileHeaders = action.payload.headers;
6370
state.blobURL = action.payload.blobURL;
6471
state.rLoader = false;
72+
const isItemExists = state.fileResponse.find(i=>i.processId === action.payload.processId)
73+
if(!isItemExists )
74+
state.fileResponse.push(action.payload)
6575
})
6676
.addCase(fetchContentFileData.rejected, (state, action) => {
6777
//console.log('Error : ', action.error.message)

0 commit comments

Comments
 (0)