diff --git a/tools/winscope/src/DataInput.vue b/tools/winscope/src/DataInput.vue
index c4f1cf082..53dda6cbc 100644
--- a/tools/winscope/src/DataInput.vue
+++ b/tools/winscope/src/DataInput.vue
@@ -128,6 +128,7 @@ import {
   UndetectableFileType,
 } from './decode.js';
 import {WebContentScriptMessageType} from './utils/consts';
+import {combineWmSfWithImeDataIfExisting} from './ime_processing.js';
 
 export default {
   name: 'datainput',
@@ -392,6 +393,10 @@ export default {
       if (tmpTraceName !== undefined) {
         this.traceName = tmpTraceName;
       }
+
+      if (this.store.betaFeatures.newImePanels) {
+        combineWmSfWithImeDataIfExisting(this.dataFiles);
+      }
     },
 
     getFileNameWithoutZipExtension(file) {
diff --git a/tools/winscope/src/TraceView.vue b/tools/winscope/src/TraceView.vue
index 498a8352f..4c36466a8 100644
--- a/tools/winscope/src/TraceView.vue
+++ b/tools/winscope/src/TraceView.vue
@@ -160,7 +160,7 @@ import PropertiesTableView from './PropertiesTableView';
 import {ObjectTransformer} from './transform.js';
 import {DiffGenerator, defaultModifiedCheck} from './utils/diff.js';
 import {TRACE_TYPES, DUMP_TYPES} from './decode.js';
-import {isPropertyMatch, stableIdCompatibilityFixup} from './utils/utils.js';
+import {isPropertyMatch, stableIdCompatibilityFixup, getFilter} from './utils/utils.js';
 import {CompatibleFeatures} from './utils/compatibility.js';
 import {getPropertiesForDisplay} from './flickerlib/mixin';
 import ObjectFormatter from './flickerlib/ObjectFormatter';
@@ -476,27 +476,6 @@ export default {
   },
 };
 
-function getFilter(filterString) {
-  const filterStrings = filterString.split(',');
-  const positive = [];
-  const negative = [];
-  filterStrings.forEach((f) => {
-    if (f.startsWith('!')) {
-      const regex = new RegExp(f.substring(1), "i");
-      negative.push((s) => !regex.test(s));
-    } else {
-      const regex = new RegExp(f, "i");
-      positive.push((s) => regex.test(s));
-    }
-  });
-  const filter = (item) => {
-    const apply = (f) => f(String(item.name));
-    return (positive.length === 0 || positive.some(apply)) &&
-          (negative.length === 0 || negative.every(apply));
-  };
-  return filter;
-}
-
 </script>
 <style scoped>
 .container {
diff --git a/tools/winscope/src/ime_processing.js b/tools/winscope/src/ime_processing.js
new file mode 100644
index 000000000..e229f2f88
--- /dev/null
+++ b/tools/winscope/src/ime_processing.js
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2022, The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview This file contains functions used after the decoding of proto
+ * trace files and before the display of trace entries in DataView panels
+ * to combine WM & SF trace properties into IME trace entries.
+ */
+
+import {getFilter} from '@/utils/utils';
+import {TRACE_TYPES} from '@/decode';
+
+function combineWmSfWithImeDataIfExisting(dataFiles) {
+  console.log('before combining', dataFiles);
+  let filesAsDict;
+  if (Array.isArray(dataFiles)) {
+    // transform dataFiles to a dictionary / object with filetype as the key
+    // this happens for the adb direct capture case
+    filesAsDict = {};
+    for (const dataFile of dataFiles) {
+      const dataType = dataFile.type;
+      filesAsDict[dataType] = dataFile;
+    }
+  } else {
+    filesAsDict = dataFiles;
+  }
+
+  const imeTraceFiles = Object.entries(filesAsDict).filter(
+      ([filetype]) => (
+      // mapping it to an array of files; removes the key which is filetype
+        filetype.includes('ImeTrace'))).map(([k, v]) => v);
+  for (const imeTraceFile of imeTraceFiles) {
+    if (filesAsDict[TRACE_TYPES.WINDOW_MANAGER]) {
+      combineWmSfPropertiesIntoImeData(imeTraceFile,
+          filesAsDict[TRACE_TYPES.WINDOW_MANAGER]);
+    }
+    if (filesAsDict[TRACE_TYPES.SURFACE_FLINGER]) {
+      combineWmSfPropertiesIntoImeData(imeTraceFile,
+          filesAsDict[TRACE_TYPES.SURFACE_FLINGER]);
+    }
+  }
+  console.log('after combining', dataFiles);
+}
+
+function combineWmSfPropertiesIntoImeData(imeTraceFile, wmOrSfTraceFile) {
+  const imeTimestamps = imeTraceFile.timeline;
+  const wmOrSfData = wmOrSfTraceFile.data;
+  const wmOrSfTimestamps = wmOrSfTraceFile.timeline;
+
+  // find the latest sf / wm timestamp that comes before current ime timestamp
+  let wmOrSfIndex = 0;
+  const intersectWmOrSfIndices = [];
+  for (let imeIndex = 0; imeIndex < imeTimestamps.length; imeIndex++) {
+    const currImeTimestamp = imeTimestamps[imeIndex];
+
+    let currWmOrSfTimestamp = wmOrSfTimestamps[wmOrSfIndex];
+    while (currWmOrSfTimestamp < currImeTimestamp) {
+      wmOrSfIndex++;
+      currWmOrSfTimestamp = wmOrSfTimestamps[wmOrSfIndex];
+    }
+    intersectWmOrSfIndices.push(wmOrSfIndex - 1);
+  }
+
+  for (let i = 0; i < imeTimestamps.length; i++) {
+    const wmOrSfIntersectIndex = intersectWmOrSfIndices[i];
+    let wmStateOrSfLayer = wmOrSfData[wmOrSfIntersectIndex];
+    if (wmStateOrSfLayer) {
+      // filter to only relevant nodes & fields
+      // console.log('before pruning:', wmStateOrSfLayer);
+      if (wmStateOrSfLayer.kind !== 'WindowManagerState') {
+        wmStateOrSfLayer = filterSfLayerForIme(wmStateOrSfLayer);
+      }
+      // console.log('after pruning:', wmStateOrSfLayer);
+      if (wmStateOrSfLayer) {
+        imeTraceFile.data[i].children.push(wmStateOrSfLayer);
+      }
+    }
+  }
+}
+
+function filterSfLayerForIme(sfLayer) {
+  const filter = getFilter('ImeContainer');
+  // prune all children that don't match filter
+  return pruneChildrenByFilter(sfLayer, filter);
+}
+
+function pruneChildrenByFilter(curr, filter) {
+  const prunedChildren = [];
+  if (filter(curr)) { // curr node passes filter; will keep all children
+    return curr;
+  }
+  // else, filter curr's children
+  for (const child of curr.children) {
+    const prunedChild = pruneChildrenByFilter(child, filter);
+    if (prunedChild) {
+      prunedChildren.push(prunedChild);
+    }
+    // else undefined - child does not match the filter; discard it
+  }
+  if (prunedChildren.length > 0) {
+    // make a copy because we can't set property 'children' of original object
+    const copy = Object.assign({}, curr);
+    copy.children = prunedChildren;
+    return copy;
+  }
+  return undefined; // no children match the filter; discard curr node
+}
+
+export {combineWmSfWithImeDataIfExisting};
diff --git a/tools/winscope/src/proxyclient/ProxyClient.ts b/tools/winscope/src/proxyclient/ProxyClient.ts
index 95f32a1f5..b2a2bfa9b 100644
--- a/tools/winscope/src/proxyclient/ProxyClient.ts
+++ b/tools/winscope/src/proxyclient/ProxyClient.ts
@@ -16,6 +16,7 @@
 
 import LocalStore from '../localstore.js';
 import {FILE_DECODERS, FILE_TYPES} from '../decode.js';
+import {combineWmSfWithImeDataIfExisting} from '../ime_processing.js';
 
 export enum ProxyState {
   ERROR = 0,
@@ -199,6 +200,9 @@ class ProxyClient {
         if (idx < files.length - 1) {
           client.loadFile(files, idx + 1, traceType, view);
         } else {
+          if (view.store.betaFeatures.newImePanels) {
+            combineWmSfWithImeDataIfExisting(view.dataFiles);
+          }
           const currentDate = new Date().toISOString();
           view.$emit('dataReady',
               `winscope-${traceType}-${currentDate}`,
diff --git a/tools/winscope/src/utils/utils.js b/tools/winscope/src/utils/utils.js
index fae19f330..db6afccab 100644
--- a/tools/winscope/src/utils/utils.js
+++ b/tools/winscope/src/utils/utils.js
@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-// Find the index of the last element matching the predicate in a sorted array
+/**
+ * Find the index of the last element matching the predicate in a sorted array
+ */
 function findLastMatchingSorted(array, predicate) {
   let a = 0;
   let b = array.length - 1;
@@ -30,7 +32,9 @@ function findLastMatchingSorted(array, predicate) {
   return predicate(array, b) ? b : a;
 }
 
-// Make sure stableId is unique (makes old versions of proto compatible)
+/**
+ * Make sure stableId is unique (makes old versions of proto compatible)
+ */
 function stableIdCompatibilityFixup(item) {
   // For backwards compatibility
   // (the only item that doesn't have a unique stable ID in the tree)
@@ -84,8 +88,9 @@ function nanosToString(elapsedRealtimeNanos, precision) {
   return parts.reverse().join('');
 }
 
-/** Checks for match in window manager properties taskId, layerId, or windowToken,
- * or surface flinger property id
+/**
+ * Checks for match in window manager properties taskId, layerId, or
+ * windowToken, or surface flinger property id
  */
 function isPropertyMatch(flickerItem, entryItem) {
   return flickerItem.taskId === entryItem.taskId ||
@@ -94,11 +99,39 @@ function isPropertyMatch(flickerItem, entryItem) {
     flickerItem.layerId === entryItem.id;
 }
 
+/**
+ * Get a function that will filter tree items based on a filter string
+ * @param filterString a string of "queries" used to match tree items' names
+ * @return {function(*)} a filter function that determines whether a tree item's
+ * name matches what is wanted based on the filterString
+ */
+function getFilter(filterString) {
+  const filterStrings = filterString.split(',');
+  const positive = [];
+  const negative = [];
+  filterStrings.forEach((f) => {
+    if (f.startsWith('!')) {
+      const regex = new RegExp(f.substring(1), "i");
+      negative.push((s) => !regex.test(s));
+    } else {
+      const regex = new RegExp(f, "i");
+      positive.push((s) => regex.test(s));
+    }
+  });
+  const filter = (item) => {
+    const apply = (f) => f(String(item.name));
+    return (positive.length === 0 || positive.some(apply)) &&
+      (negative.length === 0 || negative.every(apply));
+  };
+  return filter;
+}
+
 export {
   DIRECTION,
   findLastMatchingSorted,
   isPropertyMatch,
   stableIdCompatibilityFixup,
   nanosToString,
-  TimeUnits
-}
\ No newline at end of file
+  TimeUnits,
+  getFilter,
+};