GH:110 | Visualization to view the org changes between dates

[yasandu0505]

• The sanky chart represent the visualization of org structure changes
• States for view changes from structure to org change

This PR closes #110

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the organizational analysis capabilities by introducing a dynamic 'Cabinet Flow' visualization. This new feature provides a visual representation of how ministries and departments evolve and transition between different selected dates, offering deeper insights into historical organizational changes. It integrates new charting libraries and a custom date selection mechanism to support this interactive experience.

Highlights

• New Visualization Feature: Introduced a 'Cabinet Flow' visualization on the organization page, allowing users to view changes in organizational structure over time using a Sankey chart.
• D3.js Integration: Integrated D3.js and d3-sankey libraries to power the new interactive visualization, enabling dynamic rendering of flows between departments.
• Date Range Selection: Added a custom date range picker specifically for the 'Cabinet Flow' view, allowing users to select up to three dates to compare organizational states.
• Enhanced Organization Page: The organization page now includes a toggle to switch between the existing 'Structure' view and the new 'Cabinet Flow' visualization.

Changelog

• package-lock.json
  • Added D3.js and d3-sankey dependencies and their transitive dependencies.
• package.json
  • Added D3.js and d3-sankey as new project dependencies.
• src/App.jsx
  • Updated the default route for the organization page to include a 'view=structure' query parameter.
• src/hooks/useCabinetFlow.js
  • Added a new React Query hook, useCabinetFlow, to fetch cabinet flow data based on president ID and selected dates.
• src/pages/HomePage/components/TimeRangeSelector.jsx
  • Adjusted styling for the main container div.
• src/pages/HomePage/screens/HomePage.jsx
  • Removed unused useLocation and useDispatch imports.
  • Removed ToastContainer import.
  • Adjusted gap spacing for a flex container.
• src/pages/OrganizationPage/components/FilteredPresidentCards.jsx
  • Wrapped the 'View Profile' link in a div and added an onClick handler to prevent event propagation.
• src/pages/OrganizationPage/screens/Organization.jsx
  • Introduced a state and useSearchParams to manage an 'activeView' toggle between 'Structure' and 'Cabinet Flow'.
  • Conditionally renders GazetteTimeline and MinistryCardGrid for 'Structure' view or CabinetFlow component for 'Cabinet Flow' view.
  • Added LandscapeRequired wrapper for the CabinetFlow component.
• src/pages/cabinetFlowPage/components/CabinetFlowPanel.jsx
  • Added a new component to render the Sankey chart, handling loading, error states, and displaying relevant messages.
  • Implemented dynamic height calculation for the Sankey chart based on the number of nodes.
  • Displayed informational messages for dates with no data or insufficient dates for comparison.
• src/pages/cabinetFlowPage/components/DateRangePicker.jsx
  • Added a new reusable date picker component for selecting multiple dates within a specified range.
  • Implemented month navigation, date selection logic, and visual cues for selected, disabled, and gazette dates.
  • Included functionality to limit the number of selectable dates and clear selections.
• src/pages/cabinetFlowPage/components/SankyChart.jsx
  • Added a new component responsible for rendering the D3.js Sankey diagram.
  • Implemented gradient links, interactive tooltips for links, and dynamic positioning of node and column labels.
• src/pages/cabinetFlowPage/screens/CabinetFlow.jsx
  • Added a new screen component to manage the state and logic for the Cabinet Flow visualization.
  • Determined the valid date range for the selected president and initialized selected dates.
  • Integrated DateRangePicker for date selection and CabinetFlowPanel for displaying the visualization.
• src/services/services.jsx
  • Added a new asynchronous function getCabinetFlow to make API calls for cabinet flow data.

Activity

• New dependencies d3 and d3-sankey were added to package.json and package-lock.json to support the new visualization.
• A new React Query hook useCabinetFlow was introduced to manage data fetching for the cabinet flow.
• Several new React components (CabinetFlowPanel, DateRangePicker, SankyChart, CabinetFlow) were created to build the new visualization feature.
• The Organization page was modified to include a view toggle, allowing users to switch between the existing structure view and the new cabinet flow visualization.
• The App.jsx file was updated to set a default view for the organization page.
• The FilteredPresidentCards component received a minor update to improve link interaction.
• A new service function getCabinetFlow was added to src/services/services.jsx to interact with the backend for cabinet flow data.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new visualization feature using a Sankey chart to display organizational changes over time. The implementation is comprehensive, adding new dependencies, components, hooks, and services. My review focuses on improving the maintainability, performance, and consistency of the new code. Key suggestions include refactoring styling to align with project conventions, optimizing a React hook's dependencies, and improving the structure of component classes for better readability and reuse.

[ChanukaUOJ]

Can you take a look on this?

[ChanukaUOJ]

1. Remove the outlined box in the calendar component of the cabinet flow
2. Remove the (dot) that indicates the starting point of the president. because other dates are already disabled.

[ChanukaUOJ]

Initial Comments!

[yasandu0505]

1. Remove the outlined box in the calendar component of the cabinet flow
2. Remove the (dot) that indicates the starting point of the president. because other dates are already disabled.

done!

[yasandu0505]

Can you take a look on this?

Can you take a look on this?

Found the issue , d3-sanky places the nodes without outgoing links in the last column by default! not by the time. I forced assigning column by date so the nodes without outgoing links can stay on their relevant column.

const dateToLayer = {};
    data.dates.forEach((d, i) => { dateToLayer[d.date] = i; });

const { nodes, links } = sankey()
  .nodeWidth(20)
  .nodePadding(15)
  .nodeAlign((node) => dateToLayer[node.time] ?? 0)
  .extent([
    [1, topMargin],
    [width - 1, height - bottomMargin],
  ])({
    nodes: data.nodes.map((d) => Object.assign({}, d)),
    links: data.links.map((d) => Object.assign({}, d)),
  });

[ChanukaUOJ]

Can we fix these tooptip and text overlapping issue in mobile screen?

[yasandu0505]

Can we fix these tooptip and text overlapping issue in mobile screen?

Mobile screen overflow of sanky chart is fixed

[ChanukaUOJ]

LGTM!