#DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style #102

Salam-Dalloul · 2025-10-01T17:41:18Z

No description provided.

…blet version

#DKN-206 #DKN-207 Update the filter question to have a single column in the ta…

Copilot

Pull Request Overview

This PR refactors the Query Assistant component to implement a new design based on ticket #DKN-205. The changes modernize the user interface with improved responsive behavior and better code organization.

Extracted reusable components and hooks for better maintainability
Implemented responsive sidebar and preview panel behavior
Added new design elements including better typography and styling

Reviewed Changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
applications/dknet/frontend/src/utils/types.ts	Adds TypeScript interfaces for component props and configuration
applications/dknet/frontend/src/utils/helpers.ts	Adds utility function for identifying top match results
applications/dknet/frontend/src/utils/constants.ts	Defines responsive breakpoints and configuration constants
applications/dknet/frontend/src/theme/variables.js	Adds new color variables for updated design
applications/dknet/frontend/src/theme/Theme.tsx	Updates typography, scrollbar, and component styling
applications/dknet/frontend/src/hooks/*.ts	Creates custom hooks for responsive behavior and filter logic
applications/dknet/frontend/src/components/FilterAssistantDialog/*.tsx	Refactors dialog components with new responsive layout and design
applications/dknet/frontend/src/components/ExpandableText.tsx	Adds new expandable text component for question descriptions
applications/dknet/frontend/.eslintrc.yml	Disables indent ESLint rule

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-05T12:40:51Z

applications/dknet/frontend/src/components/FilterAssistantDialog/QuestionSidebar.tsx

+  const handleResetFilters = () => {
+    setContext({
+      ...context,
+      showAll: false,
+      filterValues: resetFilters(context.allFilters)
+    });
+  };


The handleResetFilters function should be wrapped in useCallback to prevent unnecessary re-renders of child components that depend on this function.

Suggested change

const handleResetFilters = () => {

setContext({

...context,

showAll: false,

filterValues: resetFilters(context.allFilters)

});

};

const handleResetFilters = useCallback(() => {

setContext({

...context,

showAll: false,

filterValues: resetFilters(context.allFilters)

});

}, [context, setContext]);

Copilot · 2025-10-05T12:40:51Z

applications/dknet/frontend/src/components/FilterAssistantDialog/PreviewPanel.tsx

+        ))}
+      </List>
+      {
+        !isFiltersEmpty && results.length !== 0 && <Box sx={styles.fadeOverlay(showPreview)} />


The condition !isFiltersEmpty && results.length !== 0 is redundant. If filters are not empty and there are results, results.length !== 0 is implied by the results mapping above.

Suggested change

!isFiltersEmpty && results.length !== 0 && <Box sx={styles.fadeOverlay(showPreview)} />

!isFiltersEmpty && <Box sx={styles.fadeOverlay(showPreview)} />

Copilot · 2025-10-05T12:40:51Z

applications/dknet/frontend/src/components/FilterAssistantDialog/QuestionContent.tsx

+            <Box
+              key={`itemKey_${index}`}
+              sx={{
+                ...styles.getItemSx(getCheckedStateForSingle(currentQuestion, data) === 'checked-state'),
+                ...styles.getSingleChoiceItem(shouldExpandHeight, isLastItem),
+              }}
+              onClick={(e) => handleOptionClick(e, data)}
+            >


The inline arrow function in onClick will be recreated on every render. Consider using useCallback for handleOptionClick or move it to a separate handler function.

Copilot · 2025-10-05T12:40:52Z

applications/dknet/frontend/src/hooks/useFilterLogic.ts

+  return {
+    context,
+    isFiltersEmpty: isFiltersEmpty(),
+    handleSingleOptionSelect,
+    isOptionSelectedForMultiple,
+    isOptionSelectedForSingle,
+    filterValues: context.filterValues,
+    results: context.results
+  };


The isFiltersEmpty() function is called on every render. Consider memoizing this value with useMemo since it depends on context.filterValues.

Copilot

Pull Request Overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-05T12:59:23Z

applications/dknet/frontend/src/components/FilterAssistantDialog/QuestionBox.tsx

+      flex: 1,
+      overflow: 'auto',
+      height: '100%',
+      maxWidth: props.maxWidth || '100%',


The maxWidth prop is not defined in the component's props interface. Consider adding proper TypeScript typing for the props parameter to improve type safety.

Copilot · 2025-10-05T12:59:23Z

applications/dknet/frontend/src/components/FilterAssistantDialog/PreviewPanel.tsx

+  }, [results]);
+
+  const getPrimaryText = useCallback((el: ResultItem) => {
+    return !isNaN(el.pctMatch || 0) ? `${el.label} ${el.pctMatch}%` : el.label;


The logic for checking !isNaN(el.pctMatch || 0) is duplicated in multiple places. Consider extracting this into a helper function like hasValidPercentageMatch for better maintainability.

Copilot · 2025-10-05T12:59:23Z

applications/dknet/frontend/src/utils/helpers.ts

+export const isTopMatch = (item: ResultItem, index: number, results: ResultItem[]): boolean => {
+  return (index === 0 || item.pctMatch === results[0]?.pctMatch) && !isNaN(item.pctMatch || 0);


The same !isNaN(item.pctMatch || 0) pattern is used here and in PreviewPanel. Consider creating a shared utility function for this validation logic.

Suggested change

export const isTopMatch = (item: ResultItem, index: number, results: ResultItem[]): boolean => {

return (index === 0 || item.pctMatch === results[0]?.pctMatch) && !isNaN(item.pctMatch || 0);

export function isValidPctMatch(value: number | undefined | null): boolean {

return !isNaN(value ?? 0);

}

export const isTopMatch = (item: ResultItem, index: number, results: ResultItem[]): boolean => {

return (index === 0 || item.pctMatch === results[0]?.pctMatch) && isValidPctMatch(item.pctMatch);

Salam-Dalloul added 12 commits October 1, 2025 16:09

update Guided Query style

51c8869

refactor Guided Query + add check icon when selecting filters

9ac881e

styles improvments + add reset functionality

a3b7c6f

Merge branch 'feature/DKN-204' into feature/DKN-205

3fd2cfa

styles update

0c5fa5a

#DKN-206 Update the filter question to have a single column in the ta…

c60fe89

…blet version

update preview panel style

69d3b35

update footer and questions sidebar styles + clean code

eb95515

remove un used code

d0bc7ee

refine expandable text style

cb6d39d

refine question container style

f73fc7a

refine files structure

7cc9866

Salam-Dalloul changed the title ~~Feature/dkn 205~~ Feature/dkn 205 Update the Query Assistant as per new design Oct 2, 2025

Salam-Dalloul added 4 commits October 2, 2025 15:36

Merge branch 'feature/DKN-205' into feature/DKN-206

51596f8

update sidebars visibility state

8940df2

update max width

8875fd7

Merge branch 'feature/DKN-204' into feature/DKN-205

f579c8a

ddelpiano changed the base branch from feature/DKN-204 to develop October 3, 2025 13:26

Salam-Dalloul requested a review from ddelpiano October 3, 2025 13:27

Salam-Dalloul changed the title ~~Feature/dkn 205 Update the Query Assistant as per new design~~ #DKN-205 Update the Query Assistant as per new design Oct 5, 2025

Merge pull request #103 from MetaCell/feature/DKN-206

51a28ac

#DKN-206 #DKN-207 Update the filter question to have a single column in the ta…

Copilot AI review requested due to automatic review settings October 5, 2025 12:40

Salam-Dalloul changed the title ~~#DKN-205 Update the Query Assistant as per new design~~ #DKN-205 Update the Query Assistant style Oct 5, 2025

Salam-Dalloul changed the title ~~#DKN-205 Update the Query Assistant style~~ #DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style Oct 5, 2025

Copilot AI reviewed Oct 5, 2025

View reviewed changes

resolve pr comments

dfe5a26

Salam-Dalloul requested a review from Copilot October 5, 2025 12:58

Copilot AI reviewed Oct 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

#DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style #102

#DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style #102

Uh oh!

Salam-Dalloul commented Oct 1, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Copilot AI Oct 5, 2025

Uh oh!

Uh oh!

	!isFiltersEmpty && results.length !== 0 && <Box sx={styles.fadeOverlay(showPreview)} />
	!isFiltersEmpty && <Box sx={styles.fadeOverlay(showPreview)} />

		export const isTopMatch = (item: ResultItem, index: number, results: ResultItem[]): boolean => {
		return (index === 0 \|\| item.pctMatch === results[0]?.pctMatch) && !isNaN(item.pctMatch \|\| 0);

#DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style #102

Are you sure you want to change the base?

#DKN-205 #DKN-206 #DKN-207 Update the Query Assistant style #102

Uh oh!

Conversation

Salam-Dalloul commented Oct 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!