Merge branch 'release/1.9.7'

Author: Alex

net2vis/src/actions/index.js

@@ -55,6 +55,11 @@ export function toggleAlert() {
   return { type: types.TOGGLE_ALERT };
 }
 
+// Toggle the Help View
+export function toggleHelp() {
+  return { type: types.TOGGLE_HELP };
+}
+
 // Toggle the Upload Alert View
 export function toggleUpload() {
   return { type: types.TOGGLE_UPLOAD };

net2vis/src/actions/types.js

@@ -12,6 +12,7 @@ export const TOGGLE_CODE = "TOGGLE_CODE";
 export const TOGGLE_PREFERENCES = "TOGGLE_PREFERENCES";
 export const TOGGLE_LEGEND = "TOGGLE_LEGEND";
 export const TOGGLE_ALERT = "TOGGLE_ALERT";
+export const TOGGLE_HELP = "TOGGLE_HELP";
 export const TOGGLE_UPLOAD = "TOGGLE_UPLOAD";
 export const LOAD_LAYER_TYPES_SUCCESS = "LOAD_LAYER_TYPES_SUCCESS";
 export const LOAD_PREFERENCES_SUCCESS = "LOAD_PREFERENCES_SUCCESS";

net2vis/src/components/controls/ControlsComponent.js

@@ -15,7 +15,7 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import { GetApp, BugReport } from "@mui/icons-material";
+import { GetApp, BugReport, Help } from "@mui/icons-material";
 
 import ToggleButton from "./ToggleButton";
 import * as actions from "../../actions";
@@ -138,6 +138,13 @@ class Controls extends React.Component {
               />
             </div>
             <div>
+              <IconButton
+                color="inherit"
+                aria-label="Help"
+                onClick={this.props.actions.toggleHelp}
+              >
+                <Help />
+              </IconButton>
               <IconButton
                 color="inherit"
                 aria-label="Report Bug"
@@ -168,8 +175,7 @@ class Controls extends React.Component {
                 <DialogContent>
                   <DialogContentText id="alert-dialog-description">
                     This is a research project. When using these visualizations,
-                    please cite us. You can find the publication on{" "}
-                    <a href="https://arxiv.org/abs/1902.04394">ArXiv</a>.
+                    please <a href="https://ieeexplore.ieee.org/abstract/document/9350177">cite us</a>.
                   </DialogContentText>
                 </DialogContent>
                 <DialogActions>
@@ -178,6 +184,39 @@ class Controls extends React.Component {
                   </Button>
                 </DialogActions>
               </Dialog>
+              <Dialog
+                open={display.help_toggle}
+                aria-labelledby="help-dialog-title"
+                aria-describedby="help-dialog-description"
+              >
+                <DialogTitle id="help-dialog-title">
+                  Help
+                </DialogTitle>
+                <DialogContent>
+                  <DialogContentText id="help-dialog-description">
+                    Net2Vis has been a research project and is now maintained by the author of the <a href="https://ieeexplore.ieee.org/abstract/document/9350177">associated publication</a> and by the community that uses this application.
+                    Feel free to file issues on git or contribute yourself by implementing new features.
+                    <br />
+                    <br />
+                    <b>Grouping</b>
+                    <br />
+                    To create custom groups, select a layer, then shift-select another layer.
+                    If you selected layers that can be grouped, the group button on the lower right will become active.
+                    <br />
+                    <br />
+                    <b>Errors</b>
+                    <br />
+                    If your code contains an error, you will get a notification saying that your code is not executable.
+                    The code will also get a red x icon next to where the error occured.
+                    Hovering that icon provides more detail on the error.
+                  </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                  <Button onClick={this.props.actions.toggleHelp} color="primary" autoFocus>
+                    Thanks!
+                  </Button>
+                </DialogActions>
+              </Dialog>
             </div>
           </div>
         </Toolbar>

net2vis/src/reducers/DisplayReducer.js

@@ -11,6 +11,8 @@ export default function displayReducer(state = initialState.display, action) {
       return { ...state, legend_toggle: !state.legend_toggle };
     case types.TOGGLE_ALERT:
       return { ...state, alert_toggle: !state.alert_toggle };
+    case types.TOGGLE_HELP:
+      return { ...state, help_toggle: !state.help_toggle };
     case types.TOGGLE_UPLOAD:
       return { ...state, upload_toggle: !state.upload_toggle };
     default:

net2vis/src/reducers/initialState.js

@@ -18,6 +18,7 @@ export default {
     preferences_toggle: true,
     legend_toggle: true,
     alert_toggle: false,
+    help_toggle: false,
     upload_toggle: false,
   },
   layer_types_settings: {},