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 1 commit
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
18 changes: 10 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 @@ -43,20 +43,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
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
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
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
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={window.innerWidth >= 768 ? 2 : 1}
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix critical issues with window dimension handling

The direct usage of window.innerWidth can cause several issues:

  1. SSR hydration mismatches
  2. No handling of window resize events
  3. Potential performance impact from frequent re-renders

Consider using a proper window resize hook implementation:

// hooks/useWindowSize.ts
import { useState, useEffect } from 'react';
import debounce from 'lodash/debounce';

export function useWindowSize() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    // Initialize on client-side
    setWidth(window.innerWidth);

    const handleResize = debounce(() => {
      setWidth(window.innerWidth);
    }, 250);

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

Then update the component:

+ import { useWindowSize } from '@/hooks/useWindowSize';

export const EncounterPlotsTab = (props: EncounterTabProps) => {
+  const windowWidth = useWindowSize();
   // ...
   <ObservationVisualizer
     patientId={props.patient.id}
     codeGroups={tab.groups}
-    gridCols={window.innerWidth >= 768 ? 2 : 1}
+    gridCols={windowWidth >= 768 ? 2 : 1}
   />

Alternatively, consider using CSS Grid with media queries if the grid layout doesn't need to be controlled programmatically.

/>
</TabsContent>
))}
Expand Down
Loading