From 4db46aa41b1e9c9a92be72374a5f0d8d44aa276e Mon Sep 17 00:00:00 2001 From: Subina Date: Fri, 12 Jan 2024 17:24:55 +0545 Subject: [PATCH 1/2] Add a tag to indicate untagged entries --- app/components/entry/EntryInput/index.tsx | 165 ++++++++++-------- app/components/entry/EntryInput/styles.css | 119 +++++++------ .../LeftPane/AssistItem/AssistPopup/index.tsx | 4 + .../LeftPane/AutoEntriesModal/index.tsx | 26 +-- 4 files changed, 165 insertions(+), 149 deletions(-) diff --git a/app/components/entry/EntryInput/index.tsx b/app/components/entry/EntryInput/index.tsx index 48bc774b2b..fea7d32160 100644 --- a/app/components/entry/EntryInput/index.tsx +++ b/app/components/entry/EntryInput/index.tsx @@ -17,6 +17,7 @@ import { List, Container, NumberOutput, + Tag, } from '@the-deep/deep-ui'; import NonFieldError from '#components/NonFieldError'; @@ -84,6 +85,7 @@ interface EntryInputProps { excerptShown?: boolean; displayHorizontally?: boolean; + relevant?: boolean; } function EntryInput(props: EntryInputProps) { @@ -116,6 +118,7 @@ function EntryInput(props: EntryInputProp noPaddingInWidgetContainer = false, excerptShown = false, displayHorizontally = false, + relevant = true, } = props; const error = getErrorObject(riskyError); @@ -198,89 +201,103 @@ function EntryInput(props: EntryInputProp
- - {(!compactMode || excerptShown) && ( - - {!hideEntryId && isDefined(value.id) && ( - - )} - {!hideEntryId && isNotDefined(value.id) && ( - (unsaved entry) - )} - - )} - headingSize="extraSmall" - headingClassName={styles.heading} - headerActions={excerptHeaderActions} - headerActionsContainerClassName={styles.headerActions} - headingSectionClassName={styles.headingSection} - contentClassName={styles.excerptContent} + {!relevant && ( + - - + Untagged Entry + )} - - + + {(!compactMode || excerptShown) && ( + + {!hideEntryId && isDefined(value.id) && ( + + )} + {!hideEntryId && isNotDefined(value.id) && ( + (unsaved entry) + )} + + )} + headingSize="extraSmall" + headingClassName={styles.heading} + headerActions={excerptHeaderActions} + headerActionsContainerClassName={styles.headerActions} + headingSectionClassName={styles.headingSection} + contentClassName={styles.excerptContent} + > + + )} - title="Secondary Tagging" - attributesMap={attributesMap} - onAttributeChange={onAttributeChange} - readOnly={readOnly} - onAddButtonClick={onAddButtonClick} - emptyValueHidden={emptyValueHidden} - widgets={secondaryTagging} - error={error?.attributes} - geoAreaOptions={geoAreaOptions} - onGeoAreaOptionsChange={onGeoAreaOptionsChange} - addButtonHidden={addButtonHidden} - onApplyToAll={onApplyToAll} - entryClientId={value.clientId} - allWidgets={allWidgets} - widgetsHints={widgetsHints} - recommendations={recommendations} - emptyMessageHidden={variant === 'nlp'} - suggestionMode={variant === 'nlp'} - rightComponent={rightComponent} - noPadding={noPaddingInWidgetContainer} - /> + + +
); } diff --git a/app/components/entry/EntryInput/styles.css b/app/components/entry/EntryInput/styles.css index 86d0ff405c..dcd9dc2ad9 100644 --- a/app/components/entry/EntryInput/styles.css +++ b/app/components/entry/EntryInput/styles.css @@ -1,81 +1,90 @@ .entry-input { display: flex; - flex-shrink: 0; - background-color: var(--dui-color-foreground); - height: var(--height-entry-item); - overflow-y: auto; + flex-direction: column; --height-entry-item: 360px; --inner-width: 25%; - &.compact { - --height-entry-item: initial; - --inner-width: unset; - flex-direction: column; + .tag { + flex-shrink: 0; } - .heading-section { - overflow: visible; + .content { + display: flex; + flex-shrink: 0; + background-color: var(--dui-color-foreground); + height: var(--height-entry-item); + overflow-y: auto; - .heading { - display: flex; - align-items: baseline; - gap: var(--dui-spacing-medium); + &.compact { + --height-entry-item: initial; + --inner-width: unset; + flex-direction: column; + } - .entry-id { - color: var(--dui-color-accent); - font-weight: var(--dui-font-weight-bold); - } + .heading-section { + overflow: visible; - .unsaved-entry { - color: var(--dui-color-text-description); - font-weight: var(--dui-font-weight-light); - font-style: italic; - } - } - } + .heading { + display: flex; + align-items: baseline; + gap: var(--dui-spacing-medium); - .excerpt { - background-color: var(--dui-color-foreground); - width: var(--inner-width); + .entry-id { + color: var(--dui-color-accent); + font-weight: var(--dui-font-weight-bold); + } - .header-actions { - flex-wrap: wrap; + .unsaved-entry { + color: var(--dui-color-text-description); + font-weight: var(--dui-font-weight-light); + font-style: italic; + } + } } - .excerpt-content { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow-y: auto; + .excerpt { + background-color: var(--dui-color-foreground); + width: var(--inner-width); - .excerpt-input { + .header-actions { + flex-wrap: wrap; + } + + .excerpt-content { + display: flex; + flex-direction: column; flex-grow: 1; + overflow-y: auto; + + .excerpt-input { + flex-grow: 1; + } } } - } - &.horizontal { - flex-direction: row; - .excerpt { - width: 100%; - max-width: 30rem; + &.horizontal { + flex-direction: row; + .excerpt { + width: 100%; + max-width: 30rem; + } } - } - .section { - background-color: var(--dui-color-foreground); - width: var(--inner-width); + .section { + background-color: var(--dui-color-foreground); + width: var(--inner-width); - &.compact { - border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator); - } - &.horizontal { - border-bottom: unset; + &.compact { + border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator); + } + &.horizontal { + border-bottom: unset; + } } - } - .secondary-tagging { - background-color: var(--dui-color-foreground); - width: var(--inner-width); + .secondary-tagging { + background-color: var(--dui-color-foreground); + width: var(--inner-width); + } } } diff --git a/app/views/EntryEdit/LeftPane/AssistItem/AssistPopup/index.tsx b/app/views/EntryEdit/LeftPane/AssistItem/AssistPopup/index.tsx index 7aeab3323a..7b4e419daa 100644 --- a/app/views/EntryEdit/LeftPane/AssistItem/AssistPopup/index.tsx +++ b/app/views/EntryEdit/LeftPane/AssistItem/AssistPopup/index.tsx @@ -44,6 +44,8 @@ interface Props { displayHorizontally?: boolean; footerActions: React.ReactNode; + + relevant?: boolean; } function AssistPopup(props: Props) { @@ -67,6 +69,7 @@ function AssistPopup(props: Props { @@ -137,6 +140,7 @@ function AssistPopup(props: Props )} diff --git a/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx b/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx index 65f322e286..194e51f919 100644 --- a/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx +++ b/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx @@ -825,15 +825,6 @@ function AutoEntriesModal(props: Props) { projectId, ]); - const filteredEntries = useMemo(() => ( - value?.entries?.filter( - (item) => item.draftEntry && !draftEntriesMap[item.draftEntry], - ) - ), [ - value?.entries, - draftEntriesMap, - ]); - const rendererParams = useCallback(( entryId: string, datum: PartialEntryType, @@ -891,6 +882,7 @@ function AutoEntriesModal(props: Props) { excerptShown: true, displayHorizontally: true, footerActions, + relevant: !!(datum.draftEntry && !draftEntriesMap[datum.draftEntry]), }); }, [ value?.entries, @@ -904,13 +896,7 @@ function AutoEntriesModal(props: Props) { handleUpdateDraftEntryClick, handleUndiscardEntryClick, selectedTab, - ]); - - const isFiltered = useMemo(() => ( - (filteredEntries?.length ?? 0) < (value?.entries?.length ?? 0) - ), [ - filteredEntries, - value?.entries, + draftEntriesMap, ]); const isPending = autoEntriesLoading @@ -966,14 +952,14 @@ function AutoEntriesModal(props: Props) { > Date: Tue, 16 Jan 2024 12:12:03 +0545 Subject: [PATCH 2/2] Add error messages for incompatible sources --- .../LeftPane/AutoEntriesModal/index.tsx | 30 ++++----- app/views/EntryEdit/LeftPane/index.tsx | 62 +++++++++++++++---- app/views/EntryEdit/LeftPane/styles.css | 20 +++++- 3 files changed, 83 insertions(+), 29 deletions(-) diff --git a/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx b/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx index 194e51f919..c93de639ab 100644 --- a/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx +++ b/app/views/EntryEdit/LeftPane/AutoEntriesModal/index.tsx @@ -391,13 +391,6 @@ function AutoEntriesModal(props: Props) { } = props; const alert = useAlert(); - const draftEntriesMap = useMemo(() => ( - listToMap( - createdEntries?.filter((item) => isDefined(item.draftEntry)) ?? [], - (item) => item.draftEntry ?? '', - () => true, - ) - ), [createdEntries]); const [ selectedTab, @@ -558,6 +551,11 @@ function AutoEntriesModal(props: Props) { triggerAutoEntriesCreate, ]); + const [ + relevantEntries, + setRelevantEntries, + ] = useState | undefined>(undefined); + const [ allRecommendations, setAllRecommendations, @@ -623,10 +621,6 @@ function AutoEntriesModal(props: Props) { geoAreas: entryGeoAreas, } = handleMappingsFetch(entryAttributeData); - if (!entryHints && !entryRecommendations && !entryGeoAreas) { - return undefined; - } - const entryId = randomString(); const requiredEntry = { clientId: entryId, @@ -655,8 +649,9 @@ function AutoEntriesModal(props: Props) { recommendations: entryRecommendations, hints: entryHints, entry: requiredEntry, + relevant: !!entryHints || !!entryRecommendations || !!entryGeoAreas, }; - }).filter(isDefined); + }); const requiredDraftEntries = transformedEntries?.map( (draftEntry) => draftEntry.entry, ); @@ -675,10 +670,16 @@ function AutoEntriesModal(props: Props) { (item) => item.entryId, (item) => item.geoLocations, ); + const tempRelevantEntries = listToMap( + transformedEntries, + (item) => item.entryId, + (item) => item.relevant, + ); setValue({ entries: requiredDraftEntries, }); setAllRecommendations(entryRecommendations); + setRelevantEntries(tempRelevantEntries); setAllHints(entryHints); setGeoAreaOptions(entryGeoAreas); }, @@ -831,6 +832,7 @@ function AutoEntriesModal(props: Props) { ) => { const onEntryCreateButtonClick = () => handleEntryCreateButtonClick(entryId); const index = value?.entries?.findIndex((item) => item.clientId === entryId); + const footerActions = (selectedTab === 'extracted' ? (
+ {!isEntrySelectionActive && ( +
+ + {isDefined(errorMessageForAutoExtraction) && ( +
+ + + {errorMessageForAutoExtraction} + +
+ )} +
+ )}