diff --git a/app/App.tsx b/app/App.tsx
index 653da7883f4bcf1b82810ef3b133a17941e3e925..e6219078fa9b0965ef2f6054094f7c49e86e1b83 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -54,6 +54,9 @@ const theme = createMuiTheme({
},
});
+/**
+ * The top component for the app. Sets the app theme, contains the router and tabcontainer. Provides tab context
+ */
export default function App() {
return (
<div className="content">
diff --git a/app/backend/data-processor/DataProcessor.ts b/app/backend/data-processor/DataProcessor.ts
index 3a3e7c49090216c1b252160ed8b5288f8c47d7c0..b8ffeb1777c4b2aa1bcaf475d274965d258965a5 100644
--- a/app/backend/data-processor/DataProcessor.ts
+++ b/app/backend/data-processor/DataProcessor.ts
@@ -10,6 +10,9 @@ import { MemoryPerformance } from './types/MemoryPerformance';
import { MemoryPerformanceDataPoint } from './types/MemoryPerformanceDataPoint';
import { StageTimes } from './types/StageTimes';
+/**
+ * A class responsible for processing the raw data from a recording into something which can be easily displayed
+ */
export default class DataProcessor {
static processMemoryPerformance(performanceData?: Result) {
// TODO: Add more restrictive tests
diff --git a/app/backend/recorder/SqlManager.ts b/app/backend/recorder/SqlManager.ts
index 5ef428aabc52c768bd203fc5443b9c7138342ef3..5efc6af2904fce497e2f5273cfced897ad692668 100644
--- a/app/backend/recorder/SqlManager.ts
+++ b/app/backend/recorder/SqlManager.ts
@@ -25,6 +25,9 @@ export interface RawRecording {
tabID: string;
}
+/**
+ * A class responsible for managing connections and performing recordings
+ */
export default class SqlManager {
connections: {
[key: string]: {
diff --git a/app/backend/recorder/SqlManagerSingleton.ts b/app/backend/recorder/SqlManagerSingleton.ts
index c60832ed2c1dcc7ad5e10acd6314789cade07abe..9544c54f7e13551b94b503e34dd2f24099790bfe 100644
--- a/app/backend/recorder/SqlManagerSingleton.ts
+++ b/app/backend/recorder/SqlManagerSingleton.ts
@@ -6,6 +6,9 @@ interface Singleton {
getInstance: () => SqlManager;
}
+/**
+ * An object responsible for ensuring only one instance of the SqlManager is made
+ */
const SqlManagerSingleton: Singleton = {
instance: undefined,
diff --git a/app/backend/utils/FileIO.ts b/app/backend/utils/FileIO.ts
index 4ba9d94b81a68daf1991b4cbf03921922efda6e2..e22b638b10ad6969541026324f5f64933cc2b4c0 100644
--- a/app/backend/utils/FileIO.ts
+++ b/app/backend/utils/FileIO.ts
@@ -7,6 +7,9 @@ import { LoginDetails } from '../types/LoginDetails';
// fs docs: https://nodejs.org/api/fs.html#fs_file_paths
+/**
+ * A class responsible for writing and reading files
+ */
export default class FileIO {
static async saveLoginDetails(loginDetails: LoginDetails) {
const loginDetailsLocation = path.join(
diff --git a/app/components/EditTextDialog.tsx b/app/components/EditTextDialog.tsx
index 545b350773e6052b115ba7dcb846716a1819ae40..8263323d08b4e1809df848c771632eb3628bdd95 100644
--- a/app/components/EditTextDialog.tsx
+++ b/app/components/EditTextDialog.tsx
@@ -11,6 +11,10 @@ interface EditTextDialogProps {
onSubmit: (value: string) => void;
}
+/**
+ * A general purpose dialog for editing simple text
+ * @param props The information needed to display and manipulate the text
+ */
export default function EditTextDialog(props: EditTextDialogProps) {
const {
open,
diff --git a/app/components/dashboard/ColorPicker.tsx b/app/components/dashboard/ColorPicker.tsx
index 455bd0c255cc8cb46719046e461639d327057ae4..724e0967527b6928dffdc759062d216f91cfd7fc 100644
--- a/app/components/dashboard/ColorPicker.tsx
+++ b/app/components/dashboard/ColorPicker.tsx
@@ -3,6 +3,10 @@ import { ChromePicker, ColorResult } from 'react-color';
import { isNaN } from 'lodash';
import { IconButton, Icon, Popover, TextField } from '@material-ui/core';
+/**
+ * A component for picking colors.
+ * @param props state for the current color and a callback to change it
+ */
export default function ColorPicker(props: {
currentColor: string;
setColor: (value: string) => void;
diff --git a/app/components/dashboard/ErrorView.tsx b/app/components/dashboard/ErrorView.tsx
index 349d9ec03cd28bdd79c5ce110cc39ecebff90da9..8efe81e5430fa17010ed14498a14ca47514da88b 100644
--- a/app/components/dashboard/ErrorView.tsx
+++ b/app/components/dashboard/ErrorView.tsx
@@ -11,6 +11,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A component for showing the errors from a recording to the user
+ */
export default function ErrorView() {
const { state: tabState } = useContext(TabContext);
const { activeTabID, tabs } = tabState;
diff --git a/app/components/dashboard/GlobalSnackbar.tsx b/app/components/dashboard/GlobalSnackbar.tsx
index 439ab11db2227a47e8e2f81f52431b051a14d09a..e71cc0dd69d43ef2bc84126a0e0476fcd07d067d 100644
--- a/app/components/dashboard/GlobalSnackbar.tsx
+++ b/app/components/dashboard/GlobalSnackbar.tsx
@@ -3,6 +3,9 @@ import { Snackbar } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import { GlobalSnackbarContext } from '../../context/GlobalSnackbarContext';
+/**
+ * A general purpose snackbar for showing feedback and alerts to the user
+ */
export default function GlobalSnackbar() {
const globalSnackbarContext = useContext(GlobalSnackbarContext);
diff --git a/app/components/dashboard/IDInfo.tsx b/app/components/dashboard/IDInfo.tsx
index 818a9eeaad7c76d193ec87ec4d5934f8e7188fd7..47e86272d17154f74176314829339465e42605ac 100644
--- a/app/components/dashboard/IDInfo.tsx
+++ b/app/components/dashboard/IDInfo.tsx
@@ -17,6 +17,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A component responsible for showing the thread and connection IDs for the SqlAgent, SqlRunner and the SqlMonitor in this tab.
+ */
export default function IDInfo() {
const { state: tabState } = useContext(TabContext);
const { activeTabID, manager } = tabState;
diff --git a/app/components/dashboard/QueryRecorder.tsx b/app/components/dashboard/QueryRecorder.tsx
index 5a291067020ac7fc00ec3d93110fc8706719c094..d0004b0983fa3580b7b8e7e3db591d09786dc4db 100644
--- a/app/components/dashboard/QueryRecorder.tsx
+++ b/app/components/dashboard/QueryRecorder.tsx
@@ -59,6 +59,10 @@ interface QuerRecorderProps {
onNewRecording: (recording: RecordingUpdate) => void;
}
+/**
+ * A component for allowing the user to enter a query and record it. Supports adding a label or color, toggling explain analyze and configuring the recording timestep
+ * @param props onNewRecording, a callback to add the new recording to the tab context
+ */
export default function QueryRecorder(props: QuerRecorderProps) {
const { onNewRecording } = props;
diff --git a/app/components/dashboard/RecordingOptions/ChangeColor.tsx b/app/components/dashboard/RecordingOptions/ChangeColor.tsx
index db58a31720b9d965283de4496807bdbd5395a0a5..c9c5602617f8850b20ed12d3605945300b8c3578 100644
--- a/app/components/dashboard/RecordingOptions/ChangeColor.tsx
+++ b/app/components/dashboard/RecordingOptions/ChangeColor.tsx
@@ -3,6 +3,10 @@ import { Dialog, DialogTitle, Button, MenuItem } from '@material-ui/core';
import ColorPicker from '../ColorPicker';
import { TabContext } from '../../../context/TabContext';
+/**
+ * A button and dialog for changing the recording color
+ * @param props The ID of the recording this is manipulating and a callback to close the menu
+ */
export default function ChangeColor(props: {
recordingID: string;
handleIconMenuClose: () => void;
diff --git a/app/components/dashboard/RecordingOptions/ChangeLabel.tsx b/app/components/dashboard/RecordingOptions/ChangeLabel.tsx
index 1486a81ed80bf19202d891486510c50688190bcc..274c9722773c5d5eabba8455e3fb9d0a894ae964 100644
--- a/app/components/dashboard/RecordingOptions/ChangeLabel.tsx
+++ b/app/components/dashboard/RecordingOptions/ChangeLabel.tsx
@@ -8,6 +8,10 @@ import {
} from '@material-ui/core';
import { TabContext } from '../../../context/TabContext';
+/**
+ * A button and dialog for changing the recording label
+ * @param props The ID of the recording this is manipulating and a callback to close the menu
+ */
export default function ChangeLabel(props: {
recordingID: string;
handleIconMenuClose: () => void;
diff --git a/app/components/dashboard/RecordingOptions/RecordingOptions.tsx b/app/components/dashboard/RecordingOptions/RecordingOptions.tsx
index 8f44f32abb105cfa6617b72298e98e101efe1577..aeaa1719e1a70c51b3dc65197d6e9ea780500f4f 100644
--- a/app/components/dashboard/RecordingOptions/RecordingOptions.tsx
+++ b/app/components/dashboard/RecordingOptions/RecordingOptions.tsx
@@ -15,6 +15,10 @@ interface RecordingOptionsProps {
recordingID: string;
}
+/**
+ * A menu for manipulating recordings
+ * @param props The ID of the recording this menu was opened for
+ */
export default function RecordingOptions(props: RecordingOptionsProps) {
const [iconAnchorEl, setIconAnchorEl] = useState<null | HTMLElement>(null);
diff --git a/app/components/dashboard/Recordings.tsx b/app/components/dashboard/Recordings.tsx
index f9cf9bd40ddc31018c635ece17a8a0aafc06f41c..23325db45537eb807f199bdbae7317dae337af32 100644
--- a/app/components/dashboard/Recordings.tsx
+++ b/app/components/dashboard/Recordings.tsx
@@ -49,6 +49,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * The list of all recordings in this tab, allowing the user to switch between them, save, load or remove them, or change their labels or colors. The list is searchable
+ */
export default function Recordings() {
const { state: tabState, dispatch } = useContext(TabContext);
const { activeTabID, tabs } = tabState;
diff --git a/app/components/dashboard/SaveRecording.tsx b/app/components/dashboard/SaveRecording.tsx
index 64f9c29b5d0d6dff0033a7276c55faa2bb8431e6..ddc0fc38f8dd48e1ebcf0e063b6b157de196f50f 100644
--- a/app/components/dashboard/SaveRecording.tsx
+++ b/app/components/dashboard/SaveRecording.tsx
@@ -4,6 +4,10 @@ import FileIO from '../../backend/utils/FileIO';
import { GlobalSnackbarContext } from '../../context/GlobalSnackbarContext';
import { TabContext } from '../../context/TabContext';
+/**
+ * A component containing a save button and a dialog for saving a recording with a file name
+ * @param props The id of the recording and wheter it is saved
+ */
export default function SaveRecording(props: {
recordinguuid: string;
isSaved: boolean;
diff --git a/app/components/login/Login.tsx b/app/components/login/Login.tsx
index 4c4e4a4b24221eec7166172ba1a462b5a82492fd..421234587893d1b09e5dc52293722cdf953c03c4 100644
--- a/app/components/login/Login.tsx
+++ b/app/components/login/Login.tsx
@@ -62,6 +62,11 @@ const DefaultProps = {
tabID: undefined,
};
+/**
+ * The form for logging in to a database.
+ * @param onConnect: A function to call when finishing connection. Used if Login is in a dialog
+ * @param tabID: The ID of the tab this was opened for. Is necessary instead of the active tab ID since inactive tabs may change connection
+ */
export default function Login({
onConnect = undefined,
tabID = undefined,
diff --git a/app/components/results/ExplainAnalyze.tsx b/app/components/results/ExplainAnalyze.tsx
index 8e7f51b9c2db3ae9711b2bf69ce6ea5a9f44c4f2..0f20587ccd05b0260df72bcd1e9f6d49fa5e82c0 100644
--- a/app/components/results/ExplainAnalyze.tsx
+++ b/app/components/results/ExplainAnalyze.tsx
@@ -81,6 +81,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A flame graph and tree view of an explain analyze result
+ */
export default function ExplainAnalyze() {
const [selectedNode, setSelectedNode] = useState<ExplainAnalyzeNode | null>(
null
@@ -103,8 +106,11 @@ export default function ExplainAnalyze() {
const data = recordings[activeRecordingID]?.explainAnalyzeRoot;
const parentDict = recordings[activeRecordingID]?.explainAnalyzeParents;
const containerRef = useRef(null);
+
+ // Controls the tree view:
const [expandedIds, setExpandedIds] = useState<string[]>([]);
const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
const [expandAll, setExpandAll] = useState<boolean | undefined>(undefined);
const RenderTree = (nodes: ExplainAnalyzeNode) => (
@@ -116,7 +122,6 @@ export default function ExplainAnalyze() {
);
const RenderTreeWithoutRoot = (root?: ExplainAnalyzeNode) => {
- // Renders only the children of root
const elements: JSX.Element[] = [];
root?.children.forEach((child) => {
elements.push(RenderTree(child));
@@ -125,6 +130,10 @@ export default function ExplainAnalyze() {
};
function returnParents(nodeId: string, parents: { [id: string]: string }) {
+ /*
+ Input: node id, dictionary of parent of each node
+ Output: All parent IDs of a node
+ */
const nodeIds: string[] = [];
let currentNode = nodeId;
let nextNode = parents[currentNode];
@@ -140,6 +149,11 @@ export default function ExplainAnalyze() {
node: ExplainAnalyzeNode,
id: string
): ExplainAnalyzeNode | null {
+ /*
+ Function: Returns node in a tree that matches a certain ID
+ Input: Root node, id
+ Output: Node
+ */
if (node.id === id) {
return node;
}
@@ -158,6 +172,11 @@ export default function ExplainAnalyze() {
node: ExplainAnalyzeNode | undefined,
arr: string[]
): string[] {
+ /*
+ Function: Appends IDs of all nodes in a tree to an array and returns the array
+ Input: Root node, array
+ Output: Array of IDs
+ */
if (!node) {
return [];
}
@@ -171,6 +190,7 @@ export default function ExplainAnalyze() {
}
const handleToggle = (event: any, nodeIds: string[]) => {
+ // Fired when items in tree view are expanded/collapsed.
if (!event.ctrlKey) {
setExpandedIds(nodeIds);
}
@@ -180,6 +200,7 @@ export default function ExplainAnalyze() {
_event: React.ChangeEvent<unknown>,
nodeIds: string[]
) => {
+ // Fired when items in tree view are selected/unselected.
if (data && !unpaired) {
const node = searchTree(data, nodeIds[0]);
setSelectedNode(node);
@@ -188,9 +209,8 @@ export default function ExplainAnalyze() {
};
function handleButtonClick() {
- console.log(expandAll);
+ // Expands/minimizes all items in tree view
if (!expandAll) {
- console.log(getAllIds(data, []));
setExpandedIds(getAllIds(data, []));
setExpandAll(true);
return;
@@ -214,6 +234,7 @@ export default function ExplainAnalyze() {
enableTooltips
disableDefaultTooltips
onChange={(node: { source: ExplainAnalyzeNode }) => {
+ // Fired when flame graph item has been clicked
setSelectedNode(node.source);
if (!unpaired && parentDict) {
setExpandedIds(returnParents(node.source.id, parentDict));
diff --git a/app/components/results/ExplainAnalyzeTable.tsx b/app/components/results/ExplainAnalyzeTable.tsx
index 012f9ef62664f39038959df38501e9ce0e2b93e1..bf8c753268c3c7188444df1ae303f30685f7e2a5 100644
--- a/app/components/results/ExplainAnalyzeTable.tsx
+++ b/app/components/results/ExplainAnalyzeTable.tsx
@@ -11,16 +11,20 @@ import { TableElement } from '../../backend/data-processor/types/TableElement';
const useStyles = makeStyles((theme) => ({
table: {
- // minWidth: 650,
backgroundColor: theme.palette.grey.A700,
},
}));
-function createData(description: string, data: string) {
+function createData(description: string, data: string): TableElement {
return { description, data };
}
function addData(node: ExplainAnalyzeNode | null) {
+ /*
+ Function: Returns table rows containing detailed information about a node
+ Input: Node
+ Output: Array of rows
+ */
if (!node || node.name === 'root') {
const rows = [
createData('Command', ''),
@@ -55,6 +59,10 @@ function addData(node: ExplainAnalyzeNode | null) {
return rows;
}
+/**
+ * A table for showing more information about an explain analyze node
+ * @param data ExplainAnalyzeNode | null
+ */
export default function ExplainAnalyzeTable(data: {
node: ExplainAnalyzeNode | null;
}) {
diff --git a/app/components/results/MemoryPerformance/MemoryChart.tsx b/app/components/results/MemoryPerformance/MemoryChart.tsx
index c9f94cbfbdcd5372d4a2665bbaaa3770de8c614e..2e9bfb3481b9d63e888b501dce7a348ad055cfc7 100644
--- a/app/components/results/MemoryPerformance/MemoryChart.tsx
+++ b/app/components/results/MemoryPerformance/MemoryChart.tsx
@@ -58,6 +58,9 @@ const modalStyle = {
transform: 'translate(-50%,-50%)',
};
+/**
+ * @deprecated The old component for showing memory usage over time
+ */
export default function MemoryChart() {
const classes = useStyles();
const { state: tabState } = useContext(TabContext);
diff --git a/app/components/results/MemoryPerformance/MemoryEvents.tsx b/app/components/results/MemoryPerformance/MemoryEvents.tsx
index 279ee12e977a076fd556d727f40cee7a0432caf8..661d323c0d378d314c9f5f4f58d39454aca36e60 100644
--- a/app/components/results/MemoryPerformance/MemoryEvents.tsx
+++ b/app/components/results/MemoryPerformance/MemoryEvents.tsx
@@ -33,6 +33,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A dialog for changing which memory events to show
+ */
export default function MemoryEvents() {
const classes = useStyles();
const memoryPerformanceContext = useContext(MemoryPerformanceContext);
diff --git a/app/components/results/MemoryPerformance/MemoryPerformance.tsx b/app/components/results/MemoryPerformance/MemoryPerformance.tsx
index 9277f8bd770e6ea10186dacfbe3b54d66e3608eb..eab0384df3ab7c74af259387760df391fe3c6289 100644
--- a/app/components/results/MemoryPerformance/MemoryPerformance.tsx
+++ b/app/components/results/MemoryPerformance/MemoryPerformance.tsx
@@ -42,6 +42,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A graph showing the memory usage over time for a query
+ */
export default function MemoryPerformance() {
const classes = useStyles();
diff --git a/app/components/results/MemoryPerformance/MemoryStages.tsx b/app/components/results/MemoryPerformance/MemoryStages.tsx
index 3528080d5c5c083f7ebc32ee1f5fc7d05e6c1b01..d7220a556f68f04f2b74d7f955c1e5632f2fb703 100644
--- a/app/components/results/MemoryPerformance/MemoryStages.tsx
+++ b/app/components/results/MemoryPerformance/MemoryStages.tsx
@@ -33,6 +33,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A dialog for changing which memory stages to show
+ */
export default function MemoryStages() {
const classes = useStyles();
const memoryPerformanceContext = useContext(MemoryPerformanceContext);
diff --git a/app/components/results/OptimizerTrace.tsx b/app/components/results/OptimizerTrace.tsx
index 1eb120e2136acdb5c7185702dd0d76cb11949756..e31cb41c65e4c0da196f5fde63c6512607c0e2d7 100644
--- a/app/components/results/OptimizerTrace.tsx
+++ b/app/components/results/OptimizerTrace.tsx
@@ -4,6 +4,9 @@ import ReactJson from 'react-json-view';
import { makeStyles } from '@material-ui/core/styles';
import { TabContext } from '../../context/TabContext';
+/**
+ * Responsible for showing the optimizer trace of a recording as json, allowing it to be expanded or collapsed
+ */
export default function OptimizerTrace() {
const [expandAll, setExpandAll] = useState<boolean | undefined>(undefined);
diff --git a/app/components/results/ResultGrid.tsx b/app/components/results/ResultGrid.tsx
index 08b285732d42ac3c8bdb3d05dfec6dbc21a42af8..cca4043b53d1ed605057baab1eff81ea8bce2df5 100644
--- a/app/components/results/ResultGrid.tsx
+++ b/app/components/results/ResultGrid.tsx
@@ -30,6 +30,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * A table showing the results of a query. Virtualized
+ */
export default function ResultGrid() {
const { state: tabState } = useContext(TabContext);
const { activeTabID, tabs } = tabState;
diff --git a/app/components/results/ResultJson.tsx b/app/components/results/ResultJson.tsx
index 0a7bf7b10de339f66580516b9cbdf554501f33d0..f59f14e5754d5ef77b11464c71a4ef1c4093e773 100644
--- a/app/components/results/ResultJson.tsx
+++ b/app/components/results/ResultJson.tsx
@@ -9,6 +9,10 @@ interface TResultProps {
textColor: string;
}
+/**
+ * Unused. Shows the result as pure json
+ * @param props The result and textcolor
+ */
export default function ResultJson(props: TResultProps) {
const useStyles = makeStyles((theme) => ({
container: {
diff --git a/app/components/results/ResultTable.tsx b/app/components/results/ResultTable.tsx
index f63b7d0ad7f34645345a2987904b67dae35a181a..e5d131463957260cf54988ed58e34ad32c57568b 100644
--- a/app/components/results/ResultTable.tsx
+++ b/app/components/results/ResultTable.tsx
@@ -61,6 +61,9 @@ const StyledTableCell = withStyles(() =>
})
)(TableCell);
+/**
+ * A table showing the results of a query. Virtualized
+ */
export default function ResultTable() {
const { state: tabState } = useContext(TabContext);
const { activeTabID, tabs } = tabState;
diff --git a/app/components/tabs/Tab.tsx b/app/components/tabs/Tab.tsx
index 073b0141364fdd4c56378b83b1bfef054f5f110b..c526b9a4c1fcdb7db9c957185f5fd9f24bb472c5 100644
--- a/app/components/tabs/Tab.tsx
+++ b/app/components/tabs/Tab.tsx
@@ -55,6 +55,10 @@ interface TabProps {
onClose: (uuid: string) => void;
}
+/**
+ * The displayed tab, containing its label and some controls.
+ * @param props The information needed to display and manipulate the tab
+ */
export default function Tab(props: TabProps) {
const { label, uuid, isActive, width, canClose, onSwitch, onClose } = props;
diff --git a/app/components/tabs/TabBar.tsx b/app/components/tabs/TabBar.tsx
index daee7ecca560e683b0084f752ccc4f5e6d084612..40e3a662a6160c42dc7e202192e12a3b297fad85 100644
--- a/app/components/tabs/TabBar.tsx
+++ b/app/components/tabs/TabBar.tsx
@@ -58,6 +58,9 @@ const useStyles = (tabWidth: number, tabsWidth: number) =>
},
}));
+/**
+ * The tab bar, responsible for containing and managing the displayed tabs. Is meant to also contain the buttons for manipulating the app later (close app, minimize/maximize etc.)
+ */
export default function TabBar() {
const { state: tabState, dispatch } = useContext(TabContext);
const { activeTabID, displayTabs, tabs } = tabState;
diff --git a/app/components/tabs/TabMenu.tsx b/app/components/tabs/TabMenu.tsx
index 4789fae444b3fa5f9061fdbcab0df89746996f7c..73fa0b6ff1f7aaac3ddafbc440778f00ffd16e18 100644
--- a/app/components/tabs/TabMenu.tsx
+++ b/app/components/tabs/TabMenu.tsx
@@ -24,6 +24,10 @@ interface TabMenuProps {
active: boolean;
}
+/**
+ * A menu that is displayed when clicking the options button on a tab
+ * @param props The id, label and active status of the tab this menu opens for
+ */
export default function TabMenu(props: TabMenuProps) {
const { id, label, active } = props;
diff --git a/app/containers/Dashboard.tsx b/app/containers/Dashboard.tsx
index 4c2ff08d0b78d8b060ca8b2dcb07f7529da78b62..91fb831b7ee94b853312193912ee530792578cb6 100644
--- a/app/containers/Dashboard.tsx
+++ b/app/containers/Dashboard.tsx
@@ -33,6 +33,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * The main part of the app, allowing users to record queries and view and manipulate recordings
+ */
export default function Dashboard() {
const { dispatch } = useContext(TabContext);
const globalSnackbarContext = useContext(GlobalSnackbarContext);
@@ -70,7 +73,6 @@ export default function Dashboard() {
isSaved: false,
query,
elapsed: totalTime || elapsed || -1,
- top3Memory: result?.top3Memory,
};
let formattedLabel;
formattedLabel = error ? 'Error' : '';
diff --git a/app/containers/LoginScreen.tsx b/app/containers/LoginScreen.tsx
index 31150ebda17c4b5ee98ce6ca4331f70d40754c0b..588edb9bb8319cbba52419b98f4ae3edf7c5b1b7 100644
--- a/app/containers/LoginScreen.tsx
+++ b/app/containers/LoginScreen.tsx
@@ -23,6 +23,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * The welcome screen prompting the user to log in to a database. Loads the recent login details for prefill
+ */
export default function LoginScreen() {
const [loading, setLoading] = useState(true);
diff --git a/app/containers/ResultView.tsx b/app/containers/ResultView.tsx
index 13870e9d3cd12b68a80f18d2c7254f792fa60afc..a343a1868c84e1ec43815bd3ec2fc10d51f779c4 100644
--- a/app/containers/ResultView.tsx
+++ b/app/containers/ResultView.tsx
@@ -31,6 +31,9 @@ const useStyles = makeStyles((theme) => ({
},
}));
+/**
+ * The results from a recording. The user can toggle what to be shown. Its state is not exclusive to each tab
+ */
export default function ResultView() {
const [showMemoryChart, setShowMemoryChart] = useState(true);
const [showOptimizerTrace, setShowOptimizerTrace] = useState(true);
diff --git a/app/containers/TabContainer.tsx b/app/containers/TabContainer.tsx
index 1b7b5a6e38df2b7c4eda83fd384f69806bd19d8e..d77e4add96fe36e1d3830e443170f440bd1f4de1 100644
--- a/app/containers/TabContainer.tsx
+++ b/app/containers/TabContainer.tsx
@@ -1,6 +1,5 @@
import React, { useContext, useEffect } from 'react';
import { Switch, Route, useLocation, useHistory } from 'react-router-dom';
-import { LoginDetailsProvider } from '../context/LoginDetailsContext';
import routes from '../routes';
import LoginScreen from './LoginScreen';
import Dashboard from './Dashboard';
@@ -9,6 +8,9 @@ import { TabContext } from '../context/TabContext';
import { GlobalSnackbarProvider } from '../context/GlobalSnackbarContext';
import GlobalSnackbar from '../components/dashboard/GlobalSnackbar';
+/**
+ * The container for all the tabs and the active tab content
+ */
export default function TabContainer() {
const { state: tabState } = useContext(TabContext);
const { activeTabID, manager } = tabState;
@@ -36,17 +38,15 @@ export default function TabContainer() {
return (
<GlobalSnackbarProvider>
<GlobalSnackbar />
- <LoginDetailsProvider>
- <TabBar />
- <Switch>
- <Route exact path={routes.login}>
- <LoginScreen />
- </Route>
- <Route path={routes.dashboard}>
- <Dashboard />
- </Route>
- </Switch>
- </LoginDetailsProvider>
+ <TabBar />
+ <Switch>
+ <Route exact path={routes.login}>
+ <LoginScreen />
+ </Route>
+ <Route path={routes.dashboard}>
+ <Dashboard />
+ </Route>
+ </Switch>
</GlobalSnackbarProvider>
);
}
diff --git a/app/context/GlobalSnackbarContext.tsx b/app/context/GlobalSnackbarContext.tsx
index eebe28af4819b34d04815279c1ccb8113a60a990..8adf2abb6800d944e7ad5b3ccb77d4a210019c1b 100644
--- a/app/context/GlobalSnackbarContext.tsx
+++ b/app/context/GlobalSnackbarContext.tsx
@@ -15,6 +15,12 @@ type ContextType = {
setPopupOpen: (open: boolean) => void;
};
+/**
+ * Contains the state necessary for a global snackbar
+ * @property popupMessage: The message to be displayed
+ * @property popupSeverity: The severity of the message, affecting the appearance of the snackbar. Info is blue, warning is yellow, error is red, success is green
+ * @property popupOpen: Whether to have the snackbar open
+ */
export const GlobalSnackbarContext = createContext<ContextType | undefined>(
undefined
);
diff --git a/app/context/LoginDetailsContext.tsx b/app/context/LoginDetailsContext.tsx
deleted file mode 100644
index 3ea437997ad865f08956c4ebedc4ca2049566f6d..0000000000000000000000000000000000000000
--- a/app/context/LoginDetailsContext.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useState, createContext } from 'react';
-import { LoginDetails } from '../backend/types/LoginDetails';
-
-type ChildrenType = {
- children: React.ReactNode;
-};
-
-type ContextType = {
- loginDetails?: LoginDetails;
- setLoginDetails: (value: LoginDetails | undefined) => void;
-};
-
-export const LoginDetailsContext = createContext<ContextType | undefined>(
- undefined
-);
-
-export const LoginDetailsProvider = ({ children }: ChildrenType) => {
- const [loginDetails, setLoginDetails] = useState<LoginDetails>();
-
- return (
- <LoginDetailsContext.Provider
- value={{
- loginDetails,
- setLoginDetails,
- }}
- >
- {children}
- </LoginDetailsContext.Provider>
- );
-};
diff --git a/app/context/MemoryPerformanceContext.tsx b/app/context/MemoryPerformanceContext.tsx
index eeac8aba31e4d2b8b05ec714b6b94e0b49d02945..1c03c5ba9cc5b44c8b564e9bd6600e8e1c9f86b8 100644
--- a/app/context/MemoryPerformanceContext.tsx
+++ b/app/context/MemoryPerformanceContext.tsx
@@ -23,6 +23,17 @@ type ContextType = {
setFilteredStages: (value: Array<string>) => void;
};
+/**
+ * The context for the memory performance component.
+ * @property disabled: The disabled events
+ * @property validStages: The stages to display
+ * @property openEvent: Whether to open the dialog for editing what events to show
+ * @property openStage: Whether to open the dialog for editing what stages to show
+ * @property eventsChecked: What events are checked in the dialog to be shown
+ * @property stagesChecked: What stages are checked in the dialog to be shown
+ * @property filteredEvents: The events to be shown in the dialog after a search
+ * @property filteredStages: The stages to be shown in the dialog after a search
+ */
export const MemoryPerformanceContext = createContext<ContextType | undefined>(
undefined
);
diff --git a/app/context/TabContext.tsx b/app/context/TabContext.tsx
index ca8908e34135058985cb9d10535de931147e6457..56bf1500d62089beb536090b2cf3728bb5635662 100644
--- a/app/context/TabContext.tsx
+++ b/app/context/TabContext.tsx
@@ -441,6 +441,14 @@ const tabReducer = (tabState: TabState, action: TabAction): TabState => {
}
};
+/**
+ * The context for all the tabs.
+ * @property activeTabID: string; The uuid of the active tab
+ * @property createdTabs: number; The number of tabs created thus far
+ * @property tabs: { [key: string]: Tab }; A dictionary of all the tabs. Each tab contains all the state necessary for a tab, including recordings, queryrecorder state, and login details
+ * @property displayTabs: { [key: string]: DisplayTab }; A dictionary of the tab information needed to display the tabs at the top of the app
+ * @property manager: SqlManager; The SqlManager. It's easier to keep it here than to get it through SqlManagerSingleton every time
+ */
export const TabContext = createContext<{
state: TabState;
dispatch: React.Dispatch<TabAction>;
diff --git a/app/index.tsx b/app/index.tsx
index b48c13c5ad4dfe755891a57cee31e9429a79fda0..8adf7bdf1c31700c4661878c3ec373ed4f7a79cd 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -3,6 +3,9 @@ import { render } from 'react-dom';
import './app.global.css';
import App from './App';
+/**
+ * Where the actual rendering of the app happens
+ */
document.addEventListener('DOMContentLoaded', () => {
render(<App />, document.getElementById('root'));
});
diff --git a/app/menu.ts b/app/menu.ts
index ecdf1a15fb5164b91d65681652226e57c5e6f8a6..20b0d69c7d5f301881c80e4407d95c170d693254 100644
--- a/app/menu.ts
+++ b/app/menu.ts
@@ -6,7 +6,7 @@ import {
MenuItemConstructorOptions,
} from 'electron';
-// TODO: This defines the menu at the top of the app window.
+// This defines the menu at the top of the app window.
// Remove the options we don't need.
interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
diff --git a/app/package.json b/app/package.json
index 96445a063614d84b658d8e45d04b95c06139a663..1a8b3fee1a4cd0a104dd355f5e5c712c2818613b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
{
"name": "mysql-query-profiler",
"productName": "MySQL Query Profiler",
- "version": "1.0.1",
+ "version": "1.0.2",
"description": "A profiler for MySQL queries using Electron and React",
"main": "./main.prod.js",
"author": {