EyeLine

Filler text, will update later (team re# EyeLine EyeLine is a dashboard meant to assist lease operators with managing the wells they oversee. The dashboard allows easy access to the status of wells, as well as the potential to view production errors like hydrate formation in real-time.

Inspiration

We were inspired by experiences in our professional careers and designs we encountered in daily life. Our final design was inspired by iPhone apps like the Weather app, which showed us UI inspiration for lists of locations, as well as dashboards from professional data analysts, which established an industry standard in our mind and gave us a goal to reach for.

What it does

EyeLine has the capability to display all streams of information from multiple wells in an easy-to-read and intuitive form. We

How we built it

We used FastAPI/Python for the backend. This decision was made because of our familiarity with the language and ease of data manipulation in Python, as well as the simplicity of routing FastAPI offers.

For the front-end, we used React with Capacitor. We identified that lease operators often travel between different wells, so a mobile app was the best option we saw. However, mobile apps posed numerous challenges to coding (more details below), so we used Capacitor to construct a desktop app that can be easily turned into a mobile app, with cross-platform support for iOS and Android. This decision allowed us to not need separate codebases for each platform we wanted to reach.

One of the unique abilities of our app is the ability to take in multiple streams of information at once, which was an intentional decision when being mindful of what a lease operator managing multiple different wells would have to track. This way, the operator can quickly know when a well has a potential hydrate formation, regardless of what well they are currently at.

Challenges we ran into

The greatest challenge we ran into was the simulation of streaming from the backend to the frontend. We wanted to make an app that was able to read the given CSV data one row at a time, which involved using several libraries, almost all of which had some small but ultimately functionality-killing property. Eventually, we settled on using Mozilla Developer Network's EventSource in conjunction with FastAPI's StreamingResponse, and data was successfully transferred between the server and the client-side app in a stream-like manner.

Another challenge was the use of Capacitor for the iOS and Android compatibility. Although Capacitor is extremely powerful, it is not perfect; it has edge cases that do require careful attention to what platform we are on, requiring several adjustments. It makes jumping from desktop to mobile much easier, but that doesn't mean it's easy. It was also our first time using something that was designed to help cross-platform functionality like Capacitor, so we encountered many challenges attempting to get it functional.

Accomplishments that we're proud of

We are extremely proud of how we got the stream simulation to work with SSE (server-sent events) drip-feeding the data CSV into the front-end application. It was the first time either of us had attempted both Capacitor and the stream function, so to eventually be successful on this task proved that we could reach a very ambitious goal. The same thing can be said for Capacitor. For our first time using a technology like it, we landed extremely close to supporting both iOS and Android with a desktop-built app, which is something we are both very proud of.

What we learned

We learned a lot about working on cross-platform development. The challenge of trying to build an app that is functional on PCs, Macs, iPhones, and Androids taught us a lot about what developers in the industry must do to satisfy a large crowd. Lease operators can have any preference, and developers must consider the end user's goals. We also learned a lot about code collaboration. We used Git for smaller files, but we realized that sufficiently large files would be extremely difficult to distribute through Git, so we used other filesharing software to handle larger assets.

What's next for EOG Challenge

The most important features we would like to add are features that would directly benefit the lease operator. The great thing about EyeLine is the dashboard is very customizable, so the option to send an automated email alerting about a potential hydrate when the Hydrate Production flag is true. In addition, we would like to clean up the UI by a lot, with the following changes:

1. Make the colors of each card correspond to its current status, with Green being normal operation, Yellow being a warning/slightly abnormal, and Red being a significant production error, possibly due to a hydrate.
2. Make the Hydrate flag the largest visible flag. The circular icon is a good indicator, but it's not the true indicator of a hydrate forming, so make the actual Hydrate flag the most obvious thing about a card.
3. Clicking on a card should bring up a more detailed view, with past history of the well shown. We truly believe no model is perfect, and having an experienced operator analyze the automated alert with context of previous days would result in fewer false positives.
4. We would like to include the process of adding new wells/data sources into the app, so lease operators can add and remove wells at will.gistration)

Built With

• capacitor
• express.js
• fastapi
• javascript
• python
• react
• sse