UI updates

extras/device_client/lib/view/home_page.dart

@@ -7,6 +7,8 @@ import 'package:device_client/view/current_data_page.dart';
 import 'package:device_client/view/files_page.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+// import 'package:web/web.dart' as html;
+// TODO: Figure out how to link to website without having interference with Flutter widget tests
 
 class MyHomePage extends StatefulWidget {
   const MyHomePage({required this.title, super.key});
@@ -45,6 +47,9 @@ class _MyHomePageState extends State<MyHomePage> {
             title: Text(
               '${widget.title}: ${appData.currentTank.name}',
             ),
+            // actions: [
+            //   _tankMonitorRedirect(),
+            // ],
           ),
           drawer: AppDrawer(context: context),
           body: children[appData.currentIndex],
@@ -53,4 +58,27 @@ class _MyHomePageState extends State<MyHomePage> {
       },
     );
   }
+
+  //   Padding _tankMonitorRedirect() {
+  //   return Padding(
+  //     padding: const EdgeInsets.only(right: 8.0),
+  //     child: TextButton(
+  //       onPressed: () {
+  //         const tankMonitorUrl = 'https://oap.cs.wallawalla.edu/';
+  //         html.window.open(tankMonitorUrl, '_self');
+  //       },
+  //       child: Row(
+  //         mainAxisSize: MainAxisSize.min,
+  //         children: const [
+  //           Text(
+  //             'Go to Tank Monitor',
+  //             style: TextStyle(fontWeight: FontWeight.bold),
+  //           ),
+  //           SizedBox(width: 8),
+  //           Icon(Icons.swap_horiz),
+  //         ],
+  //       ),
+  //     ),
+  //   );
+  // }
 }

extras/device_client/pubspec.lock

@@ -819,7 +819,7 @@ packages:
     source: hosted
     version: "1.1.1"
   web:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: web
       sha256: cd3543bd5798f6ad290ea73d210f423502e71900302dde696f8bff84bf89a1cb

extras/device_client/pubspec.yaml

@@ -19,6 +19,7 @@ dependencies:
   universal_html: ^2.2.1
   url_launcher: ^6.1.11
   version: ^3.0.2
+  web: ^1.1.0
 
 dev_dependencies:  
   build_runner: ^2.3.3

extras/log_file_client/lib/components/graph_view.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:log_file_client/components/toggle_button.dart';
 import 'package:log_file_client/utils/http_client.dart';
 import 'package:syncfusion_flutter_charts/charts.dart';
 
