[Ivette] doc callgraph correction

ivette/src/dome/renderer/controls/displays.tsx

@@ -62,12 +62,16 @@ export function LCD(props: LabelProps): JSX.Element {
 // --- Led
 // --------------------------------------------------------------------------
 
-export const LEDStatusList = [
+const LEDStatusList = [
   'active', 'inactive', 'positive', 'negative', 'warning'
 ] as const;
 
 export type LEDstatus = typeof LEDStatusList[number] | undefined;
 
+export function jLEDstatus(js : string) : LEDstatus | undefined {
+  return LEDStatusList.find(elt => elt === js);
+}
+
 export interface LEDprops {
   /**
      Led status:

ivette/src/dome/renderer/controls/icons.tsx

@@ -95,12 +95,16 @@ export function SVG(props: SVGprops): null | JSX.Element {
 // --- Icon Component
 // --------------------------------------------------------------------------
 
-export const iconKindList = [
+const iconKindList = [
   'disabled', 'selected', 'positive', 'negative', 'warning', 'default'
 ] as const;
 
 export type IconKind = typeof iconKindList[number]
 
+export function jIconKind(js : string) : IconKind | undefined {
+  return iconKindList.find(elt => elt === js);
+}
+
 /** Icon Component Properties */
 export interface IconProps extends SVGprops {
   /** Additional class name(s). */

ivette/src/dome/renderer/text/markdown.tsx

@@ -26,36 +26,56 @@ import remarkCustomHeaderId from 'remark-custom-header-id';
 
 import * as Themes from 'dome/themes';
 import { classes } from 'dome/misc/utils';
-import { Icon, iconKindList } from 'dome/controls/icons';
+import { Icon, jIconKind } from 'dome/controls/icons';
 import {
   CodeBlock, atomOneDark, atomOneLight
 } from "react-code-blocks";
-import { LED, LEDStatusList } from 'dome/controls/displays';
+import { jLEDstatus, LED } from 'dome/controls/displays';
 
 export interface Pattern {
   pattern: RegExp,
   replace: (key: number, match?: RegExpExecArray) => JSX.Element | null
 }
 
+/**
+ * iconTag allows you to replace the tag with an icon.
+ *
+ * The associated regex is `/(\[ex:\])?(\[icon-([^-\]]+)(-([^\]]+))?\])/g`.
+ *
+ * * first capture `[ex:]` (option): allows to write the second group without
+ * applying a replacement if exist
+ * * second capture : represents the icon with `ID` and `kind | color`
+ *   * capture 3 : the icon Id
+ *   * capture 4-5 (option): the kind or color of the icon
+ *
+ * Exemple :
+ * `[icon-TUNINGS-#FF0000]` this tag will be replaced by a red TUNINGS icon
+ */
 export const iconTag: Pattern = {
-  pattern: /(\[ex:\])?\[icon-([^-\]]+)(-([^\]]+))?\]/g,
+  pattern: /(\[ex:\])?(\[icon-([^-\]]+)(-([^\]]+))?\])/g,
   replace: (key: number, match?: RegExpExecArray) => {
     if(!match) return null;
-    const id = match[2];
-    const kind = iconKindList.find(elt => elt === match[4]);
-    const color = !kind ? match[4] : undefined;
+    const id = match[3];
+    const kind = jIconKind(match[5]);
+    const color = !kind ? match[5] : undefined;
     if(match[1] === "[ex:]") {
-      return <span key={key}>{`[icon-${id}-${match[4]}]`}</span>;
+      return <span key={key}>{match[2]}</span>;
     }
     return <Icon key={key} id={id} kind={kind} fill={color}/>;
   }
 };
 
+/**
+ * ledTag allows you to replace the tag with an LED.
+ * The associated regex is `/\[led-([^\]]+)\]/g`.
+ *
+ * The capture `([^\]]+)` represents the LEDStatus.
+ */
 export const ledTag: Pattern = {
   pattern: /\[led-([^\]]+)\]/g,
   replace: (key: number, match?: RegExpExecArray) => {
     if(!match) return null;
-    const status = LEDStatusList.find(elt => elt === match[1]);
+    const status = jLEDstatus(match[1]);
     return <LED key={key} status={status} />;
   }
 };
