From d0d6ae95b0e9ad5908e1ee8c4d19e0e87c776056 Mon Sep 17 00:00:00 2001
From: Johan Berggren <jberggren@gmail.com>
Date: Wed, 25 Oct 2023 15:12:46 +0200
Subject: [PATCH] Add DFIQ context to SearchHistory (#2957)

* Append DFIQ context to SearchHistory schema and save context when searching

* Handle setting DFIQ context

* Update DFIQ context card

* styling

* remove prints

* context card styling

* tests

* format

* Add link to dfiq.org for questions
---
 timesketch/api/v1/resources/__init__.py       |   2 +
 timesketch/api/v1/resources/explore.py        |  44 ++++++++
 timesketch/api/v1/resources_test.py           |   1 +
 .../src/components/Explore/EventList.vue      |  10 +-
 .../src/components/Scenarios/ContextCard.vue  | 102 +++++++++++++++++-
 .../Scenarios/ContextCardApproach.vue         |  76 +++++++++++++
 .../src/components/Scenarios/Facet.vue        |  40 ++-----
 .../src/components/Scenarios/Question.vue     |  59 ++++++++--
 .../src/components/Scenarios/SearchChip.vue   |  18 +++-
 timesketch/frontend-ng/src/store.js           |  12 +--
 timesketch/frontend-ng/src/views/Explore.vue  |  43 +++++---
 ...732e1_add_dfiq_context_to_searchhistory.py |  50 +++++++++
 timesketch/models/sketch.py                   |  13 +++
 13 files changed, 397 insertions(+), 73 deletions(-)
 create mode 100644 timesketch/frontend-ng/src/components/Scenarios/ContextCardApproach.vue
 create mode 100644 timesketch/migrations/versions/710c224732e1_add_dfiq_context_to_searchhistory.py

diff --git a/timesketch/api/v1/resources/__init__.py b/timesketch/api/v1/resources/__init__.py
index ef0b2d2a7e..a01161d12d 100644
--- a/timesketch/api/v1/resources/__init__.py
+++ b/timesketch/api/v1/resources/__init__.py
@@ -275,6 +275,7 @@ class ResourceMixin(object):
         "name": fields.String,
         "display_name": fields.String,
         "description": fields.String,
+        "dfiq_identifier": fields.String,
         "spec_json": fields.String,
         "user": fields.Nested(user_fields),
         "approaches": fields.List(fields.Nested(approach_fields)),
@@ -288,6 +289,7 @@ class ResourceMixin(object):
         "name": fields.String,
         "display_name": fields.String,
         "description": fields.String,
+        "dfiq_identifier": fields.String,
         "spec_json": fields.String,
         "user": fields.Nested(user_fields),
         "questions": fields.List(fields.Nested(question_fields)),
diff --git a/timesketch/api/v1/resources/explore.py b/timesketch/api/v1/resources/explore.py
index 389e66fdb9..166cb557ce 100644
--- a/timesketch/api/v1/resources/explore.py
+++ b/timesketch/api/v1/resources/explore.py
@@ -44,6 +44,9 @@
 from timesketch.models.sketch import Sketch
 from timesketch.models.sketch import View
 from timesketch.models.sketch import SearchHistory
+from timesketch.models.sketch import Scenario
+from timesketch.models.sketch import Facet
+from timesketch.models.sketch import InvestigativeQuestion
 
 # Metrics definitions
 METRICS = {
@@ -93,6 +96,42 @@ def post(self, sketch_id):
                 "Unable to explore data, unable to validate form data",
             )
 
+        # DFIQ context
+        scenario = None
+        facet = None
+        question = None
+
+        scenario_id = request.json.get("scenario", None)
+        facet_id = request.json.get("facet", None)
+        question_id = request.json.get("question", None)
+
+        if scenario_id:
+            scenario = Scenario.query.get(scenario_id)
+            if scenario:
+                if scenario.sketch_id != sketch.id:
+                    abort(
+                        HTTP_STATUS_CODE_BAD_REQUEST,
+                        "Scenario is not part of this sketch.",
+                    )
+
+        if facet_id:
+            facet = Facet.query.get(facet_id)
+            if facet:
+                if facet.scenario.sketch_id != sketch.id:
+                    abort(
+                        HTTP_STATUS_CODE_BAD_REQUEST,
+                        "Facet is not part of this sketch.",
+                    )
+
+        if question_id:
+            question = InvestigativeQuestion.query.get(question_id)
+            if question:
+                if question.facet.scenario.sketch_id != sketch.id:
+                    abort(
+                        HTTP_STATUS_CODE_BAD_REQUEST,
+                        "Question is not part of this sketch.",
+                    )
+
         # TODO: Remove form and use json instead.
         query_dsl = form.dsl.data
         enable_scroll = form.enable_scroll.data
@@ -340,6 +379,11 @@ def post(self, sketch_id):
             new_search.query_result_count = count_total_complete
             new_search.query_time = result["took"]
 
+            # Add DFIQ context
+            new_search.scenario = scenario
+            new_search.facet = facet
+            new_search.question = question
+
             if previous_search:
                 new_search.parent = previous_search
 
diff --git a/timesketch/api/v1/resources_test.py b/timesketch/api/v1/resources_test.py
index 973a4b6fb1..56478b4925 100644
--- a/timesketch/api/v1/resources_test.py
+++ b/timesketch/api/v1/resources_test.py
@@ -209,6 +209,7 @@ class ExploreResourceTest(BaseTest):
                 "query_filter": "{}",
                 "query_result_count": 0,
                 "query_string": "test",
+                "scenario_id": None,
             },
         },
         "objects": [
diff --git a/timesketch/frontend-ng/src/components/Explore/EventList.vue b/timesketch/frontend-ng/src/components/Explore/EventList.vue
index 9d670ba071..6357514bd1 100644
--- a/timesketch/frontend-ng/src/components/Explore/EventList.vue
+++ b/timesketch/frontend-ng/src/components/Explore/EventList.vue
@@ -155,7 +155,7 @@ limitations under the License.
               <v-tooltip top open-delay="500">
                 <template v-slot:activator="{ on }">
                   <v-btn v-on="on" icon @click="exportSearchResult()">
-                <v-icon>mdi-download</v-icon>
+                    <v-icon>mdi-download</v-icon>
                   </v-btn>
                 </template>
                 <span>Download current view as csv</span>
@@ -646,6 +646,9 @@ export default {
       }
       return baseHeaders
     },
