#3019 - Rerender template previews after options have changed

epam · Aug 11, 2023 · d6eaec0 · d6eaec0
1 parent efbfc72
commit d6eaec0
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/packages/ketcher-core/src/application/render/renderStruct.ts b/packages/ketcher-core/src/application/render/renderStruct.ts
@@ -26,25 +26,35 @@ export class RenderStruct {
     el: HTMLElement | null,
     struct: Struct | null,
     options: any = {},
+    invalidateCache = false,
   ) {
     if (el && struct) {
       const { cachePrefix = '', needCache = true } = options;
       const cacheKey = `${cachePrefix}${struct.name}`;
+
+      if (invalidateCache) {
+        renderCache.clear();
+      }
+
       if (renderCache.has(cacheKey) && needCache) {
         el.innerHTML = renderCache.get(cacheKey);
         return;
       }
+
       const preparedStruct = this.prepareStruct(struct);
       preparedStruct.initHalfBonds();
       preparedStruct.initNeighbors();
       preparedStruct.setImplicitHydrogen();
       preparedStruct.markFragments();
+
       const rnd = new Render(el, {
         autoScale: true,
         ...options,
       });
+
       preparedStruct.rescale();
       rnd.setMolecule(preparedStruct);
+
       if (needCache) {
         renderCache.set(cacheKey, rnd.clientArea.innerHTML);
       }

diff --git a/packages/ketcher-react/src/components/StructRender/StructRender.tsx b/packages/ketcher-react/src/components/StructRender/StructRender.tsx
@@ -31,7 +31,12 @@ const normalizeStruct = (molV2000StringOrStruct: string | Struct) => {
   }
 };
 
-const StructRender = ({ struct, options, className }: IStructRenderProps) => {
+const StructRender = ({
+  struct,
+  options,
+  className,
+  invalidateCache,
+}: IStructRenderProps) => {
   const renderRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,9 +45,14 @@ const StructRender = ({ struct, options, className }: IStructRenderProps) => {
     if (container) {
       container.innerHTML = '';
       const normalizedStruct = normalizeStruct(struct);
-      RenderStruct.render(container, normalizedStruct, options);
+      RenderStruct.render(
+        container,
+        normalizedStruct,
+        options,
+        invalidateCache,
+      );
     }
-  }, [struct, options]);
+  }, [struct, options, invalidateCache]);
 
   return <Container ref={renderRef} className={className}></Container>;
 };

diff --git a/packages/ketcher-react/src/components/StructRender/types.ts b/packages/ketcher-react/src/components/StructRender/types.ts
@@ -21,4 +21,5 @@ export interface IStructRenderProps {
   struct: Struct;
   options?: RenderOptions & { cachePrefix?: string; needCache?: boolean };
   className?: string;
+  invalidateCache?: boolean;
 }
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
@@ -19,6 +19,7 @@ import { Struct } from 'ketcher-core';
 import classes from './TemplateTable.module.less';
 import { greekify } from '../../utils';
 import { Icon, StructRender } from 'components';
+import { isEqual } from 'lodash';
 
 export interface Template {
   struct: Struct;
@@ -63,6 +64,8 @@ function tmplName(tmpl: Template, i: number): string {
   return tmpl.struct.name || `${tmpl.props.group} template ${i + 1}`;
 }
 
+let previousRenderOptions: any;
+
 const TemplateTable: FC<TemplateTableProps> = (props) => {
   const {
     templates,
@@ -81,6 +84,12 @@ const TemplateTable: FC<TemplateTableProps> = (props) => {
       }`}
     >
       {templates.map((tmpl, i) => {
+        let invalidateRenderCache = false;
+        if (!isEqual(previousRenderOptions, renderOptions)) {
+          previousRenderOptions = renderOptions;
+          invalidateRenderCache = true;
+        }
+
         return (
           <div
             className={
@@ -105,6 +114,7 @@ const TemplateTable: FC<TemplateTableProps> = (props) => {
                 cachePrefix: 'templates',
                 downScale: true,
               }}
+              invalidateCache={invalidateRenderCache}
             />
             <div
               className={`${classes.structTitle} ${