@@ -67,6 +87,10 @@ export const ledTag: Pattern = {
 /**
  * Replace all tag in children.
  * This function doesn't replace any tags added by a previous replacement.
+ *
+ * Patterns added to the table will be processed to make replacements
+ * in the markdown file. Markdown component provides two patterns,
+ * iconTag and ledTag
  */
 function replaceTags(
   children: React.ReactNode,

ivette/src/frama-c/plugins/plugins.md → ivette/src/frama-c/plugins/callgraph/callgraph.md

-# Plugins {#plugins}
-
-## Callgraph {#plugins-callgraph}
+# Callgraph {#callgraph}
 
 This module provides a graphical display of the callgraph and makes it easy to highlight certain data, such as :
 
@@ -21,7 +19,7 @@ Below is a list of shortcuts:
 
 This component is divided into 4 parts, the [titlebar](#plugins-callgraph-titlebar), the [toolbar](#plugins-callgraph-toolbar), a [panel](#plugins-callgraph-panel) and a [graph](#plugins-callgraph-graph).
 
-### Titlebar {#plugins-callgraph-titlebar}
+### Titlebar {#callgraph-titlebar}
 
 The titlebar contains the name of the module on the left and the following buttons on the right:
 
@@ -30,7 +28,7 @@ The titlebar contains the name of the module on the left and the following butto
 * [icon-PIN] : Automatically select node of the function selected in AST.
 * [icon-HELP] : show this help modal.
 
-### Toolbar {#plugins-callgraph-toolbar}
+##Toolbar {#plugins-callgraph-toolbar}
 
 The toolbar contains display and selection parameters on the left and graph management parameters on the right.
 On the far right is the button for opening the side panel.
@@ -46,14 +44,14 @@ On the right:
 * Horizontal and vertical distance management between graph nodes.
 * [icon-SIDEBAR] : Opens or closes the side panel.
 
-### Panel {#plugins-callgraph-panel}
+## Panel {#callgraph-panel}
 
 The panel displays additional information about the graph in general and about the properties of the selected nodes.
 The filters above the list can be used to limit the amount of information, and are synchronised with the filters in the `Properties` component.
 
 At the top right, 2 buttons allow you to change the side of the panel and close it.
 
-### Graph {#plugins-callgraph-graph}
+## Graph {#callgraph-graph}
 
 The graph is in 3D but is displayed as a tree. This type of display prevents cycles from appearing in the graph.
 
@@ -62,7 +60,7 @@ If a cycle is detected :
 * In the case of a recursive function: The link is deleted and the [icon-REDO-orange] icon is added to the node.
 * In the case of a cycle on several functions: The cycles will be pre-selected and will appear in the selection button.
 
-#### Nodes
+### Nodes
 
 The nodes display the name of the function and the following elements:
 
@@ -71,7 +69,7 @@ The nodes display the name of the function and the following elements:
 * [icon-REDO-orange] : The function is recursive.
 * [icon-DROP.FILLED-#882288][icon-DROP.FILLED-#73BBBB]: The function contains tainted properties.
 
-#### Edges
+### Edges
 
 The edges are oriented and can take on different colours depending on the nodes selected.
 

ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx

@@ -28,7 +28,7 @@ import * as Dome from 'dome';
 import { IconButton } from 'dome/controls/buttons';
 import { Button, Inset } from 'dome/frame/toolbars';
 import { HelpIcon } from 'dome/help';
-import docPlugins from '../../plugins.md?raw';
+import docCallgraph from '../callgraph.md?raw';
 import { DocShowNodesButton } from './toolbar';
 import { ledTag, iconTag } from 'dome/text/markdown';
 
@@ -86,10 +86,10 @@ export function CallgraphTitleBar(props: CallgraphTitleBarProps): JSX.Element {
       />
       <Inset />
       <HelpIcon
-        label='Plugins - Callgraph'
-        scrollTo={'plugins-callgraph'}
+        label='Callgraph'
+        scrollTo={'callgraph'}
         patterns={[iconTag, ledTag, selectBtnTag, TSButtonTag]}
-      >{ docPlugins }</HelpIcon>
+      >{ docCallgraph }</HelpIcon>
       <Inset />
     </Ivette.TitleBar>
   );

ivette/src/sandbox/sandbox.md

@@ -101,6 +101,7 @@ You can used patterns to replace parts of the text by JSX Element.
 There is one basic pattern to replace tags by an `Icon`, it name `iconTag`  in markdown component .
 
 * [icon-TUNINGS] : [ex:][icon-TUNINGS]
+* [icon-TUNINGS-#ff0000] : [ex:][icon-TUNINGS-#ff0000]
 * [icon-TARGET] : [ex:][icon-TARGET]
 * [icon-PIN] : [ex:][icon-PIN]