fix vue example with new types

qAison · Aug 3, 2023 · 6a0fae1 · 6a0fae1
1 parent 8a5ba3c
commit 6a0fae1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/examples/vue/src/components/MoleculeStructure.vue b/examples/vue/src/components/MoleculeStructure.vue
@@ -93,7 +93,7 @@ let svg = ref("");
 /**
  * Validate the molecule
  */
-function isValid(m: JSMol) {
+function isValid(m: JSMol | null) {
   return !!m;
 }
 
@@ -111,10 +111,10 @@ function isValidMolString(s: string) {
 /**
  * Get highlight details for molecule
  */
-function getMolDetails(mol: JSMol, qmol: JSMol) {
+function getMolDetails(mol: JSMol | null, qmol: JSMol | null) {
   if (isValid(mol) && isValid(qmol)) {
     // get substructure highlight details
-    const details = JSON.parse(mol.get_substruct_matches(qmol));
+    const details = JSON.parse(mol?.get_substruct_matches(qmol as JSMol) || "");
     // reduce the list of objects to a single list object with all atoms and bonds
     const detailsMerged: { atoms: number[]; bonds: number[] } = details
       ? details.reduce(
@@ -152,12 +152,12 @@ async function drawSVGorCanvas() {
   const isValidMol = isValid(mol);
 
   if (props.svgMode && isValidMol) {
-    const svgGenerated = mol.get_svg_with_highlights(getMolDetails(mol, qmol));
+    const svgGenerated = (mol as JSMol).get_svg_with_highlights(getMolDetails(mol, qmol));
     svg.value = svgGenerated;
   } else if (isValidMol) {
     await nextTick(); // function needs to wait until canvas is rendered
     const canvas = document.getElementById(props.id) as HTMLCanvasElement;
-    mol.draw_to_canvas_with_highlights(canvas, getMolDetails(mol, qmol));
+    (mol as JSMol).draw_to_canvas_with_highlights(canvas, getMolDetails(mol, qmol));
   }
 
   /**

diff --git a/examples/vue/src/components/examples/ExampleSubstructureSearch.vue b/examples/vue/src/components/examples/ExampleSubstructureSearch.vue
@@ -50,6 +50,7 @@ import MoleculeStructure from "../MoleculeStructure.vue";
 import { SMILES_LIST } from "../../utils/smiles";
 import { reactive, ref, watch } from "vue";
 import debounce from "debounce";
+import { JSMol } from "../../../../../typescript";
 
 let searching = ref(false);
 let searchValue = ref("");
@@ -73,14 +74,27 @@ function performSearch() {
   }
 
   const qmol = window.RDKit.get_qmol(searchValue.value);
+  let results: string[] = [];
+  if (!!qmol) {
+    // if the query is a valid SMARTS, we can use the substructure search
+    const results = SMILES_LIST.filter((smiles: string) => {
+      // only return those from the list that match the query
+      const mol = window.RDKit.get_mol(smiles);
+      const hasMatch = !!mol && mol.get_substruct_match(qmol).length > 0;
+      mol?.delete();
+      return hasMatch;
+    });
 
-  const results = SMILES_LIST.filter((smiles: string) => {
-    // only return those from the list that match the query
-    const mol = window.RDKit.get_mol(smiles);
-    const hasMatch = mol.get_substruct_match(qmol).length > noMatchLength;
-    mol?.delete();
-    return hasMatch;
-  });
+    qmol?.delete();
+
+    // replace search results
+    updateMatches(results);
+
+    // finish search
+    searching.value = false;
+  } else {
+    results = []
+  }
 
   qmol?.delete();
 

diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "moduleResolution": "Node",
-    "strict": true,
+    "strict": false,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,