diff --git a/ivette/src/dome/src/renderer/table/models.ts b/ivette/src/dome/src/renderer/table/models.ts index c34b260857850e4f456dceff0c0ff562813a8a28..0717180890e3c193eb320ce0c90437a30a7d035d 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 72dc636bbeb467e7d156457495eb61d94a8fba75..5f5715e562f8b727939a36829e36ce40da2de47e 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 ff2b3d97d473999cd9f6c85a31fdb1524f12ce16..f97145728dc4ddb26db0f447df3a9c93aecd843a 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 edc8a40d566418f9a37dbee6f896187dbf07dd02..a37d1e5b6b9ef61d0136eb07120c2f0966b2033d 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 22acbafdf641891b0c6c7adb7a0ccfd6ca5a2880..341091ddd0367bb843a06a26ebf8d043bb84069d 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);