Josh and I have spent quite a bit of time on the InfoMapper organizing files. The following are recommendations for the demo application:
For the InfoMapper, we have conventions for handling paths that are relative or absolute. See the InfoMapper documentation. Handling paths is important for flexibility and portability. Do not use spaces in folders or filenames. Use MixedCase or lowercase-with-dashes. I typically used mixed case if I am matching a menu shown in the application, and lowercase if matching an internal identifier that is also shown in hash-URL.
All application code such as TypeScript files should be in the application source code, not assets. Although it may make sense to have a package hierarchy with folders for code we are writing, using a flat structure for the demo application is probably OK for now. I recommend using the same organization as InfoMapper if possible so that zero changes need to be made to the TypeScript code. The versions of the code in InfoMapper should be the master because we don't want to have to make changes in other copies and risk an incompatibility. We should have a discussion as a team to discuss organization more but for now my main point is to get the code out of assets.
For other files in assets, use folders to organize so that assets does not become a mess. For example, the StateMod dataset viewer application files are copied to InfoMapper assets. I recommend using one of the following approaches (or similar):
assets/data-ts/ folder for time series files and then handling the relative/absolute paths similar to InfoMapper. This makes sense if the same files are used in multiple examples. However, I recommend the second option below because example input will probably be small so OK to have the same file copied to each example.
create an assets folder for each menu and example, for example assets/chartjs/line-month/data...files. The folder name should agree with the URL as much as possible to avoid confusion.
I typically create a top-level repo workflow folder that contains TSTool command files and other files that is used to create content for the website. These files could be put in assets, but I try to only put published application files in assets. If workflow folder is used, the name of subfolders can match those of menus and assets to avoid confusion. A folder named data-prep has been used in some repos to accomplish the same thing.
Use folders for third-party packages. For example, create a folder plotly to isolate its js, css, and other files. In order to ensure cache-busting for changed files, all third-party components need to have a version and/or date in their js filename. InfoMapper uses this approach for leaflet and the demo can use the approach for plotly, etc.
Josh and I have spent quite a bit of time on the InfoMapper organizing files. The following are recommendations for the demo application:
assets. Although it may make sense to have a package hierarchy with folders for code we are writing, using a flat structure for the demo application is probably OK for now. I recommend using the same organization as InfoMapper if possible so that zero changes need to be made to the TypeScript code. The versions of the code in InfoMapper should be the master because we don't want to have to make changes in other copies and risk an incompatibility. We should have a discussion as a team to discuss organization more but for now my main point is to get the code out ofassets.assets, use folders to organize so thatassetsdoes not become a mess. For example, the StateMod dataset viewer application files are copied to InfoMapperassets. I recommend using one of the following approaches (or similar):assets/data-ts/folder for time series files and then handling the relative/absolute paths similar to InfoMapper. This makes sense if the same files are used in multiple examples. However, I recommend the second option below because example input will probably be small so OK to have the same file copied to each example.assetsfolder for each menu and example, for exampleassets/chartjs/line-month/data...files. The folder name should agree with the URL as much as possible to avoid confusion.workflowfolder that contains TSTool command files and other files that is used to create content for the website. These files could be put in assets, but I try to only put published application files inassets. If workflow folder is used, the name of subfolders can match those of menus and assets to avoid confusion. A folder nameddata-prephas been used in some repos to accomplish the same thing.plotlyto isolate its js, css, and other files. In order to ensure cache-busting for changed files, all third-party components need to have a version and/or date in their js filename. InfoMapper uses this approach for leaflet and the demo can use the approach for plotly, etc.