This project was created using React, Leaflet, and Tailwind. It can display over three thousand records by various search parameters, including the ability to select records via geographic region on an interactive map. It allows end users to quickly find and open relevant records with a web based interface instead of manually searching through excel files that contain lists of record names.
Lawrence Berkeley National Laboratory is a federally funded DOE lab campus celebrating its 90th year. There are decades worth of documents stored and managed internally. Engineers regularly need to find and view these records, in particular those related to construction documentation. Part of that documentation includes structural calculation records. For example, each building contains a set of calculation records proving the design satisfies the building code. Besides buildings, smaller individual equipment and other construction related work will also have associated calculations.
Finding and opening these records can be a tedious process. First open a master spreadsheet, then find the ID number for the record, then open the file with that ID number in a Google Drive folder.
The motivation for streamlining this process is allowing end users to find specific records in a matter of seconds, and also to quickly find previous records that can be used as a reference for future designs. This reduces wasted time searching through documents, and can help new engineers find references for their future designs.
End users can filter records by clicking elements on the map tool or entering a building number:
Records can be sorted by building floor level, type, and attachment type.
Depending on the chosen parameters, the relevant records are shown with an image preview.
Clicking a record opens up the file in a new tab, allowing the user to view or download.
Google Earth was used to create layer data that could eventually be imported as clickable elements on the map tool. Shapes were drawn around buildings, named accordingly, downloaded as KML layers, and finally converted to GeoJSON format.
Leaflet was selected as the map tool due to support from React-Leaflet and its ability to display map tiles at small scale. The previously created GeoJSON elements are passed into the map with a click handler for the required functionality.
The master Excel spreadsheet was downloaded and converted to Google Sheets, which has Google Script functionality. A Google Script was used to target and retrieve record data from the folder locations in Google Drive. This allowed the retrieval of the links for each record so they could be opened from the web app. At this stage the records were cleaned for duplicates, missing entries, and revisions.
To add search functionality, parameters were added to each record row in Google Sheets. Based on the record contents, parameters were manually toggled on as applicable.
The final cleaned and tagged data was then converted to a JSON format which was copied into a Javascript file.
To prevent loading all records (and record images) at once, only a subset of records are displayed in the results. Images are only loaded for the current display results. This is done by dynamically specifying the image paths based on the ID number. This only works when the reference to the exact path is known to Webpack during the build process, which is done via context.
