|
32 | 32 | - [How to create a new `View`](#how-to-create-a-new-view) |
33 | 33 | - [Steps to Update `config.ts`](#steps-to-update-configts) |
34 | 34 | - [Example](#example) |
| 35 | + - [View Switching Functionality](#view-switching-functionality) |
| 36 | +- [Documentation and Commenting Style](#documentation-and-commenting-style) |
| 37 | +- [Eslint Code Standards](#eslint-code-standards) |
| 38 | +- [Local Testing Requirements](#local-testing-requirements) |
35 | 39 | - [Eplant2](#eplant2) |
36 | 40 | - [API](#api) |
37 | 41 |
|
@@ -366,6 +370,72 @@ const genericViews = [GetStartedView, FallbackView, NewView] |
366 | 370 | const views = [...genericViews, ...userViews] |
367 | 371 | ``` |
368 | 372 |
|
| 373 | +#### View Switching Functionality |
| 374 | + |
| 375 | +If your new view has function to swap to a different view and/or gene available on ePlant, you may benefit from the generalized view switching component file (name tbd). |
| 376 | + |
| 377 | +To utilize the component: |
| 378 | + |
| 379 | +1. Import createViewSwitchProvider into your index file and export it: |
| 380 | + |
| 381 | +``` |
| 382 | +export const ViewSwitchProvider = createViewSwitchProvider(); |
| 383 | +``` |
| 384 | + |
| 385 | +2. Import your exported provider into your view's main component and wrap your component in the view's return statement: |
| 386 | + |
| 387 | +``` |
| 388 | +const App = () => { |
| 389 | + return ( |
| 390 | + <ViewSwitchProvider> |
| 391 | + <YourComponent /> |
| 392 | + </ViewSwitchProvider> |
| 393 | + ); |
| 394 | +}; |
| 395 | +``` |
| 396 | + |
| 397 | +3. Import and use useViewSwitch in your main component whenever you want to invoke the switching functionality. For example: `switchViewAndGene('Cell eFP', geneName);` |
| 398 | + |
| 399 | +There are 3 main swithing functions you can invoke based on needs. |
| 400 | + |
| 401 | +``` |
| 402 | + /** Function to switch view only */ |
| 403 | + switchViewOnly: (viewId: string) => Promise<void>; |
| 404 | +
|
| 405 | + /** Function to switch gene only */ |
| 406 | + switchGeneOnly: (geneName: string, speciesUrl?: string) => Promise<void>; |
| 407 | +
|
| 408 | + /** Function to switch both view and gene */ |
| 409 | + switchViewAndGene: (viewId: string, geneName: string, speciesUrl?: string) => Promise<void>; |
| 410 | +``` |
| 411 | + |
| 412 | +## Documentation and Commenting Style |
| 413 | + |
| 414 | +It is important to maintain a common standard for commenting code and documentation. If you want to make contributions to the project, we ask that you follow the TSdoc(typescript) commenting style. As an example this includes adding function/class headers and comments as seen below: |
| 415 | + |
| 416 | +``` |
| 417 | +/** |
| 418 | + * Extracts the primary gene identifier from the API URL |
| 419 | + * |
| 420 | + * @param url - The complete API URL containing query parameters |
| 421 | + * @returns The primary gene identifier, or an empty string not found |
| 422 | + * |
| 423 | + * Uses regex to find the primaryGene parameter in the URL |
| 424 | + */ |
| 425 | +function extractPrimaryGene(url: string): string { |
| 426 | + const match = url.match(/primaryGene=([^&]+)/); |
| 427 | + return match ? match[1] : ""; |
| 428 | +} |
| 429 | +``` |
| 430 | + |
| 431 | +## ESlint Code Standards |
| 432 | + |
| 433 | +The codebase relies on ESlint to handle automatic checking for issues with the code. With ESlint, you will not need to manually parse all of your code for accurate documentation, imports order, etc. When running ePlant locally in a browser, if there are any outstanding issues, it will be made known to you automatically. A common way to fix any issues without much thought is to run `npx eslint . --fix`. The `.` can be replaced if you do not want to check and fix every file in your current working directory. Documentation issues are not as big of a concern as others and your local site may work as normal, but to keep in line with our standards, please resolve any issues and warnings before making a pull request. |
| 434 | + |
| 435 | +## Local Testing Requirements |
| 436 | + |
| 437 | +To allow ESlint to work, and to run the site locally you are required to install Node.js and NPM on your system. Once installed, you can activate a local connection to the site using `npm run dev` and connecting to the generated web access point. |
| 438 | + |
369 | 439 | ## Eplant2 |
370 | 440 |
|
371 | 441 | https://bar.utoronto.ca/eplant/ |
|
0 commit comments