-class GraphView extends StatelessWidget {
+class GraphView extends StatefulWidget {
   const GraphView({
     required this.filePath,
     required this.httpClient,
@@ -12,41 +13,82 @@ class GraphView extends StatelessWidget {
   final String filePath;
   final HttpClient httpClient;
 
+  @override
+  State<GraphView> createState() => _GraphViewState();
+}
+
+class _GraphViewState extends State<GraphView> {
+  bool _showPH = true;
+  bool _showTemp = true;
+
   Future<List<LogDataLine>> getLogData() async {
-    final table = await httpClient.getLogData(filePath);
+    final table = await widget.httpClient.getLogData(widget.filePath);
     return table;
   }
 
+  void toggleSeriesView(int index) {
+    setState(() {
+      if (index == 0) {
+        _showPH = !_showPH;
+      } else {
+        _showTemp = !_showTemp;
+      }
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     // ignore: discarded_futures
     final Future<List<LogDataLine>> logData = getLogData();
 
     return Scaffold(
       body: Center(
-        child: FutureBuilder<List<LogDataLine>>(
-          future: logData,
-          builder: (context, snapshot) {
-            if (snapshot.connectionState == ConnectionState.waiting) {
-              return const Center(child: CircularProgressIndicator());
-            } else if (snapshot.hasError) {
-              return Center(child: Text('Error: ${snapshot.error}'));
-            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
-              return const Center(child: Text('No data found'));
-            } else {
-              final logData = snapshot.data!;
-              return Container(
-                padding: const EdgeInsets.all(16.0),
-                child: _graph(logData),
-              );
-            }
-          },
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            _graphBuilder(logData),
+            _toggleButton(),
+          ],
         ),
       ),
     );
   }
 
-  SfCartesianChart _graph(List<LogDataLine> logData) {
+  FutureBuilder _graphBuilder(
+    Future<List<LogDataLine>> logData,
+  ) {
+    return FutureBuilder<List<LogDataLine>>(
+      future: logData,
+      builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 300),
+            child: CircularProgressIndicator(),
+          );
+        } else if (snapshot.hasError) {
+          return Center(child: Text('Error: ${snapshot.error}'));
+        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+          return const Center(child: Text('No data found'));
+        } else {
+          final logData = snapshot.data!;
+          return _graph(logData);
+        }
+      },
+    );
+  }
+
+  Widget _toggleButton() {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 8.0),
+        child: ToggleButton(
+          onPressed: toggleSeriesView,
+        ),
+      ),
+    );
+  }
+
+  Widget _graph(List<LogDataLine> logData) {
     final trackballBehavior = TrackballBehavior(
       enable: true,
       tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
@@ -60,31 +102,30 @@ class GraphView extends StatelessWidget {
       activationMode: ActivationMode.singleTap,
     );
 
-    return SfCartesianChart(
-      title: ChartTitle(text: 'Tank ID: ${logData.first.tankid}'),
-      backgroundColor: Colors.white,
-      primaryXAxis: DateTimeAxis(
-        title: AxisTitle(text: 'Time'),
-        intervalType: DateTimeIntervalType.hours,
-        interval: 1,
-      ),
-      primaryYAxis: NumericAxis(
-        name: 'pHAxis',
-        title: AxisTitle(text: 'pH Value'),
-      ),
-      axes: <ChartAxis>[
-        NumericAxis(
-          name: 'TemperatureAxis',
-          title: AxisTitle(text: 'Temperature Value'),
-          opposedPosition: true,
+    return Expanded(
+      child: SfCartesianChart(
+        title: ChartTitle(text: 'Tank ID: ${logData.first.tankid}'),
+        backgroundColor: Colors.white,
+        primaryXAxis: DateTimeAxis(
+          title: AxisTitle(text: 'Time'),
+          intervalType: DateTimeIntervalType.hours,
+          interval: 1,
+        ),
+        primaryYAxis: NumericAxis(
+          name: 'pHAxis',
+          title: AxisTitle(text: 'pH Value'),
         ),
-      ],
-      legend: Legend(
-        isVisible: true,
-        position: LegendPosition.bottom,
+        axes: <ChartAxis>[
+          NumericAxis(
+            name: 'TemperatureAxis',
+            title: AxisTitle(text: 'Temperature Value'),
+            opposedPosition: true,
+            isVisible: _showTemp && _showPH,
+          ),
+        ],
+        trackballBehavior: trackballBehavior,
+        series: _chartSeries(logData),
       ),
-      trackballBehavior: trackballBehavior,
-      series: _chartSeries(logData),
     );
   }
 
@@ -98,16 +139,19 @@ class GraphView extends StatelessWidget {
         yValueMapper: (LogDataLine log, _) => log.tempMean,
         color: Colors.blue,
         yAxisName: 'TemperatureAxis',
+        animationDuration: 0,
+        initialIsVisible: _showTemp,
       ),
       LineSeries<LogDataLine, DateTime>(
         legendItemText: 'temp setpoint',
         name: 'temp setpoint',
         dataSource: logData,
         xValueMapper: (LogDataLine log, _) => log.time,
         yValueMapper: (LogDataLine log, _) => log.tempTarget,
-        dashArray: <double>[5, 5],
-        color: Colors.blue,
+        color: Colors.blue.shade800,
         yAxisName: 'TemperatureAxis',
+        animationDuration: 0,
+        initialIsVisible: _showTemp,
       ),
       LineSeries<LogDataLine, DateTime>(
         legendItemText: 'pH',
@@ -117,16 +161,19 @@ class GraphView extends StatelessWidget {
         yValueMapper: (LogDataLine log, _) => log.phCurrent,
         color: Colors.green,
         yAxisName: 'pHAxis',
+        animationDuration: 0,
+        initialIsVisible: _showPH,
       ),
       LineSeries<LogDataLine, DateTime>(
         legendItemText: 'pH setpoint',
         name: 'pH setpoint',
         dataSource: logData,
         xValueMapper: (LogDataLine log, _) => log.time,
         yValueMapper: (LogDataLine log, _) => log.phTarget,
-        dashArray: <double>[5, 5],
-        color: Colors.green,
+        color: Colors.green.shade800,
         yAxisName: 'pHAxis',
+        animationDuration: 0,
+        initialIsVisible: _showPH,
       ),
     ];
   }