Develop (#142)

* lazy loading and release scripts changes

* hot reload for livestream

* deleting shrinkwraps

* legend click hiding line chart

* updates

* setup script

* devprep updates

* more script updates

.gitignore

@@ -10,4 +10,5 @@ feed
 eslint
 .well-known
 log
-coverage
+coverage
+objectTemp

README.md

@@ -40,19 +40,13 @@ cp env.example .env
 
 Fill in the .env with all the info listed ( for optional fields, leave blank after the "=" ). 
 
-### 3. Installing NPM dependencies
+### 3. Run Setup
 
 ```
-npm install
+npm run setup
 ```
 
-### 4. Run Build
-
-```
-npm run build-with-env
-```
-
-### 5. Start Chimera
+### 4. Start Chimera
 
 If running all or more than one service(s)
 ```

command/frontend/app/FileStatsLineChart.jsx

@@ -19,7 +19,7 @@ const customTooltip = ({ active, payload }) => {
 				{payload.map((cam, index) => {
 					const name = payload[index].name
 					const value = formatBytes( payload[index].value, 2 )
-					return <div>{payload[index].value == 0 ? null : `${name} : ${value}`}<br/></div>
+					return <div>{`${name} : ${payload[index].value == 0 ? "-" : value}`}<br/></div>
 				})}
 			</div>
 		)
@@ -28,18 +28,32 @@ const customTooltip = ({ active, payload }) => {
 	return null
 }
 
-
 const FileStatsLineChart = (props) => {
-	const [state] = useFileStats({
+	const [state, setState] = useFileStats({
 		loading: "refreshing",
 		cameras: JSON.parse(process.env.cameras).map(cameraInfo),
 		days: 7,
 		lastUpdated: moment().format("h:mm:ss a"),
-		fileStats: []
+		fileStats: [],
+		hide: JSON.parse(process.env.cameras).reduce((obj, cam) => ({...obj, [cam]: false}), {})
 	})
 
+	console.log("STATS", state)
+
+	const legendHandler = ({ payload }) => {
+		console.log("LEGEND", payload)
+		const {dataKey} = payload
+		if(dataKey != undefined){
+			setState((oldState) => {
+				let {hide} = oldState
+				hide[dataKey] = !oldState.hide[dataKey]
+				return {...oldState, hide, lastUpdated: moment().format("h:mm:ss a")}
+			})
+		}
+	}
+
 	return (
-		<ResponsiveContainer>
+		<ResponsiveContainer key={`LINE-CHART-${state.lastUpdated}`}>
 			<LineChart data={props.mobile ? state.fileStats.slice(state.fileStats.length-3, state.fileStats.length) : state.fileStats}>
 				<Tooltip content={customTooltip} />
 				<XAxis 
@@ -49,10 +63,10 @@ const FileStatsLineChart = (props) => {
 					type="number"
 				/>
 				<YAxis tickFormatter={bytes => formatBytes( bytes, 2 )}/>
-				<Legend layout="horizontal" align="right" verticalAlign="top" />
+				<Legend onClick={legendHandler} layout="horizontal" align="right" verticalAlign="top" />
 				{
 					state.cameras.map(({name}, index) => {
-						return <Line type="monotone" dataKey={name} stroke={colors[index % colors.length]} />
+						return <Line hide={state.hide[name]} type="monotone" dataKey={name} dot={false} stroke={colors[index % colors.length]} />
 					})
 				}
 			</LineChart>

command/frontend/app/LiveVideo.jsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from "react"
 import useLiveVideo from "../hooks/useLiveVideo.js"
 import useSquarifyVideos from "../hooks/useSquarifyVideo.js"
 
-import { Card, Tabs, Row, Col, Space, Typography } from "antd"
+import { Card, Tabs, Row, Col, Space, Typography, Divider } from "antd"
 import ReactHlsPlayer from "react-hls-player"
 import NavigateToRoute from "./NavigateToRoute.jsx"
 
 import moment from "moment"
 
 const LiveVideo = (props) => {
-	const [state, setState] = useLiveVideo({
+	const [state, setState, attemptRestart] = useLiveVideo({
 		loading: false,
 		lastUpdated: moment().format("h:mm:ss a"),
 		videoList: [],
@@ -75,9 +75,11 @@ const LiveVideo = (props) => {
 				/>
 				<Typography>{video.camera}</Typography>
 				<br />
-				{props.mobile ? null : <Space>
-					<Typography.Link href="/object">object view</Typography.Link>
-				</Space>}
+				<Space>
+					<Typography.Link onClick={() => {attemptRestart(index + 1)}}>refresh</Typography.Link>
+					<Divider />
+					{props.mobile ? null : <Typography.Link href="/object">object view</Typography.Link>}
+				</Space>
 			</Tabs.TabPane>)}
 		</Tabs>}
 	/>

command/frontend/app/SummaryScrubber.jsx

@@ -19,6 +19,14 @@ const SummaryScrubber = (props) => {
 					imagesLoaded: state.imagesLoaded + 1
 				}))
 			}}
+			onError = {() => {
+				console.log("ERROR IMAGE LOAD")
+				setState((oldState) => ({
+					...oldState,
+					imagesLoaded: state.imagesLoaded + 1
+				}))
+			}}
+			loading="eager"
 		/>
 	)) : <Empty
 		description="No Images"

command/frontend/hooks/useFileStats.js

@@ -24,7 +24,7 @@ const useFileStats = (initialState) => {
 		statsUpdate(state, setState)
 	}, [])
 
-	return [state]
+	return [state, setState]
 }
 
 export default useFileStats

command/frontend/hooks/useLiveVideo.js

@@ -35,14 +35,25 @@ const listVideos = (state, setState) => {
 	})
 }
 
+const attemptRestart = (camera) => {
+	request("/livestream/restart", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({camera}),
+		mode: "cors"
+	})
+}
+
 const useLiveVideo = (initialState) => {
 	const [state, setState] = useState(initialState)
 
 	useEffect(() => {
 		listVideos(state, setState)
 	}, [])
 
-	return [state, setState]
+	return [state, setState, attemptRestart]
 }
 
 export default useLiveVideo