+    activeContext() {
+      return this.$store.state.activeContext
+    },
   },
   methods: {
     sortEvents(sortAsc) {
@@ -821,6 +824,11 @@ export default {
         formData['parent'] = this.branchParent
       }
 
+      // Get DFIQ context
+      formData['scenario'] = this.activeContext.scenario.id
+      formData['facet'] = this.activeContext.facet.id
+      formData['question'] = this.activeContext.question.id
+
       ApiClient.search(this.sketch.id, formData)
         .then((response) => {
           this.eventList.objects = response.data.objects
diff --git a/timesketch/frontend-ng/src/components/Scenarios/ContextCard.vue b/timesketch/frontend-ng/src/components/Scenarios/ContextCard.vue
index 6ff18297a5..ca771c1663 100644
--- a/timesketch/frontend-ng/src/components/Scenarios/ContextCard.vue
+++ b/timesketch/frontend-ng/src/components/Scenarios/ContextCard.vue
@@ -14,33 +14,125 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <v-card outlined class="mt-3 mx-3" v-if="activeContext.question">
-    <v-toolbar dense flat>
-      <strong>{{ activeContext.question.display_name }}</strong>
+  <v-card outlined rounded class="mt-3 mx-3" v-if="activeContext.question">
+    <v-toolbar flat dense style="background-color: transparent">
+      <h3>
+        {{ activeContext.question.display_name }}
+        <small>
+          <a :href="getDfiqQuestionUrl(activeContext.question.dfiq_identifier)" target="_blank" rel="noreferrer"
+            >({{ activeContext.question.dfiq_identifier }})</a
+          >
+        </small>
+      </h3>
       <v-spacer></v-spacer>
+      <v-btn v-if="activeContext.question.description" small icon @click="expanded = !expanded" class="mr-1">
+        <v-icon v-if="expanded">mdi-chevron-up</v-icon>
+        <v-icon v-else>mdi-chevron-down</v-icon>
+      </v-btn>
+
       <v-btn small icon @click="$store.dispatch('clearActiveContext')" class="mr-1">
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </v-toolbar>
-    <v-divider></v-divider>
-    <div class="pa-4 markdown-body" v-html="toHtml(activeContext.question.description)" style="font-size: 0.9em"></div>
+
+    <v-expand-transition>
+      <div v-show="expanded">
+        <div v-if="activeContext.question.description">
+          <div
+            class="px-4 pb-4 markdown-body"
+            style="background-color: transparent"
+            v-html="toHtml(activeContext.question.description)"
+          ></div>
+        </div>
+
+        <!--Suggested queries-->
+        <div v-if="opensearchQueries.length" class="px-4 pb-4">
+          <strong style="font-size: 0.9em">Suggested queries</strong>
+          <ts-search-chip
+            v-for="opensearchQuery in opensearchQueries"
+            :key="opensearchQuery.value"
+            :searchchip="opensearchQuery"
+            type="link"
+          ></ts-search-chip>
+        </div>
+
+        <!--Approaches-->
+        <div v-if="activeContext.question.approaches.length">
+          <div class="px-4 pb-3">
+            <v-btn depressed small @click="showApproaches = !showApproaches">
+              <span v-if="!showApproaches">Show {{ activeContext.question.approaches.length }} approaches</span>
+              <span v-else>Hide approaches</span>
+            </v-btn>
+          </div>
+          <v-expand-transition>
+            <div v-if="showApproaches">
+              <v-divider></v-divider>
+              <v-expansion-panels flat accordion hover>
+                <v-expansion-panel
+                  v-for="(approach, index) in activeContext.question.approaches"
+                  :key="approach.display_name"
+                >
+                  <v-expansion-panel-header>
+                    <span>{{ approach.display_name }}</span>
+                  </v-expansion-panel-header>
+                  <v-expansion-panel-content>
+                    <ts-context-card-approach :approachJSON="approach"></ts-context-card-approach>
+                  </v-expansion-panel-content>
+                  <v-divider v-if="index != activeContext.question.approaches.length - 1"></v-divider>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            </div>
+          </v-expand-transition>
+        </div>
+      </div>
+    </v-expand-transition>
   </v-card>
 </template>
 
 <script>
 import DOMPurify from 'dompurify'
 import { marked } from 'marked'
+import TsContextCardApproach from './ContextCardApproach'
+import TsSearchChip from './SearchChip'
 
 export default {
+  components: { TsContextCardApproach, TsSearchChip },
+  data: function () {
+    return {
+      showApproaches: false,
+      expanded: true,
+    }
+  },
   computed: {
     activeContext() {
       return this.$store.state.activeContext
     },
+    opensearchQueries() {
+      let opensearchQueries = []
+      let approaches = this.activeContext.question.approaches.map((approach) => JSON.parse(approach.spec_json))
+      approaches.forEach((approach) => {
+        approach._view.processors.forEach((processor) => {
+          processor.analysis.forEach((analysis) => {
+            if (analysis.name === 'OpenSearch') {
+              analysis.steps.forEach((step) => {
+                if (step.type === 'opensearch-query') {
+                  opensearchQueries.push(step)
+                }
+              })
+            }
+          })
+        })
+      })
+      return opensearchQueries
+    },
   },
   methods: {
     toHtml(markdown) {
       return DOMPurify.sanitize(marked(markdown))
     },
+    getDfiqQuestionUrl(id) {
+      return 'https://dfiq.org/questions/' + id + '/'
+    },
   },
 }
 </script>
diff --git a/timesketch/frontend-ng/src/components/Scenarios/ContextCardApproach.vue b/timesketch/frontend-ng/src/components/Scenarios/ContextCardApproach.vue
new file mode 100644
index 0000000000..3c16f553bf
--- /dev/null
+++ b/timesketch/frontend-ng/src/components/Scenarios/ContextCardApproach.vue
@@ -0,0 +1,76 @@
+<!--
+Copyright 2023 Google Inc. All rights reserved.
+
+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.
+-->
+<template>
+  <div style="font-size: 0.9em">
+    <div
+      class="pb-4 markdown-body"
+      style="font-size: 1em; background-color: transparent"
+      v-html="toHtml(approach.description.details)"
+    ></div>
+
+    <div v-if="approach.description.references && approach.description.references.length">
+      <v-icon class="mr-2">mdi-link-variant</v-icon>
+      <strong>References</strong>
+      <ul class="mb-4 mt-2 markdown-body" style="line-height: 70%; background-color: transparent">
+        <li v-for="reference in approach.description.references" :key="reference">
+          <div v-html="toHtml(reference)" style="font-size: 0.9em"></div>
+        </li>
+      </ul>
+    </div>
+
+    <v-sheet style="max-width: 80%" class="mb-3">
+      <v-icon color="success" class="mr-2">mdi-check</v-icon>
+      <strong>Covered</strong>
+      <ul class="mt-2">
+        <li v-for="note in approach._view.notes.covered" :key="note">{{ note }}</li>
+      </ul>
+    </v-sheet>
+
+    <v-sheet style="max-width: 80%">
+      <v-icon color="error" class="mr-2">mdi-close</v-icon>
+      <strong>Not covered</strong>
+      <ul class="mt-2">
+        <li v-for="note in approach._view.notes.not_covered" :key="note">{{ note }}</li>
+      </ul>
+    </v-sheet>
+  </div>
+</template>
+
+<script>
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+export default {
+  props: ['approachJSON'],
+  data: function () {
+    return {
+      showDetails: true,
+      processorTab: null,
+    }
+  },
+  computed: {
+    approach() {
+      return JSON.parse(this.approachJSON.spec_json)
+    },
+  },
+  methods: {
+    toHtml(markdown) {
+      return DOMPurify.sanitize(marked(markdown))
+    },
+  },
+}
+</script>
+
diff --git a/timesketch/frontend-ng/src/components/Scenarios/Facet.vue b/timesketch/frontend-ng/src/components/Scenarios/Facet.vue
index 97cb9f5610..832e556f53 100644
--- a/timesketch/frontend-ng/src/components/Scenarios/Facet.vue
+++ b/timesketch/frontend-ng/src/components/Scenarios/Facet.vue
@@ -36,9 +36,7 @@ limitations under the License.
       </v-col>
 
       <v-col cols="10" class="pl-1">
-        <span style="font-size: 0.9em">
-          {{ facet.display_name }}
-        </span>
+        <span style="font-size: 0.9em"> {{ facet.display_name }}</span>
       </v-col>
 
       <v-col cols="1">
@@ -50,13 +48,8 @@ limitations under the License.
 
     <v-expand-transition>
       <div v-show="expanded">
-        <span
-          @click="setActiveContext(question)"
-          style="font-size: 0.9em"
-          v-for="(question, index) in facet.questions"
-          :key="question.id"
-        >
-          <ts-question :question="question"></ts-question>
+        <span style="font-size: 0.9em" v-for="(question, index) in facet.questions" :key="question.id">
+          <ts-question :scenario="scenario" :facet="facet" :question="question"></ts-question>
           <v-divider v-if="index != facet.questions.length - 1"></v-divider>
         </span>
       </div>
@@ -81,14 +74,12 @@ export default {
     sketch() {
       return this.$store.state.sketch
     },
+    activeContext() {
+      return this.$store.state.activeContext
+    },
     questionsWithConclusion() {
       return this.facet.questions.filter((question) => question.conclusions.length)
     },
-    isActive() {
-      return (
-        this.questionsWithConclusion.length > 0 && this.questionsWithConclusion.length < this.facet.questions.length
-      )
-    },
     isResolved() {
       return this.questionsWithConclusion.length === this.facet.questions.length
     },
@@ -98,26 +89,13 @@ export default {
   },
   methods: {
     toggleFacet: function () {
-      if (!this.expanded) {
-        this.setActiveContext()
-      } else {
-        if (this.$store.state.activeContext.facet != null) {
-          if (this.facet.id === this.$store.state.activeContext.facet.id) {
-            this.$store.dispatch('clearActiveContext')
-          }
+      if (this.activeContext.facet != null) {
+        if (this.facet.id === this.activeContext.facet.id) {
+          this.$store.dispatch('clearActiveContext')
         }
       }
       this.expanded = !this.expanded
     },
-    setActiveContext: function (question) {
-      let payload = {
-        scenario: this.scenario,
-        facet: this.facet,
-        question: question,
-      }
-      this.$store.dispatch('setActiveContext', payload)
-    },
   },
-  created() {},
 }
 </script>
diff --git a/timesketch/frontend-ng/src/components/Scenarios/Question.vue b/timesketch/frontend-ng/src/components/Scenarios/Question.vue
index 7de8a0f50c..01de93ac8e 100644
--- a/timesketch/frontend-ng/src/components/Scenarios/Question.vue
+++ b/timesketch/frontend-ng/src/components/Scenarios/Question.vue
@@ -19,7 +19,7 @@ limitations under the License.
       no-gutters
       class="pa-2 pl-5"
       style="cursor: pointer; font-size: 0.9em"
-      @click="expanded = !expanded"
+      @click="toggleQuestion()"
       :class="
         $vuetify.theme.dark
           ? expanded
@@ -30,7 +30,7 @@ limitations under the License.
           : 'light-hover'
       "
     >
-      <span v-if="expanded"
+      <span v-if="expanded && isActive"
         ><strong>{{ question.display_name }}</strong></span
       >
       <span v-else>{{ question.display_name }}</span>
@@ -49,6 +49,7 @@ limitations under the License.
             : 'light-hover'
         "
         class="pb-1"
+        @click="setActiveContext()"
       >
         <!-- Query suggestions -->
         <div class="pt-2 pl-5">
@@ -59,11 +60,13 @@ limitations under the License.
                 v-for="searchtemplate in searchTemplates"
                 :key="searchtemplate.id"
                 :searchchip="searchtemplate"
+                type="chip"
               ></ts-search-chip>
               <ts-search-chip
                 v-for="opensearchQuery in opensearchQueries"
                 :key="opensearchQuery.value"
                 :searchchip="opensearchQuery"
+                type="chip"
               ></ts-search-chip>
             </v-chip-group>
           </div>
@@ -128,7 +131,7 @@ import TsSearchChip from './SearchChip'
 import TsQuestionConclusion from './QuestionConclusion'
 
 export default {
-  props: ['question'],
+  props: ['scenario', 'facet', 'question'],
   components: {
     TsSearchChip,
     TsQuestionConclusion,
@@ -155,6 +158,12 @@ export default {
     currentUserConclusion() {
       return this.question.conclusions.filter((conclusion) => conclusion.user.username === this.currentUser).length
     },
+    activeContext() {
+      return this.$store.state.activeContext
+    },
+    isActive() {
+      return this.activeContext.question.id === this.question.id
+    },
   },
   methods: {
     createConclusion() {
@@ -166,20 +175,50 @@ export default {
         .catch((e) => {})
     },
     getSuggestedQueries() {
-      let analyses = this.question.approaches
-        .map((approach) => JSON.parse(approach.spec_json))
-        .map((approach) => approach._view.processors)
-        .map((processor) => processor[0].analysis.timesketch)
-        .flat()
-      this.opensearchQueries = analyses.filter((analysis) => analysis.type === 'opensearch-query')
+      let approaches = this.question.approaches.map((approach) => JSON.parse(approach.spec_json))
+      approaches.forEach((approach) => {
+        approach._view.processors.forEach((processor) => {
+          processor.analysis.forEach((analysis) => {
+            if (analysis.name === 'OpenSearch') {
+              analysis.steps.forEach((step) => {
+                this.opensearchQueries.push(step)
+              })
+            }
+          })
+        })
+      })
+    },
+    toggleQuestion() {
+      if (this.expanded && !this.isActive) {
+        this.setActiveContext()
+        return
+      } else {
+        this.$store.dispatch('clearActiveContext')
+      }
+      this.expanded = !this.expanded
+    },
+    setActiveContext: function (question) {
+      let payload = {
+        scenario: this.scenario,
+        facet: this.facet,
+        question: this.question,
+      }
+      this.$store.dispatch('setActiveContext', payload)
     },
   },
   watch: {
     expanded: function (isExpanded) {
-      if (!isExpanded) return
+      if (isExpanded) {
+        this.setActiveContext()
+      }
       if (this.opensearchQueries.length) return
       this.getSuggestedQueries()
     },
+    isActive: function (newVal) {
+      if (!newVal) {
+        this.expanded = false
+      }
+    },
   },
 }
 </script>
diff --git a/timesketch/frontend-ng/src/components/Scenarios/SearchChip.vue b/timesketch/frontend-ng/src/components/Scenarios/SearchChip.vue
index b98fab2bd7..dce80579b1 100644
--- a/timesketch/frontend-ng/src/components/Scenarios/SearchChip.vue
+++ b/timesketch/frontend-ng/src/components/Scenarios/SearchChip.vue
@@ -14,9 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <v-chip x-small @click="search(queryString)">
-    {{ displayName }}
-  </v-chip>
+  <div>
+    <v-chip v-if="type === 'chip'" x-small @click="search(queryString)">
+      {{ displayName }}
+    </v-chip>
+    <div v-if="type === 'link'" @click="search(queryString)" style="cursor: pointer; font-size: 0.9em">
+      <v-row no-gutters class="pa-1" :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'">
+        <span>
+          <v-icon small>mdi-magnify</v-icon>
+          {{ displayName }}</span
+        >
+      </v-row>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -34,7 +44,7 @@ const defaultQueryFilter = () => {
 }
 
 export default {
-  props: ['searchchip'],
+  props: ['searchchip', 'type'],
   computed: {
     displayName() {
       return this.searchchip.name || this.searchchip.description
diff --git a/timesketch/frontend-ng/src/store.js b/timesketch/frontend-ng/src/store.js
index 95bac2af67..56aaa72cfb 100644
--- a/timesketch/frontend-ng/src/store.js
+++ b/timesketch/frontend-ng/src/store.js
@@ -35,9 +35,9 @@ const defaultState = (currentUser) => {
     currentSearchNode: null,
     currentUser: currentUser,
     activeContext: {
-      scenario: null,
-      facet: null,
-      question: null
+      scenario: {},
+      facet: {},
+      question: {}
     },
     snackbar: {
       active: false,
@@ -99,9 +99,9 @@ export default new Vuex.Store({
     },
     CLEAR_ACTIVE_CONTEXT(state) {
       let payload = {
-        scenario: null,
-        facet: null,
-        question: null
+        scenario: {},
+        facet: {},
+        question: {}
       }
       Vue.set(state, 'activeContext', payload)
     },
diff --git a/timesketch/frontend-ng/src/views/Explore.vue b/timesketch/frontend-ng/src/views/Explore.vue
index df3084dea5..436a32ac84 100644
--- a/timesketch/frontend-ng/src/views/Explore.vue
+++ b/timesketch/frontend-ng/src/views/Explore.vue
@@ -30,6 +30,12 @@ limitations under the License.
       <v-container> TODO: Add content here </v-container>
     </v-navigation-drawer>
 
+    <!-- DFIQ context -->
+    <ts-scenario-context-card
+      class="pt-0 mt-n2 mb-7"
+      v-if="activeContext.question.display_name"
+    ></ts-scenario-context-card>
+
     <!-- Search and Filters -->
     <v-card flat class="pa-3 pt-0 mt-n3" color="transparent">
       <v-card class="d-flex align-start mb-1" outlined>
@@ -235,19 +241,27 @@ limitations under the License.
           <span v-for="(chip, index) in filterChips" :key="index + chip.value">
             <v-tooltip top :disabled="chip.value.length < 33" open-delay="300">
               <template v-slot:activator="{ on: onTooltip, attrs }">
-              <v-chip outlined close close-icon="mdi-close" @click:close="removeChip(chip)" v-bind="attrs" v-on="onTooltip">
-                <v-icon v-if="chip.value === '__ts_star'" left small color="amber">mdi-star</v-icon>
-                <v-icon v-if="chip.value === '__ts_comment'" left small>mdi-comment-multiple-outline</v-icon>
-                <v-icon v-if="getQuickTag(chip.value)" left small :color="getQuickTag(chip.value).color"
-                  >{{ getQuickTag(chip.value).label }}</v-icon>
-                <span v-if="chip.operator === 'must_not'" class="filter-chip-truncate">
-                  <span style="color: red;">NOT </span>
-                  {{ (chip.field ? `${chip.field} : ${chip.value}` : chip.value) | formatLabelText }}
-                </span>
-                <span v-else class="filter-chip-truncate">
-                  {{ (chip.field ? `${chip.field} : ${chip.value}` : chip.value) | formatLabelText }}
-                </span>
-              </v-chip>
+                <v-chip
+                  outlined
+                  close
+                  close-icon="mdi-close"
+                  @click:close="removeChip(chip)"
+                  v-bind="attrs"
+                  v-on="onTooltip"
+                >
+                  <v-icon v-if="chip.value === '__ts_star'" left small color="amber">mdi-star</v-icon>
+                  <v-icon v-if="chip.value === '__ts_comment'" left small>mdi-comment-multiple-outline</v-icon>
+                  <v-icon v-if="getQuickTag(chip.value)" left small :color="getQuickTag(chip.value).color">{{
+                    getQuickTag(chip.value).label
+                  }}</v-icon>
+                  <span v-if="chip.operator === 'must_not'" class="filter-chip-truncate">
+                    <span style="color: red">NOT </span>
+                    {{ (chip.field ? `${chip.field} : ${chip.value}` : chip.value) | formatLabelText }}
+                  </span>
+                  <span v-else class="filter-chip-truncate">
+                    {{ (chip.field ? `${chip.field} : ${chip.value}` : chip.value) | formatLabelText }}
+                  </span>
+                </v-chip>
               </template>
               <span>{{ chip.value }}</span>
             </v-tooltip>
@@ -257,9 +271,6 @@ limitations under the License.
       </div>
     </v-card>
 
-    <!-- DFIQ context -->
-    <ts-scenario-context-card v-if="activeContext.question"></ts-scenario-context-card>
-
     <!-- Eventlist -->
     <v-card flat class="mt-5 mx-3">
       <ts-event-list
diff --git a/timesketch/migrations/versions/710c224732e1_add_dfiq_context_to_searchhistory.py b/timesketch/migrations/versions/710c224732e1_add_dfiq_context_to_searchhistory.py
new file mode 100644
index 0000000000..ed52447137
--- /dev/null
+++ b/timesketch/migrations/versions/710c224732e1_add_dfiq_context_to_searchhistory.py
@@ -0,0 +1,50 @@
+"""Add DFIQ context to SearchHistory
+
+Revision ID: 710c224732e1
+Revises: 5c3ba044dc64
+Create Date: 2023-09-25 18:24:34.111079
+
+"""
+# This code is auto generated. Ignore linter errors.
+# pylint: skip-file
+
+# revision identifiers, used by Alembic.
+revision = "710c224732e1"
+down_revision = "5c3ba044dc64"
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("searchhistory", schema=None) as batch_op:
+        batch_op.add_column(sa.Column("scenario_id", sa.Integer(), nullable=True))
+        batch_op.add_column(sa.Column("facet_id", sa.Integer(), nullable=True))
+        batch_op.add_column(sa.Column("question_id", sa.Integer(), nullable=True))
+        batch_op.add_column(sa.Column("approach_id", sa.Integer(), nullable=True))
+        batch_op.create_foreign_key(None, "facet", ["facet_id"], ["id"])
+        batch_op.create_foreign_key(None, "scenario", ["scenario_id"], ["id"])
+        batch_op.create_foreign_key(
+            None, "investigativequestionapproach", ["approach_id"], ["id"]
+        )
+        batch_op.create_foreign_key(
+            None, "investigativequestion", ["question_id"], ["id"]
+        )
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("searchhistory", schema=None) as batch_op:
+        batch_op.drop_constraint(None, type_="foreignkey")
+        batch_op.drop_constraint(None, type_="foreignkey")
+        batch_op.drop_constraint(None, type_="foreignkey")
+        batch_op.drop_constraint(None, type_="foreignkey")
+        batch_op.drop_column("approach_id")
+        batch_op.drop_column("question_id")
+        batch_op.drop_column("facet_id")
+        batch_op.drop_column("scenario_id")
+
+    # ### end Alembic commands ###
diff --git a/timesketch/models/sketch.py b/timesketch/models/sketch.py
index c2efae0b1e..c44f2b99a0 100644
--- a/timesketch/models/sketch.py
+++ b/timesketch/models/sketch.py
@@ -880,6 +880,10 @@ class SearchHistory(LabelMixin, BaseModel):
     parent_id = Column(Integer, ForeignKey(id))
     sketch_id = Column(Integer, ForeignKey("sketch.id"))
     user_id = Column(Integer, ForeignKey("user.id"))
+    scenario_id = Column(Integer, ForeignKey("scenario.id"))
+    facet_id = Column(Integer, ForeignKey("facet.id"))
+    question_id = Column(Integer, ForeignKey("investigativequestion.id"))
+    approach_id = Column(Integer, ForeignKey("investigativequestionapproach.id"))
     description = Column(UnicodeText())
     query_string = Column(UnicodeText())
     query_filter = Column(UnicodeText())
@@ -936,6 +940,7 @@ def build_node_dict(node_dict, node):
         node_dict["query_string"] = node.query_string
         node_dict["query_filter"] = node.query_filter
         node_dict["query_dsl"] = node.query_dsl
+        node_dict["scenario_id"] = node.scenario_id
         node_dict["children"] = []
         return node_dict
 
@@ -985,6 +990,7 @@ class Scenario(LabelMixin, StatusMixin, CommentMixin, GenericAttributeMixin, Bas
     sketch_id = Column(Integer, ForeignKey("sketch.id"))
     user_id = Column(Integer, ForeignKey("user.id"))
     facets = relationship("Facet", backref="scenario", lazy="select")
+    search_histories = relationship("SearchHistory", backref="scenario", lazy="select")
 
     def __init__(
         self,
@@ -1149,6 +1155,7 @@ class Facet(LabelMixin, StatusMixin, CommentMixin, GenericAttributeMixin, BaseMo
     timelines = relationship("Timeline", secondary=facet_timeline_association_table)
     questions = relationship("InvestigativeQuestion", backref="facet", lazy="select")
     conclusions = relationship("FacetConclusion", backref="facet", lazy="select")
+    search_histories = relationship("SearchHistory", backref="facet", lazy="select")
 
     def __init__(
         self, name, display_name, dfiq_identifier, user, spec_json, description=None
@@ -1287,6 +1294,9 @@ class InvestigativeQuestion(
         backref="investigativequestion",
         lazy="select",
     )
+    search_histories = relationship(
+        "SearchHistory", backref="investigativequestion", lazy="select"
+    )
 
     def __init__(
         self, name, display_name, dfiq_identifier, user, spec_json, description=None
@@ -1355,6 +1365,9 @@ class InvestigativeQuestionApproach(
     sigma_rules = relationship(
         "SigmaRule", secondary=approach_sigmarule_association_table
     )
+    search_histories = relationship(
+        "SearchHistory", backref="investigativequestionapproach", lazy="select"
+    )
 
     def __init__(
         self, name, display_name, dfiq_identifier, user, spec_json, description=None