Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added scroll and responsiveness to the plots page #9815

Closed
wants to merge 8 commits into from
Closed

Added scroll and responsiveness to the plots page #9815

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1a6607d
Added scroll and responsiveness to the plots page
Utkarsh-Anandani Jan 7, 2025
623d7d1
used useWindowDimensions hook
Utkarsh-Anandani Jan 7, 2025
24ce109
used useBreakpoints hook instead of useWindowDimensions
Utkarsh-Anandani Jan 7, 2025
b6480b1
Merge branch 'develop' into issues/#9788/Alignment-of-plots-and-overf…
Utkarsh-Anandani Jan 7, 2025
fbdad74
requested changes
Utkarsh-Anandani Jan 7, 2025
8eb6c3e
updates
Utkarsh-Anandani Jan 7, 2025
8b30429
Merge branch 'ohcnetwork:develop' into issues/#9788/Alignment-of-plot…
Utkarsh-Anandani Jan 7, 2025
4bf98ec
Merge branch 'issues/#9788/Alignment-of-plots-and-overflowing' of htt…
Utkarsh-Anandani Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions src/pages/Encounters/tabs/EncounterPlotsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
} from "@/components/Common/Charts/ObservationChart";
import Loading from "@/components/Common/Loading";

import useWindowDimensions from "@/hooks/useWindowDimensions";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Add SSR safety check and debounce resize events

The current implementation of useWindowDimensions has two issues:

  1. Potential SSR hydration mismatches due to direct window access during initialization
  2. Missing debouncing for resize events which can impact performance

Suggested improvements:

  • Add SSR safety check: Initialize state as undefined and update in useEffect
  • Add debouncing to resize handler using lodash.debounce or similar utility
🔗 Analysis chain

Verify the window dimensions hook implementation

The implementation of useWindowDimensions should properly handle:

  1. SSR hydration mismatches
  2. Window resize events with debouncing
  3. Cleanup of event listeners

Let's verify the hook implementation:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for the useWindowDimensions hook implementation
ast-grep --pattern 'export $_ function useWindowDimensions() {
  $$$
}'

Length of output: 73

Script:

#!/bin/bash
# First, find the hook file
fd "useWindowDimensions" --type f

# Then try to find the implementation with different patterns
echo "=== Named export pattern ==="
ast-grep --pattern 'export const useWindowDimensions = $_'

echo "=== Default export pattern ==="
ast-grep --pattern 'export default function $_() {
  $$$
}'

echo "=== Alternative: Search with ripgrep for more context ==="
rg "useWindowDimensions" -A 10

Length of output: 66367

Script:

#!/bin/bash
# Get the complete implementation of useWindowDimensions hook
cat src/hooks/useWindowDimensions.ts

Length of output: 781


import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";

type QueryParams = {
Expand All @@ -21,6 +23,8 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
const { t } = useTranslation();
const [qParams, setQParams] = useQueryParams<QueryParams>();

const { width } = useWindowDimensions();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use useBreakpoints instead for standard window sizes.


const { data, isLoading } = useQuery<ObservationPlotConfig>({
queryKey: ["plots-config"],
queryFn: () => fetch(careConfig.plotsConfigUrl).then((res) => res.json()),
Expand All @@ -43,20 +47,22 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
value={currentTabId}
onValueChange={(value) => setQParams({ plot: value })}
>
Comment on lines 48 to 49
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of adding a div with className, we can simply add className to the parent Tabs component ryt?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I tried that but it gives scroll to the whole component including the plots idk if that behavior was wanted, looks weird to me...
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh my bad. Tried on TabsList? lots of other usages seems to be working fine with TabsList

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it gives a vertical scroll but not a horizontal scroll

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure? it's working fine for me

Copy link
Contributor Author

@Utkarsh-Anandani Utkarsh-Anandani Jan 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<TabsList className="overflow-x-scroll">
You're using this className?

<TabsList className="overflow-auto w-full">
using this it cuts out at left

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why does it cut out?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

like cuts out means it just overflows at left side
image

are you sure? it's working fine for me

what classes are you using for it to work??

<TabsList>
{data.map((tab) => (
<TabsTrigger key={tab.id} value={tab.id}>
{tab.name}
</TabsTrigger>
))}
</TabsList>
<div className="overflow-x-scroll w-full">
<TabsList>
{data.map((tab) => (
<TabsTrigger key={tab.id} value={tab.id}>
{tab.name}
</TabsTrigger>
))}
</TabsList>
</div>

{data.map((tab) => (
<TabsContent key={tab.id} value={tab.id}>
<ObservationVisualizer
patientId={props.patient.id}
codeGroups={tab.groups}
gridCols={2}
gridCols={width >= 768 ? 2 : 1}
/>
</TabsContent>
))}
Expand Down
Loading