From e1553a451d234daca9aaa3a4feb850141422b8b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Thu, 16 Jul 2020 15:11:20 +0200
Subject: [PATCH] [dome] fixed synchronized array API
---
ivette/src/dome/src/renderer/table/models.ts | 16 +++++++---
ivette/src/frama-c/states.ts | 32 ++++++--------------
ivette/src/renderer/ASTview.tsx | 2 +-
ivette/src/renderer/Globals.tsx | 2 +-
ivette/src/renderer/Properties.tsx | 2 +-
5 files changed, 23 insertions(+), 31 deletions(-)
diff --git a/ivette/src/dome/src/renderer/table/models.ts b/ivette/src/dome/src/renderer/table/models.ts
index c34b2608578..0717180890e 100644
--- a/ivette/src/dome/src/renderer/table/models.ts
+++ b/ivette/src/dome/src/renderer/table/models.ts
@@ -235,15 +235,21 @@ export abstract class Model<Key, Row> {
// --------------------------------------------------------------------------
/**
- For a component to re-render on any updates and reloads.
- The returned number can be used to memoise effects and callbacks.
+ Make the component to synchronize with the model and re-render on
+ every updates.
+ @param sync - whether to synchronize on model updates or not, `true`
+ by default.
+ @return a number that can be used to memoize other effects
*/
-export function useModel(model: Model<any, any>): number {
+export function useModel(model: Model<any, any>, sync = true): number {
const [age, setAge] = React.useState(0);
React.useEffect(() => {
- const w = model.link(() => setImmediate(() => setAge(age + 1)));
- return w.unlink;
+ if (sync) {
+ const w = model.link(() => setImmediate(() => setAge(age + 1)));
+ return w.unlink;
+ }
+ return undefined;
});
return age;
}
diff --git a/ivette/src/frama-c/states.ts b/ivette/src/frama-c/states.ts
index 72dc636bbeb..5f5715e562f 100644
--- a/ivette/src/frama-c/states.ts
+++ b/ivette/src/frama-c/states.ts
@@ -422,37 +422,23 @@ export function reloadArray<K, A>(arr: Array<K, A>) {
/**
Use Synchronized Array (Custom React Hook).
- This React Hook is _not_ responsive to model updates, it only
- returns the array model.
- To listen to array updates, use `Models.useModel(model)` or `useSyncArray()`.
- Array views automatically listen to model updates.
- */
-export function useSyncModel<K, A>(
- arr: Array<K, A>,
-): CompactModel<K, A> {
- Dome.useUpdate(PROJECT);
- const st = getSyncArray(arr);
- React.useEffect(st.update);
- Server.useSignal(arr.signal, st.fetch);
- return st.model;
-}
-/**
- Use Synchronized Array (Custom React Hook).
- This React Hook is _not_ responsive to model updates, it only
- returns the array model.
- To listen to array updates, use `Models.useModel(model)` or `useSyncArray()`.
- Array views automatically listen to model updates.
+ Unless specified, the hook makes the component re-rendering on every
+ updates. Disabling this automatic re-renderer can be an option when
+ you only use the model to make a table view,
+ which automatically synchronizes on model updates.
+ @param sync - whether the component re-render on updates (default is `true`)
*/
export function useSyncArray<K, A>(
arr: Array<K, A>,
-): A[] {
+ sync = true,
+): CompactModel<K, A> {
Dome.useUpdate(PROJECT);
const st = getSyncArray(arr);
React.useEffect(st.update);
Server.useSignal(arr.signal, st.fetch);
- useModel(st.model);
- return st.model.getArray();
+ useModel(st.model, sync);
+ return st.model;
}
// --------------------------------------------------------------------------
diff --git a/ivette/src/renderer/ASTview.tsx b/ivette/src/renderer/ASTview.tsx
index ff2b3d97d47..f97145728dc 100644
--- a/ivette/src/renderer/ASTview.tsx
+++ b/ivette/src/renderer/ASTview.tsx
@@ -92,7 +92,7 @@ const ASTview = () => {
const [theme, setTheme] = Dome.useGlobalSetting('ASTview.theme', 'default');
const [fontSize, setFontSize] = Dome.useGlobalSetting('ASTview.fontSize', 12);
const [wrapText, setWrapText] = Dome.useSwitch('ASTview.wrapText', false);
- const markersInfo = States.useSyncArray(markerInfo);
+ const markersInfo = States.useSyncArray(markerInfo).getArray();
const theFunction = selection?.current?.function;
const theMarker = selection?.current?.marker;
diff --git a/ivette/src/renderer/Globals.tsx b/ivette/src/renderer/Globals.tsx
index edc8a40d566..a37d1e5b6b9 100644
--- a/ivette/src/renderer/Globals.tsx
+++ b/ivette/src/renderer/Globals.tsx
@@ -16,7 +16,7 @@ export default () => {
// Hooks
const [selection, updateSelection] = States.useSelection();
- const fcts = States.useSyncArray(functions).sort(
+ const fcts = States.useSyncArray(functions).getArray().sort(
(f, g) => alpha(f.name, g.name),
);
diff --git a/ivette/src/renderer/Properties.tsx b/ivette/src/renderer/Properties.tsx
index 22acbafdf64..341091ddd03 100644
--- a/ivette/src/renderer/Properties.tsx
+++ b/ivette/src/renderer/Properties.tsx
@@ -431,7 +431,7 @@ function FilterRatio({ model }: { model: PropertyModel }) {
const RenderTable = () => {
// Hooks
const model = React.useMemo(() => new PropertyModel(), []);
- const data = States.useSyncArray(Properties.status);
+ const data = States.useSyncArray(Properties.status).getArray();
useEffect(() => {
model.removeAllData();
model.updateData(data);
--
GitLab