From 1bb3f0440b7bf113fdcde7b4da71cd7448381da9 Mon Sep 17 00:00:00 2001
From: Eddy Meals <edimea211@gmail.com>
Date: Fri, 29 Nov 2024 11:50:25 -0800
Subject: [PATCH] Add tooltip doc for Robot.get_value as POC

Add Robot.get_value doc as proof of concept. Text was pulled from api.md
in the runtime repo. Styling still needed.
Add HighlightedCode which wraps an AceEditor with appropriate
configuration to be a highlighted read-only code block.

The doc stuff will eventually have to live in its own directory
somewhere if it's going to be reused. The API help window could probably
just sort apiHelpComponents by key and concat them.
---
 src/renderer/editor/HighlightedCode.css   | 12 ++++++++
 src/renderer/editor/HighlightedCode.tsx   | 36 ++++++++++++++++++++++
 src/renderer/editor/addEditorTooltips.tsx | 37 ++++++++++++++++++++++-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/editor/HighlightedCode.css
 create mode 100644 src/renderer/editor/HighlightedCode.tsx

diff --git a/src/renderer/editor/HighlightedCode.css b/src/renderer/editor/HighlightedCode.css
new file mode 100644
index 0000000..f6b4242
--- /dev/null
+++ b/src/renderer/editor/HighlightedCode.css
@@ -0,0 +1,12 @@
+.HighlightedCode-editor .ace_scroller {
+  width: 100%;
+}
+.HighlightedCode-editor .ace_cursor {
+  opacity: 0;
+}
+.HighlightedCode-editor .ace_marker-layer {
+  display: none;
+}
+.HighlightedCode-editor .ace_print-margin {
+  display: none;
+}
diff --git a/src/renderer/editor/HighlightedCode.tsx b/src/renderer/editor/HighlightedCode.tsx
new file mode 100644
index 0000000..2913bd3
--- /dev/null
+++ b/src/renderer/editor/HighlightedCode.tsx
@@ -0,0 +1,36 @@
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-python';
+import './HighlightedCode.css';
+
+export default function HighlightedCode({
+  children,
+  indent = 0,
+}: {
+  children: string;
+  indent: number?;
+}) {
+  const lines = children.split('\n');
+  if (lines.length && !lines[0].trim()) {
+    lines.shift();
+  }
+  if (lines.length && !lines[lines.length - 1].trim()) {
+    lines.pop();
+  }
+  // Remove common indent
+  const minIndent = Math.min(...lines
+    .filter(line => line.trim().length)
+    .map(line => line.match(/^ */)[0].length)
+  );
+  const formatted = lines.map(line => ' '.repeat(indent) + line.slice(minIndent)).join('\n');
+  return (
+    <AceEditor
+      value={formatted}
+      className="HighlightedCode-editor"
+      readOnly={true}
+      showGutter={false}
+      style={{ width: '100%' }}
+      mode="python"
+      maxLines={Infinity}
+    />
+  );
+}
diff --git a/src/renderer/editor/addEditorTooltips.tsx b/src/renderer/editor/addEditorTooltips.tsx
index bdff74a..0a76f88 100644
--- a/src/renderer/editor/addEditorTooltips.tsx
+++ b/src/renderer/editor/addEditorTooltips.tsx
@@ -1,6 +1,7 @@
 import { Ace, require as acequire } from 'ace-builds';
 import { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
+import HighlightedCode from './HighlightedCode';
 import readApiCall from './readApiCall';
 
 const { HoverTooltip } = acequire('ace/tooltip');
@@ -8,7 +9,41 @@ const { HoverTooltip } = acequire('ace/tooltip');
 const apiHelpComponents: {
   [matchText: string]: () => ReactNode;
 } = {
-  'Robot.get_value': () => <div>Documentation for Robot.get_value method.</div>,
+  'Robot.get_value': () => <div>
+    The <code>get_value</code> function returns the current value of a
+    specified <code>param</code> on a device with the specified <code>device_id</code>.
+    <br />
+    Parameters:
+    <ul className="parameter-list">
+      <li>
+        <code className="parameter-name">device_id</code>: the ID that specifies which PiE device
+        will be read
+      </li>
+      <li>
+        <code className="parameter-name">param</code>: identifies which parameter on the specified
+        PiE device will be read. Possible param values depend on the specified device. Find a list of
+        params for each type of device on the <a href="javascript:;">lowcar devices</a> page.
+      </li>
+    </ul>
+    The function is useful for checking the current state of devices. For example, getting the
+    current state of a limit switch using its <code>device_id</code> and
+    the <code>param</code> "switch0" will return True when pressed down and False if not.
+    <HighlightedCode>{`
+      # First segment of code ran in the teleop process
+      limit_switch = "//INSERT SWITCH ID HERE//"
+
+      def teleop_setup():
+        print("Tele-operated mode has started!")
+
+      def teleop_main():
+        # Example code for getting the value of a limit switch
+        #   First parameter is the limit switch's id
+        #   Second parameter tells which switch to get the value from
+        # In this case the method will return True or False depending on if the switch is pressed down or not
+
+        Robot.get_value(limit_switch, switch0)
+    `}</HighlightedCode>
+  </div>,
   Robot: () => <div>Documentation for Robot object.</div>,
 };