Move packages/apps back

apps/leafcutter/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "extends": ["airbnb", "prettier", "next"],
+  "rules": {
+    "react/display-name": [0],
+    "react/jsx-filename-extension": [0],
+    "react/jsx-props-no-spreading": [0],
+    "react/no-array-index-key": [0],
+    "@next/next/no-img-element": [0],
+    "import/prefer-default-export": [0],
+    "import/extensions": [0],
+    "react/function-component-definition": [
+      1,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ]
+  }
+}

apps/leafcutter/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+/storybook-static
+
+*.tgz
+
+.vscode

apps/leafcutter/.gitlab-ci.yml

@@ -0,0 +1,73 @@
+image: node:16-bullseye-slim
+
+stages:
+  - helm-release
+  - build
+  # - test
+  - docker-build
+  - docker-release
+
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - node_modules/
+    - .next/cache/
+
+build:
+  stage: build
+  script:
+    - npm install
+    - npm run-script build
+
+# chromatic:
+#   stage: test
+#   script:
+#     - npm install
+#     - npm run-script chromatic --project-token=${CHROMATIC_PROJECT_TOKEN}
+#   only:
+#     - main
+#     - develop
+
+docker-build:
+  image: registry.gitlab.com/guardianproject-ops/docker-alpine-git:latest
+  services:
+    - docker:dind
+  stage: docker-build
+  variables:
+    DOCKER_NS: ${CI_REGISTRY_IMAGE}
+    DOCKER_TAG: ${CI_COMMIT_SHORT_SHA}
+  script:
+    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+    - make docker/build-fresh-push
+
+docker-release:
+  image: registry.gitlab.com/guardianproject-ops/docker-alpine-git:latest
+  services:
+    - docker:dind
+  stage: docker-release
+  variables:
+    DOCKER_NS: ${CI_REGISTRY_IMAGE}
+    DOCKER_TAG: ${CI_COMMIT_SHORT_SHA}
+    DOCKER_TAG_NEW: ${CI_COMMIT_REF_NAME}
+  only:
+    - main
+    - develop
+  script:
+    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+    - make docker/add-tag
+
+helm-release:
+  image: debian:bullseye-slim
+  stage: helm-release
+  only:
+    - main
+    - develop
+  script:
+    - apt-get update
+    - apt-get install curl gnupg make jq -y
+    - curl https://baltocdn.com/helm/signing.asc | apt-key add -
+    - apt-get install apt-transport-https -y
+    - echo "deb https://baltocdn.com/helm/stable/debian/ all main" | tee /etc/apt/sources.list.d/helm-stable-debian.list
+    - apt-get update
+    - apt-get install helm
+    - make helm/build-push

apps/leafcutter/.gitpod.Dockerfile

@@ -0,0 +1,15 @@
+FROM gitpod/workspace-full
+
+# set up aws
+RUN rm -rf ~/.aws
+RUN	mkdir ~/.aws
+RUN	curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "/home/gitpod/awscliv2.zip"
+RUN	unzip ~/awscliv2.zip -d ~/awscliv2
+RUN	sudo ~/awscliv2/aws/install --update
+RUN brew install aws-vault
+
+RUN brew install kubectl
+RUN brew install pipx
+RUN pipx install aws-sso-util
+RUN npm i -g prettier
+RUN npm i -g npm-check-updates

apps/leafcutter/.gitpod.yml

@@ -0,0 +1,6 @@
+tasks:
+  - init: npm install
+    command: npm run dev
+
+image:
+  file: .gitpod.Dockerfile

apps/leafcutter/.storybook/main.js

@@ -0,0 +1,27 @@
+const path = require("path");
+const toPath = (filePath) => path.join(process.cwd(), filePath);
+
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+  ],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+        },
+      },
+    };
+  },
+};

apps/leafcutter/.storybook/preview.js

@@ -0,0 +1,30 @@
+import { AppProvider } from "../components/common/AppProvider";
+import { I18n } from "react-polyglot";
+import en from "../locales/en.json";
+import "@fontsource/roboto/400.css";
+import "@fontsource/poppins/400.css";
+import "@fontsource/poppins/700.css";
+import "@fontsource/playfair-display/900.css";
+
+const locale = "en";
+const messages = { en };
+
+export const decorators = [
+  (Story) => (
+    <I18n locale={locale} messages={messages[locale]}>
+      <AppProvider>
+        <Story />
+      </AppProvider>
+    </I18n>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

apps/leafcutter/Dockerfile

@@ -0,0 +1,42 @@
+FROM public.ecr.aws/bitnami/node:16-debian-10 as builder
+LABEL maintainer="Darren Clarke <darren@redaranj.com>"
+RUN useradd -u 1001 -g root node
+RUN mkdir /home/node
+RUN chown -R node /home/node
+ARG APP_DIR=/opt/leafcutter
+RUN mkdir -p ${APP_DIR}/
+COPY . ${APP_DIR}/
+RUN chown -R node ${APP_DIR}/
+USER node
+WORKDIR ${APP_DIR}
+ENV NEXT_PUBLIC_NEXTAUTH_URL https://lc.digiresilience.org
+RUN npm install
+RUN npm run build
+
+FROM public.ecr.aws/bitnami/node:16-debian-10
+ARG BUILD_DATE
+ARG VERSION
+LABEL maintainer="Darren Clarke <darren@redaranj.com>"
+LABEL org.label-schema.build-date=$BUILD_DATE
+LABEL org.label-schema.version=$VERSION
+ARG APP_DIR=/opt/leafcutter
+ENV APP_DIR ${APP_DIR}
+
+RUN DEBIAN_FRONTEND=noninteractive apt-get update && \
+    apt-get install -y --no-install-recommends \
+    dumb-init
+RUN useradd -u 1001 -g root node
+RUN mkdir -p ${APP_DIR}
+RUN chown -R node ${APP_DIR}/
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+USER node
+WORKDIR ${APP_DIR}
+COPY --from=builder ${APP_DIR}/node_modules ./node_modules
+COPY --from=builder ${APP_DIR}/.next ./.next
+COPY --from=builder ${APP_DIR}/next.config.js ./next.config.js
+EXPOSE 3000
+ENV PORT 3000
+ENV NODE_ENV production
+COPY package.json ./
+ENTRYPOINT ["/docker-entrypoint.sh"]

apps/leafcutter/LICENSE.md

@@ -0,0 +1,616 @@
+### GNU AFFERO GENERAL PUBLIC LICENSE
+
+Version 3, 19 November 2007
+
+Copyright (C) 2007 Free Software Foundation, Inc.
+<https://fsf.org/>
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+### Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains
+free software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing
+under this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+### TERMS AND CONDITIONS
+
+#### 0. Definitions.
+
+"This License" refers to version 3 of the GNU Affero General Public
+License.
+
+"Copyright" also means copyright-like laws that apply to other kinds
+of works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of
+an exact copy. The resulting work is called a "modified version" of
+the earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user
+through a computer network, with no transfer of a copy, is not
+conveying.
+
+An interactive user interface displays "Appropriate Legal Notices" to
+the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+#### 1. Source Code.
+
+The "source code" for a work means the preferred form of the work for
+making modifications to it. "Object code" means any non-source form of
+a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users can
+regenerate automatically from other parts of the Corresponding Source.
+
+The Corresponding Source for a work in source code form is that same
+work.
+
+#### 2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not convey,
+without conditions so long as your license otherwise remains in force.
+You may convey covered works to others for the sole purpose of having
+them make modifications exclusively for you, or provide you with
+facilities for running those works, provided that you comply with the
+terms of this License in conveying all material for which you do not
+control copyright. Those thus making or running the covered works for
+you must do so exclusively on your behalf, under your direction and
+control, on terms that prohibit them from making any copies of your
+copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under the
+conditions stated below. Sublicensing is not allowed; section 10 makes
+it unnecessary.
+
+#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such
+circumvention is effected by exercising rights under this License with
+respect to the covered work, and you disclaim any intention to limit
+operation or modification of the work as a means of enforcing, against
+the work's users, your or third parties' legal rights to forbid
+circumvention of technological measures.
+
+#### 4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+#### 5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these
+conditions:
+
+-   a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+-   b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under
+    section 7. This requirement modifies the requirement in section 4
+    to "keep intact all notices".
+-   c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy. This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged. This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+-   d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+#### 6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms of
+sections 4 and 5, provided that you also convey the machine-readable
+Corresponding Source under the terms of this License, in one of these
+ways:
+
+-   a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+-   b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the Corresponding
+    Source from a network server at no charge.
+-   c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source. This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+-   d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge. You need not require recipients to copy the
+    Corresponding Source along with the object code. If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source. Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+-   e) Convey the object code using peer-to-peer transmission,
+    provided you inform other peers where the object code and
+    Corresponding Source of the work are being offered to the general
+    public at no charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal,
+family, or household purposes, or (2) anything designed or sold for
+incorporation into a dwelling. In determining whether a product is a
+consumer product, doubtful cases shall be resolved in favor of
+coverage. For a particular product received by a particular user,
+"normally used" refers to a typical or common use of that class of
+product, regardless of the status of the particular user or of the way
+in which the particular user actually uses, or expects or is expected
+to use, the product. A product is a consumer product regardless of
+whether the product has substantial commercial, industrial or
+non-consumer uses, unless such uses represent the only significant
+mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to
+install and execute modified versions of a covered work in that User
+Product from a modified version of its Corresponding Source. The
+information must suffice to ensure that the continued functioning of
+the modified object code is in no case prevented or interfered with
+solely because modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or
+updates for a work that has been modified or installed by the
+recipient, or for the User Product in which it has been modified or
+installed. Access to a network may be denied when the modification
+itself materially and adversely affects the operation of the network
+or violates the rules and protocols for communication across the
+network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+#### 7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders
+of that material) supplement the terms of this License with terms:
+
+-   a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+-   b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+-   c) Prohibiting misrepresentation of the origin of that material,
+    or requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+-   d) Limiting the use for publicity purposes of names of licensors
+    or authors of the material; or
+-   e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+-   f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions
+    of it) with contractual assumptions of liability to the recipient,
+    for any liability that these contractual assumptions directly
+    impose on those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions; the
+above requirements apply either way.
+
+#### 8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your license
+from a particular copyright holder is reinstated (a) provisionally,
+unless and until the copyright holder explicitly and finally
+terminates your license, and (b) permanently, if the copyright holder
+fails to notify you of the violation by some reasonable means prior to
+60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+#### 9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or run
+a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+#### 10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+#### 11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims owned
+or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within the
+scope of its coverage, prohibits the exercise of, or is conditioned on
+the non-exercise of one or more of the rights that are specifically
+granted under this License. You may not convey a covered work if you
+are a party to an arrangement with a third party that is in the
+business of distributing software, under which you make payment to the
+third party based on the extent of your activity of conveying the
+work, and under which the third party grants, to any of the parties
+who would receive the covered work from you, a discriminatory patent
+license (a) in connection with copies of the covered work conveyed by
+you (or copies made from those copies), or (b) primarily for and in
+connection with specific products or compilations that contain the
+covered work, unless you entered into that arrangement, or that patent
+license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+#### 12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under
+this License and any other pertinent obligations, then as a
+consequence you may not convey it at all. For example, if you agree to
+terms that obligate you to collect a royalty for further conveying
+from those to whom you convey the Program, the only way you could
+satisfy both those terms and this License would be to refrain entirely
+from conveying the Program.
+
+#### 13. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your
+version supports such interaction) an opportunity to receive the
+Corresponding Source of your version by providing access to the
+Corresponding Source from a network server at no charge, through some
+standard or customary means of facilitating copying of software. This
+Corresponding Source shall include the Corresponding Source for any
+work covered by version 3 of the GNU General Public License that is
+incorporated pursuant to the following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+#### 14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU Affero General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the Program
+specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever
+published by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future versions
+of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+#### 15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
+WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
+PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
+DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
+CORRECTION.
+
+#### 16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
+CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
+ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
+NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
+LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
+TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
+PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+#### 17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+END OF TERMS AND CONDITIONS

apps/leafcutter/Makefile

@@ -0,0 +1,49 @@
+PACKAGE_NAME ?= $(shell jq -r '.name' package.json)
+PACKAGE_VERSION?= $(shell jq -r '.version' package.json)
+BUILD_DATE   ?=$(shell date -u +"%Y-%m-%dT%H:%M:%SZ")
+DOCKER_ARGS  ?=
+DOCKER_NS    ?= registry.gitlab.com/digiresilience/leafcutter/${PACKAGE_NAME}
+DOCKER_TAG   ?= test
+DOCKER_BUILD := docker build ${DOCKER_ARGS} --build-arg BUILD_DATE=${BUILD_DATE}
+DOCKER_BUILD_FRESH := ${DOCKER_BUILD} --pull --no-cache
+DOCKER_BUILD_ARGS := --build-arg VCS_REF=${CI_COMMIT_SHORT_SHA}
+DOCKER_PUSH  := docker push
+DOCKER_BUILD_TAG := ${DOCKER_NS}:${DOCKER_TAG}
+HELM_CHANNEL ?= stable
+HELM_CHART_NAME ?= ${PACKAGE_NAME}
+HELM_CHART_VERSION ?= ${PACKAGE_VERSION}
+
+.PHONY: .npmrc
+.EXPORT_ALL_VARIABLES:
+
+.npmrc:
+ifdef CI_JOB_TOKEN
+	echo '@guardianproject-ops:registry=https://gitlab.com/api/v4/packages/npm/' > .npmrc
+	echo '@digiresilience:registry=https://gitlab.com/api/v4/packages/npm/' >> .npmrc
+	echo '//gitlab.com/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}' >> .npmrc
+	echo '//gitlab.com/api/v4/projects/:_authToken=${CI_JOB_TOKEN}' >> .npmrc
+	echo '//gitlab.com/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}' >> .npmrc
+endif
+
+docker/build: .npmrc
+	DOCKER_BUILDKIT=1 ${DOCKER_BUILD} ${DOCKER_BUILD_ARGS} -t ${DOCKER_BUILD_TAG} ${PWD}
+
+docker/build-fresh: .npmrc
+	DOCKER_BUILDKIT=1 ${DOCKER_BUILD_FRESH} ${DOCKER_BUILD_ARGS} -t ${DOCKER_BUILD_TAG} ${PWD}
+
+docker/add-tag:
+	docker pull ${DOCKER_NS}:${DOCKER_TAG}
+	docker tag ${DOCKER_NS}:${DOCKER_TAG} ${DOCKER_NS}:${DOCKER_TAG_NEW}
+	docker push ${DOCKER_NS}:${DOCKER_TAG_NEW}
+
+docker/push:
+	${DOCKER_PUSH} ${DOCKER_BUILD_TAG}
+
+docker/build-push: docker/build docker/push
+docker/build-fresh-push: docker/build-fresh docker/push
+
+helm/build:
+	helm package ${PWD}/charts/
+helm/push:
+	curl --request POST --user gitlab-ci-token:${CI_JOB_TOKEN} --form "chart=@${HELM_CHART_NAME}-${HELM_CHART_VERSION}.tgz" "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/helm/api/${HELM_CHANNEL}/charts"
+helm/build-push: helm/build helm/push

apps/leafcutter/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/leafcutter/charts/.helmignore

@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

apps/leafcutter/charts/Chart.yaml

@@ -0,0 +1,6 @@
+apiVersion: v2
+name: leafcutter-web
+description: A Helm chart for Kubernetes
+type: application
+version: 0.1.51
+appVersion: "0.1.51"

apps/leafcutter/charts/templates/NOTES.txt

@@ -0,0 +1,22 @@
+1. Get the application URL by running these commands:
+{{- if .Values.ingress.enabled }}
+{{- range $host := .Values.ingress.hosts }}
+  {{- range .paths }}
+  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ .path }}
+  {{- end }}
+{{- end }}
+{{- else if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "charts.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "charts.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "charts.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "charts.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}

apps/leafcutter/charts/templates/_helpers.tpl

@@ -0,0 +1,62 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "charts.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "charts.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "charts.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "charts.labels" -}}
+helm.sh/chart: {{ include "charts.chart" . }}
+{{ include "charts.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "charts.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "charts.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "charts.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "charts.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}

apps/leafcutter/charts/templates/deployment.yaml

@@ -0,0 +1,66 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "charts.fullname" . }}
+  labels:
+    {{- include "charts.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "charts.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "charts.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "charts.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          env:
+            {{- range .Values.env }}
+            - name: {{ .name }}
+              value: {{ .value }}
+            {{- end }}
+          ports:
+            - name: http
+              containerPort: 3000
+              protocol: TCP
+          livenessProbe:
+            httpGet:
+              path: /
+              port: http
+          readinessProbe:
+            httpGet:
+              path: /
+              port: http
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

apps/leafcutter/charts/templates/hpa.yaml

@@ -0,0 +1,28 @@
+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v2beta1
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ include "charts.fullname" . }}
+  labels:
+    {{- include "charts.labels" . | nindent 4 }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ include "charts.fullname" . }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  metrics:
+    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: cpu
+        targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+    {{- end }}
+    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: memory
+        targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    {{- end }}
+{{- end }}

apps/leafcutter/charts/templates/ingress.yaml

@@ -0,0 +1,61 @@
+{{- if .Values.ingress.enabled -}}
+{{- $fullName := include "charts.fullname" . -}}
+{{- $svcPort := .Values.service.port -}}
+{{- if and .Values.ingress.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }}
+  {{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }}
+  {{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}}
+  {{- end }}
+{{- end }}
+{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1
+{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1beta1
+{{- else -}}
+apiVersion: extensions/v1beta1
+{{- end }}
+kind: Ingress
+metadata:
+  name: {{ $fullName }}
+  labels:
+    {{- include "charts.labels" . | nindent 4 }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }}
+  ingressClassName: {{ .Values.ingress.className }}
+  {{- end }}
+  {{- if .Values.ingress.tls }}
+  tls:
+    {{- range .Values.ingress.tls }}
+    - hosts:
+        {{- range .hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ .secretName }}
+    {{- end }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host | quote }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ .path }}
+            {{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }}
+            pathType: {{ .pathType }}
+            {{- end }}
+            backend:
+              {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
+              service:
+                name: {{ $fullName }}
+                port:
+                  number: {{ $svcPort }}
+              {{- else }}
+              serviceName: {{ $fullName }}
+              servicePort: {{ $svcPort }}
+              {{- end }}
+          {{- end }}
+    {{- end }}
+{{- end }}

apps/leafcutter/charts/templates/service.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "charts.fullname" . }}
+  labels:
+    {{- include "charts.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "charts.selectorLabels" . | nindent 4 }}

apps/leafcutter/charts/templates/serviceaccount.yaml

@@ -0,0 +1,12 @@
+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "charts.serviceAccountName" . }}
+  labels:
+    {{- include "charts.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end }}

apps/leafcutter/charts/templates/tests/test-connection.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "charts.fullname" . }}-test-connection"
+  labels:
+    {{- include "charts.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "charts.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never

apps/leafcutter/charts/values.yaml

@@ -0,0 +1,43 @@
+replicaCount: 1
+
+image:
+  repository: registry.gitlab.com/digiresilience/leafcutter/leafcutter-web
+  pullPolicy: IfNotPresent
+  tag: "main"
+
+imagePullSecrets: []
+
+nameOverride: ""
+
+fullnameOverride: ""
+
+env: []
+
+serviceAccount:
+  create: true
+  annotations: {}
+  name: ""
+
+podAnnotations: {}
+
+podSecurityContext: {}
+
+securityContext: {}
+
+service:
+  type: ClusterIP
+  port: 3000
+
+ingress:
+  enabled: false
+
+resources: {}
+
+autoscaling:
+  enabled: false
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}

apps/leafcutter/components/AboutBox.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { Box } from "@mui/material";
+import { useAppContext } from "./AppProvider";
+
+interface AboutBoxProps {
+  backgroundColor: string;
+}
+
+export const AboutBox: FC<AboutBoxProps> = ({ backgroundColor, children }) => {
+  const {
+    colors: { white },
+  } = useAppContext();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        backgroundColor,
+        color: white,
+        p: 4,
+        borderRadius: "10px",
+        mt: "66px",
+        mb: "22px",
+        textAlign: "center",
+      }}
+    >
+      {children}
+    </Box>
+  );
+};

apps/leafcutter/components/AboutFeature.tsx

@@ -0,0 +1,66 @@
+import { FC } from "react";
+import Image from "next/image";
+import { Grid, Box, GridSize } from "@mui/material";
+import AboutDots from "images/about-dots.png";
+import { useAppContext } from "./AppProvider";
+
+interface AboutFeatureProps {
+  title: string;
+  description: string;
+  direction: "row" | "row-reverse";
+  image: any;
+  showBackground: boolean;
+  textColumns: number;
+}
+
+export const AboutFeature: FC<AboutFeatureProps> = ({
+  title,
+  description,
+  direction,
+  image,
+  showBackground,
+  textColumns,
+}) => {
+  const {
+    typography: { h2, p },
+  } = useAppContext();
+
+  return (
+    <Box
+      sx={{
+        p: "20px",
+        mt: "40px",
+        backgroundImage: showBackground ? `url(${AboutDots.src})` : "",
+        backgroundSize: "200px 200px",
+        backgroundPosition: direction === "row" ? "20% 50%" : "80% 50%",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <Grid
+        direction={direction}
+        container
+        spacing={5}
+        alignContent="flex-start"
+      >
+        <Grid item xs={textColumns as GridSize}>
+          <Box component="h2" sx={h2}>
+            {title}
+          </Box>
+          <Box component="p" sx={p}>
+            {description}
+          </Box>
+        </Grid>
+        <Grid
+          item
+          xs={(12 - textColumns) as GridSize}
+          container
+          direction={direction}
+        >
+          <Box sx={{ width: "150px", mt: "-20px" }}>
+            <Image src={image} alt="" objectFit="contain" />
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

apps/leafcutter/components/AccountButton.tsx

@@ -0,0 +1,53 @@
+import { FC } from "react";
+import Image from "next/image";
+import { signOut } from "next-auth/react";
+import { Button, Box, Menu, MenuItem } from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import UserIcon from "images/user-icon.png";
+import {
+  usePopupState,
+  bindTrigger,
+  bindMenu,
+} from "material-ui-popup-state/hooks";
+import { useAppContext } from "./AppProvider";
+
+export const AccountButton: FC = () => {
+  const t = useTranslate();
+  const {
+    colors: { leafcutterElectricBlue },
+  } = useAppContext();
+  const popupState = usePopupState({ variant: "popover", popupId: "account" });
+
+  return (
+    <>
+      <Button
+        {...bindTrigger(popupState)}
+        color="secondary"
+        sx={{
+          backgroundColor: leafcutterElectricBlue,
+          width: "40px",
+          height: "40px",
+          minWidth: "40px",
+          p: 0,
+          borderRadius: "500px",
+          ":hover": {
+            backgroundColor: leafcutterElectricBlue,
+            opacity: 0.8,
+          },
+        }}
+      >
+        <Image src={UserIcon} alt="account" width="30px" height="30px" />
+      </Button>
+      <Menu {...bindMenu(popupState)}>
+        <MenuItem
+          onClick={() => {
+            popupState.close();
+            signOut({ callbackUrl: "/" });
+          }}
+        >
+          <Box sx={{ width: "100%" }}>{t("signOut")}</Box>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};

apps/leafcutter/components/AppProvider.tsx

@@ -0,0 +1,147 @@
+import { FC, createContext, useContext, useReducer, useState } from "react";
+import { colors, typography } from "styles/theme";
+
+const basePath = process.env.GITLAB_CI ? "/leafcutter/leafcutter-web" : "";
+const imageURL = (image: any) =>
+  typeof image === "string" ? `${basePath}${image}` : `${basePath}${image.src}`;
+
+const AppContext = createContext({
+  colors,
+  typography,
+  imageURL,
+  query: null,
+  updateQuery: null,
+  updateQueryType: null,
+  replaceQuery: null,
+  clearQuery: null,
+  foundCount: 0,
+  setFoundCount: null,
+});
+
+export const AppProvider: FC = ({ children }) => {
+  const initialState = {
+    incidentType: {
+      display: "Incident Type",
+      queryType: "include",
+      values: [],
+    },
+    relativeDate: {
+      display: "Relative Date",
+      queryType: null,
+      values: [],
+    },
+    startDate: {
+      display: "Start Date",
+      queryType: null,
+      values: [],
+    },
+    endDate: {
+      display: "End Date",
+      queryType: null,
+      values: [],
+    },
+    targetedGroup: {
+      display: "Targeted Group",
+      queryType: "include",
+      values: [],
+    },
+    platform: {
+      display: "Platform",
+      queryType: "include",
+      values: [],
+    },
+    device: {
+      display: "Device",
+      queryType: "include",
+      values: [],
+    },
+    service: {
+      display: "Service",
+      queryType: "include",
+      values: [],
+    },
+    maker: {
+      display: "Maker",
+      queryType: "include",
+      values: [],
+    },
+    country: {
+      display: "Country",
+      queryType: "include",
+      values: [],
+    },
+    subregion: {
+      display: "Subregion",
+      queryType: "include",
+      values: [],
+    },
+    continent: {
+      display: "Continent",
+      queryType: "include",
+      values: [],
+    },
+  };
+  const reducer = (state: any, action: any) => {
+    const key = action.payload ? Object.keys(action.payload)[0] : null;
+    const newState = { ...state };
+    switch (action.type) {
+      case "UPDATE":
+        newState[key].values = action.payload[key].values;
+        return newState;
+      case "UPDATE_TYPE":
+        newState[key].queryType = action.payload[key].queryType;
+        return newState;
+      case "REPLACE":
+        return Object.keys(action.payload).reduce((acc: any, cur: string) => {
+          if (["startDate", "endDate"].includes(cur)) {
+            const rawDate = action.payload[cur].values[0];
+            const date = new Date(rawDate);
+            acc[cur] = {
+              ...action.payload[cur],
+              values: rawDate && date ? [date] : [],
+            };
+          } else {
+            acc[cur] = action.payload[cur];
+          }
+
+          return acc;
+        }, {});
+      case "CLEAR":
+        return initialState;
+      default:
+        throw new Error("Unknown action type");
+    }
+  };
+
+  const [query, dispatch] = useReducer(reducer, initialState);
+  const updateQuery = (payload: any) => dispatch({ type: "UPDATE", payload });
+  const updateQueryType = (payload: any) =>
+    dispatch({ type: "UPDATE_TYPE", payload });
+  const replaceQuery = (payload: any) => dispatch({ type: "REPLACE", payload });
+  const clearQuery = () => dispatch({ type: "CLEAR" });
+  const [foundCount, setFoundCount] = useState(0);
+
+  return (
+    <AppContext.Provider
+      // eslint-disable-next-line react/jsx-no-constructed-context-values
+      value={{
+        colors,
+        typography,
+        imageURL,
+        query,
+        updateQuery,
+        updateQueryType,
+        replaceQuery,
+        clearQuery,
+        foundCount,
+        setFoundCount,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export function useAppContext() {
+  return useContext(AppContext);
+}

apps/leafcutter/components/Button.tsx

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import Link from "next/link";
+import { Button as MUIButton } from "@mui/material";
+import { useAppContext } from "./AppProvider";
+
+interface ButtonProps {
+  text: string;
+  color: string;
+  href: string;
+}
+
+export const Button: FC<ButtonProps> = ({ text, color, href }) => {
+  const {
+    colors: { white, almostBlack },
+  } = useAppContext();
+
+  return (
+    <Link href={href} passHref>
+      <MUIButton
+        variant="contained"
+        disableElevation
+        sx={{
+          fontFamily: "Poppins, sans-serif",
+          fontWeight: 700,
+          color:
+            color === white
+              ? `${almostBlack} !important`
+              : `${white} !important`,
+          borderRadius: 999,
+          backgroundColor: color,
+          padding: "6px 30px",
+          margin: "20px 0px",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {text}
+      </MUIButton>
+    </Link>
+  );
+};

apps/leafcutter/components/Footer.tsx

@@ -0,0 +1,113 @@
+import { FC } from "react";
+import { Container, Grid, Box, Button } from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import Image from "next/image";
+import Link from "next/link";
+import leafcutterLogo from "images/leafcutter-logo.png";
+import footerLogo from "images/footer-logo.png";
+import twitterLogo from "images/twitter-logo.png";
+import gitlabLogo from "images/gitlab-logo.png";
+import { useAppContext } from "./AppProvider";
+
+export const Footer: FC = () => {
+  const t = useTranslate();
+  const {
+    colors: { white, leafcutterElectricBlue },
+    typography: { bodySmall },
+  } = useAppContext();
+  const smallLinkStyles: any = {
+    ...bodySmall,
+    color: white,
+    textTransform: "none",
+  };
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: leafcutterElectricBlue,
+        backgroundImage: `url(${footerLogo})`,
+        backgroundBlendMode: "overlay",
+        backgroundPosition: "bottom left",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "30%",
+        marginTop: "40px",
+        marginLeft: "300px",
+      }}
+    >
+      <Container sx={{ pt: 4, pb: 4 }}>
+        <Grid
+          container
+          direction="row"
+          wrap="nowrap"
+          justifyContent="space-between"
+        >
+          <Grid
+            item
+            container
+            direction="row"
+            wrap="nowrap"
+            sx={{ maxHeight: "auto" }}
+          >
+            <Grid item sx={{ width: 50, ml: 2, mr: 4 }}>
+              <Image src={leafcutterLogo} alt="CDR logo" />
+            </Grid>
+          </Grid>
+          <Grid item sx={{ color: "white" }}>
+            {t("contactUs")}
+          </Grid>
+        </Grid>
+      </Container>
+
+      <Box sx={{ backgroundColor: leafcutterElectricBlue }}>
+        <Container>
+          <Grid
+            item
+            container
+            direction="row"
+            justifyContent="space-between"
+            wrap="nowrap"
+            alignItems="center"
+          >
+            <Grid
+              item
+              container
+              direction="row"
+              spacing={1}
+              alignItems="center"
+            >
+              <Grid item>
+                <Box component="p" sx={{ ...bodySmall, color: white }}>
+                  ©️ {t("copyright")}
+                </Box>
+              </Grid>
+              <Grid item>
+                <Link href="/about/privacy" passHref>
+                  <Button variant="text" sx={smallLinkStyles}>
+                    {t("privacyPolicy")}
+                  </Button>
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="/about/code-practice" passHref>
+                  <Button variant="text" sx={smallLinkStyles}>
+                    {t("codeOfPractice")}
+                  </Button>
+                </Link>
+              </Grid>
+            </Grid>
+            <Grid item sx={{ width: 40, p: 1, pl: 0 }}>
+              <a href="https://gitlab.com/digiresilience">
+                <Image src={gitlabLogo} alt="Gitlab logo" />
+              </a>
+            </Grid>
+            <Grid item sx={{ width: 40, p: 1, pr: 0 }}>
+              <a href="https://twitter.com/cdr_tech">
+                <Image src={twitterLogo} alt="Twitter logo" />
+              </a>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+    </Box>
+  );
+};

apps/leafcutter/components/GettingStartedDialog.tsx

@@ -0,0 +1,122 @@
+import { FC, useState } from "react";
+import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { useRouter } from "next/router";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "./AppProvider";
+
+const CheckboxItem = ({ title, description, checked, onChange }) => {
+  const {
+    typography: { p, small },
+  } = useAppContext();
+
+  return (
+    <Grid item container spacing={0}>
+      <Grid
+        item
+        container
+        spacing={0}
+        sx={{ backgroundColor: "white" }}
+        wrap="nowrap"
+      >
+        <Grid item xs={1}>
+          <Checkbox checked={checked} onChange={onChange} sx={{ mt: "-8px" }} />
+        </Grid>
+        <Grid
+          item
+          container
+          direction="column"
+          spacing={0}
+          xs={11}
+          sx={{ pl: 2 }}
+        >
+          <Grid item>
+            <Box sx={{ ...p, fontWeight: "bold" }}>{title}</Box>
+          </Grid>
+          <Grid item>
+            <Box sx={small}>{description}</Box>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export const GettingStartedDialog: FC = () => {
+  const {
+    colors: { almostBlack },
+    typography: { h4 },
+  } = useAppContext();
+  const t = useTranslate();
+  const [completedItems, setCompletedItems] = useState([]);
+  const router = useRouter();
+  const open = router.query.tooltip?.toString() === "checklist";
+  const toggleCompletedItem = (item) => {
+    if (completedItems.includes(item)) {
+      setCompletedItems(completedItems.filter((i) => i !== item));
+    } else {
+      setCompletedItems([...completedItems, item]);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      maxWidth="xs"
+      PaperProps={{
+        sx: { position: "absolute", bottom: 8, right: 8, borderRadius: 3 },
+      }}
+      hideBackdrop
+      disableEnforceFocus
+      disableAutoFocus
+      onBackdropClick={undefined}
+    >
+      <Grid container direction="column" spacing={2} sx={{ p: 3 }}>
+        <Grid item>
+          <Grid container direction="row" justifyContent="space-between">
+            <Grid item>
+              <Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
+            </Grid>
+            <Grid item>
+              <IconButton onClick={() => router.push(router.pathname)}>
+                <CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
+              </IconButton>
+            </Grid>
+          </Grid>
+          <Grid container direction="column" spacing={2}>
+            <CheckboxItem
+              title={t("searchTitle")}
+              description={t("searchDescription")}
+              checked={completedItems.includes("search")}
+              onChange={() => toggleCompletedItem("search")}
+            />
+            <CheckboxItem
+              title={t("createVisualizationTitle")}
+              description={t("createVisualizationDescription")}
+              checked={completedItems.includes("create")}
+              onChange={() => toggleCompletedItem("create")}
+            />
+            <CheckboxItem
+              title={t("saveTitle")}
+              description={t("saveDescription")}
+              checked={completedItems.includes("save")}
+              onChange={() => toggleCompletedItem("save")}
+            />
+            <CheckboxItem
+              title={t("exportTitle")}
+              description={t("exportDescription")}
+              checked={completedItems.includes("export")}
+              onChange={() => toggleCompletedItem("export")}
+            />
+            <CheckboxItem
+              title={t("shareTitle")}
+              description={t("shareDescription")}
+              checked={completedItems.includes("share")}
+              onChange={() => toggleCompletedItem("share")}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Dialog>
+  );
+};

apps/leafcutter/components/HelpButton.tsx

@@ -0,0 +1,42 @@
+import { FC, useState } from "react";
+import { useRouter } from "next/router";
+import { Button } from "@mui/material";
+import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
+import { useAppContext } from "./AppProvider";
+
+export const HelpButton: FC = () => {
+  const router = useRouter();
+  const [helpActive, setHelpActive] = useState(false);
+  const {
+    colors: { leafcutterElectricBlue },
+  } = useAppContext();
+  const onClick = () => {
+    if (helpActive) {
+      router.push(router.pathname);
+    } else {
+      router.push("/?tooltip=welcome");
+    }
+    setHelpActive(!helpActive);
+  };
+
+  return (
+    <Button
+      color="primary"
+      onClick={onClick}
+      sx={{
+        backgroundColor: leafcutterElectricBlue,
+        width: "40px",
+        height: "40px",
+        minWidth: "40px",
+        p: 0,
+        borderRadius: "500px",
+        ":hover": {
+          backgroundColor: leafcutterElectricBlue,
+          opacity: 0.8,
+        },
+      }}
+    >
+      <QuestionMarkIcon width="30px" height="30px" htmlColor="white" />
+    </Button>
+  );
+};

apps/leafcutter/components/LanguageSelect.tsx

@@ -0,0 +1,65 @@
+import { useRouter } from "next/router";
+import { IconButton, Menu, MenuItem, Box } from "@mui/material";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from "@mui/icons-material";
+import {
+  usePopupState,
+  bindTrigger,
+  bindMenu,
+} from "material-ui-popup-state/hooks";
+import { useAppContext } from "./AppProvider";
+// import { Tooltip } from "./Tooltip";
+
+export const LanguageSelect = () => {
+  const {
+    colors: { white, leafcutterElectricBlue },
+  } = useAppContext();
+  const router = useRouter();
+  const locales = { en: "English", fr: "Français" };
+  const popupState = usePopupState({ variant: "popover", popupId: "language" });
+
+  return (
+    <Box>
+      <IconButton
+        {...bindTrigger(popupState)}
+        sx={{
+          fontSize: 14,
+          borderRadius: 500,
+          color: white,
+          backgroundColor: leafcutterElectricBlue,
+          fontWeight: "bold",
+          textTransform: "uppercase",
+          pl: 4,
+          pr: 3,
+          ":hover": {
+            backgroundColor: leafcutterElectricBlue,
+            opacity: 0.8,
+          },
+        }}
+      >
+        {locales[router.locale] ?? locales.en}
+        <KeyboardArrowDownIcon />
+      </IconButton>
+      <Menu {...bindMenu(popupState)}>
+        {Object.keys(locales).map((locale) => (
+          <MenuItem
+            key={locale}
+            onClick={() => {
+              router.push(router.route, router.route, { locale });
+              popupState.close();
+            }}
+          >
+            <Box sx={{ width: 130 }}>{locales[locale]}</Box>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+};
+
+/*  <Tooltip
+      title={t("languageTooltipTitle")}
+      description={t("languageTooltipDescription")}
+      color="#fff"
+      backgroundColor="#a5a6f6"
+      placement="top"
+  > </Tooltip> */

apps/leafcutter/components/Layout.tsx

@@ -0,0 +1,60 @@
+import { Grid, Container } from "@mui/material";
+import CookieConsent from "react-cookie-consent";
+import { useCookies } from "react-cookie";
+import { TopNav } from "./TopNav";
+import { Sidebar } from "./Sidebar";
+import { GettingStartedDialog } from "./GettingStartedDialog";
+import { useAppContext } from "./AppProvider";
+// import { Footer } from "./Footer";
+
+export const Layout = ({ children }) => {
+  const [cookies, setCookie] = useCookies(["cookieConsent"]);
+  const consentGranted = cookies.cookieConsent === "true";
+  const {
+    colors: {
+      white,
+      almostBlack,
+      leafcutterElectricBlue,
+      cdrLinkOrange,
+      helpYellow,
+    },
+  } = useAppContext();
+
+  return (
+    <>
+      <Grid container direction="column">
+        <Grid item>
+          <TopNav />
+        </Grid>
+        <Sidebar open />
+        <Grid item sx={{ mt: "100px", ml: "310px" }}>
+          <Container sx={{ padding: 2 }}>{children}</Container>
+        </Grid>
+        <Grid item>{/*          <Footer /> */}</Grid>
+      </Grid>
+      {!consentGranted ? (
+        <CookieConsent
+          style={{
+            zIndex: 1500,
+            backgroundColor: helpYellow,
+            color: almostBlack,
+            borderTop: `1px solid ${leafcutterElectricBlue}`,
+          }}
+          onAccept={() => setCookie("cookieConsent", "true", { path: "/" })}
+          buttonStyle={{
+            borderRadius: 500,
+            backgroundColor: cdrLinkOrange,
+            color: white,
+            textTransform: "uppercase",
+            padding: "10px 20px",
+            fontWeight: "bold",
+            fontSize: 14,
+          }}
+        >
+          Leafcutter uses cookies for core funtionality.
+        </CookieConsent>
+      ) : null}
+      <GettingStartedDialog />
+    </>
+  );
+};

apps/leafcutter/components/LiveDataViewer.tsx

@@ -0,0 +1,22 @@
+import { FC, useEffect, useState } from "react";
+import { useAppContext } from "./AppProvider";
+import { RawDataViewer } from "./RawDataViewer";
+
+export const LiveDataViewer: FC = () => {
+  const { query, setFoundCount } = useAppContext();
+  const [rows, setRows] = useState<any[]>([]);
+  const searchQuery = encodeURI(JSON.stringify(query));
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await fetch(
+        `/api/visualizations/query?searchQuery=${searchQuery}`
+      );
+      const json = await result.json();
+      setRows(json);
+      setFoundCount(json?.length ?? 0);
+    };
+    fetchData();
+  }, [searchQuery, setFoundCount]);
+
+  return <RawDataViewer rows={rows} height={350} />;
+};

apps/leafcutter/components/MetricSelectCard.tsx

@@ -0,0 +1,148 @@
+import { FC, useState } from "react";
+import { Card, Grid } from "@mui/material";
+import {
+  PrivacyTip as PrivacyTipIcon,
+  PhoneIphone as PhoneIphoneIcon,
+  Map as MapIcon,
+  Group as GroupIcon,
+  DateRange as DateRangeIcon,
+  Public as PublicIcon,
+} from "@mui/icons-material";
+import { VisualizationDetailDialog } from "./VisualizationDetailDialog";
+import { useAppContext } from "./AppProvider";
+
+interface MetricSelectCardProps {
+  visualizationID: string;
+  metricType: string;
+  title: string;
+  description: string;
+  enabled: boolean;
+}
+
+export const MetricSelectCard: FC<MetricSelectCardProps> = ({
+  visualizationID,
+  metricType,
+  title,
+  description,
+  enabled,
+}) => {
+  const [open, setOpen] = useState(false);
+  const closeDialog = () => setOpen(false);
+  const [dialogParams, setDialogParams] = useState<any>({});
+  const {
+    typography: { small },
+    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
+    query,
+  } = useAppContext();
+  /*   const images = {
+    actor: PrivacyTipIcon,
+    incidenttype: PrivacyTipIcon,
+    channel: PrivacyTipIcon,
+    date: DateRangeIcon,
+    targetedgroup: GroupIcon,
+    impactedtechnology: PhoneIphoneIcon,
+    location: MapIcon,
+  }; */
+
+  const createAndOpen = async () => {
+    const createParams = {
+      visualizationID,
+      title,
+      description,
+      query,
+    };
+    const result: any = await fetch(`/api/visualizations/create`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(createParams),
+    });
+
+    const { id } = await result.json();
+    const params = {
+      id,
+      title: createParams.title,
+      description: createParams.description,
+      url: `/app/visualize?security_tenant=private#/edit/${id}?embed=true`,
+    };
+    setDialogParams(params);
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          height: "100px",
+          backgroundColor: enabled ? leafcutterElectricBlue : white,
+          borderRadius: "10px",
+          padding: "10px",
+          opacity: enabled ? 1 : 0.5,
+          cursor: enabled ? "pointer" : "default",
+          "&:hover": {
+            backgroundColor: enabled ? cdrLinkOrange : white,
+          },
+        }}
+        elevation={enabled ? 2 : 0}
+        onClick={createAndOpen}
+      >
+        <Grid
+          direction="column"
+          container
+          justifyContent="space-around"
+          alignContent="center"
+          alignItems="center"
+          wrap="nowrap"
+          sx={{ height: "100%" }}
+          spacing={0}
+        >
+          <Grid
+            item
+            sx={{
+              ...small,
+              textAlign: "center",
+              color: enabled ? white : leafcutterElectricBlue,
+            }}
+          >
+            {title}
+          </Grid>
+          <Grid item>
+            {metricType === "impactedtechnology" && (
+              <PhoneIphoneIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+            {metricType === "region" && (
+              <PublicIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+            {metricType === "continent" && (
+              <PublicIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+            {metricType === "country" && (
+              <MapIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+            {metricType === "targetedgroup" && (
+              <GroupIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+            {metricType === "incidenttype" && (
+              <PrivacyTipIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+            {metricType === "date" && (
+              <DateRangeIcon fontSize="large" sx={{ color: "white" }} />
+            )}
+          </Grid>
+        </Grid>
+      </Card>
+      {open ? (
+        <VisualizationDetailDialog
+          id={dialogParams.id}
+          title={dialogParams.title}
+          description={dialogParams.description}
+          url={dialogParams.url}
+          closeDialog={closeDialog}
+          editing
+        />
+      ) : null}
+    </>
+  );
+};

apps/leafcutter/components/OpenSearchWrapper.tsx

@@ -0,0 +1,42 @@
+import { FC } from "react";
+import Iframe from "react-iframe";
+import { Box } from "@mui/material";
+
+interface OpenSearchWrapperProps {
+  url: string;
+  marginTop: string;
+}
+
+export const OpenSearchWrapper: FC<OpenSearchWrapperProps> = ({
+  url,
+  marginTop,
+}) => (
+  <Box sx={{ position: "relative", marginTop: "-100px" }}>
+    <Box
+      sx={{
+        width: "100%",
+        height: "100px",
+        marginTop: "-20px",
+        backgroundColor: "white",
+        zIndex: 100,
+        position: "relative",
+      }}
+    />
+    <Box
+      sx={{
+        marginTop,
+        zIndex: 1,
+        position: "relative",
+        height: "100vh",
+      }}
+    >
+      <Iframe
+        id="opensearch"
+        url={`${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`}
+        width="100%"
+        height="100%"
+        frameBorder={0}
+      />
+    </Box>
+  </Box>
+);

apps/leafcutter/components/PageHeader.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/require-default-props */
+import { FC } from "react";
+import { Box } from "@mui/material";
+import { useAppContext } from "./AppProvider";
+
+interface PageHeaderProps {
+  backgroundColor: string;
+  sx?: any;
+}
+
+export const PageHeader: FC<PageHeaderProps> = ({
+  backgroundColor,
+  sx = {},
+  children,
+}) => {
+  const {
+    colors: { white },
+  } = useAppContext();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        backgroundColor,
+        color: white,
+        p: 3,
+        borderRadius: "10px",
+        mb: "22px",
+        minHeight: "100px",
+        zIndex: 1000,
+        position: "relative",
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};

apps/leafcutter/components/QueryBuilder.tsx

@@ -0,0 +1,249 @@
+import { FC, useState } from "react";
+import {
+  Box,
+  Grid,
+  Dialog,
+  DialogActions,
+  Button,
+  DialogContent,
+} from "@mui/material";
+import {
+  PrivacyTip as PrivacyTipIcon,
+  DateRange as DateRangeIcon,
+  PhoneIphone as PhoneIphoneIcon,
+  Map as MapIcon,
+  Group as GroupIcon,
+} from "@mui/icons-material";
+import { useTranslate } from "react-polyglot";
+import taxonomy from "config/taxonomy.json";
+import { QueryBuilderSection } from "./QueryBuilderSection";
+import { QueryListSelector } from "./QueryListSelector";
+import { QueryDateRangeSelector } from "./QueryDateRangeSelector";
+import { useAppContext } from "./AppProvider";
+import { Tooltip } from "./Tooltip";
+
+interface QueryBuilderProps {}
+
+export const QueryBuilder: FC<QueryBuilderProps> = () => {
+  const t = useTranslate();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const {
+    typography: { p },
+    colors: { leafcutterElectricBlue, mediumGray, almostBlack },
+  } = useAppContext();
+
+  const openAdvancedOptions = () => {
+    setDialogOpen(false);
+    window.open(`/app/visualize`, "_ blank");
+  };
+
+  return (
+    <Box sx={{ mb: 6 }}>
+      <Grid container direction="row" spacing={2}>
+        <Tooltip
+          title={t("categoriesCardTitle")}
+          description={t("categoriesCardDescription")}
+          tooltipID="categories"
+          placement="left"
+          previousURL="/create?tooltip=searchCreate"
+          nextURL="/create?tooltip=dateRange"
+        >
+          <Box sx={{ width: 0 }} />
+        </Tooltip>
+        <QueryBuilderSection
+          width={4}
+          name={t("incidentType")}
+          keyName="incidentType"
+          Image={PrivacyTipIcon}
+          showQueryType
+          tooltipTitle={t("incidentTypeCardTitle")}
+          tooltipDescription={t("incidentTypeCardDescription")}
+        >
+          <Grid container>
+            <QueryListSelector
+              title={t("type")}
+              keyName="incidentType"
+              values={taxonomy.incidentType}
+              width={12}
+            />
+          </Grid>
+        </QueryBuilderSection>
+        <Tooltip
+          title={t("dateRangeCardTitle")}
+          description={t("dateRangeCardDescription")}
+          tooltipID="dateRange"
+          placement="top"
+          previousURL="/create?tooltip=categories"
+          nextURL="/create?tooltip=subcategories"
+        >
+          <Box sx={{ width: 0 }} />
+        </Tooltip>
+        <QueryBuilderSection
+          width={4}
+          name={t("date")}
+          keyName="date"
+          Image={DateRangeIcon}
+          tooltipTitle={t("dateRangeCardTitle")}
+          tooltipDescription={t("dateRangeCardDescription")}
+        >
+          <QueryDateRangeSelector />
+        </QueryBuilderSection>
+        <QueryBuilderSection
+          width={4}
+          name={t("targetedGroup")}
+          keyName="targetedGroup"
+          Image={GroupIcon}
+          showQueryType
+          tooltipTitle={t("targetedGroupCardTitle")}
+          tooltipDescription={t("targetedGroupCardDescription")}
+        >
+          <Grid container>
+            <QueryListSelector
+              title={t("group")}
+              keyName="targetedGroup"
+              values={taxonomy.targetedGroup}
+              width={12}
+            />
+          </Grid>
+        </QueryBuilderSection>
+        <Tooltip
+          title={t("subcategoriesCardTitle")}
+          description={t("subcategoriesCardDescription")}
+          tooltipID="subcategories"
+          placement="top"
+          previousURL="/create?tooltip=dateRange"
+          nextURL="/create?tooltip=advancedOptions"
+        >
+          <Box sx={{ width: 0 }} />
+        </Tooltip>
+        <QueryBuilderSection
+          width={12}
+          name={t("impactedTechnology")}
+          keyName="impactedTechnology"
+          Image={PhoneIphoneIcon}
+          showQueryType
+          tooltipTitle={t("impactedTechnologyCardTitle")}
+          tooltipDescription={t("impactedTechnologyCardDescription")}
+        >
+          <Grid container spacing={2}>
+            <QueryListSelector
+              title={t("platform")}
+              keyName="platform"
+              values={taxonomy.platform}
+              width={3}
+            />
+            <QueryListSelector
+              title={t("device")}
+              keyName="device"
+              values={taxonomy.device}
+              width={3}
+            />
+            <QueryListSelector
+              title={t("service")}
+              keyName="service"
+              values={taxonomy.service}
+              width={3}
+            />
+            <QueryListSelector
+              title={t("maker")}
+              keyName="maker"
+              values={taxonomy.maker}
+              width={3}
+            />
+          </Grid>
+        </QueryBuilderSection>
+        <QueryBuilderSection
+          width={12}
+          name={t("region")}
+          keyName="region"
+          Image={MapIcon}
+          showQueryType
+          tooltipTitle={t("regionCardTitle")}
+          tooltipDescription={t("regionCardDescription")}
+        >
+          <Grid container spacing={2}>
+            <QueryListSelector
+              title={t("continent")}
+              keyName="continent"
+              values={taxonomy.continent}
+              width={4}
+            />
+            <QueryListSelector
+              title={t("country")}
+              keyName="country"
+              values={taxonomy.country}
+              width={4}
+            />
+            <QueryListSelector
+              title={t("subregion")}
+              keyName="subregion"
+              values={taxonomy.subregion}
+              width={4}
+            />
+          </Grid>
+        </QueryBuilderSection>
+        <Grid item xs={12}>
+          <Tooltip
+            title={t("advancedOptionsCardTitle")}
+            description={t("advancedOptionsCardDescription")}
+            tooltipID="advancedOptions"
+            placement="top"
+            previousURL="/create?tooltip=subcategories"
+            nextURL="/create?tooltip=queryResults"
+          >
+            <Button
+              sx={{
+                ...p,
+                color: leafcutterElectricBlue,
+                textDecoration: "underline",
+                textTransform: "none",
+                fontWeight: "bold",
+              }}
+              onClick={() => setDialogOpen(true)}
+            >
+              {`+ ${t("advancedOptions")}`}
+            </Button>
+          </Tooltip>
+        </Grid>
+      </Grid>
+      <Dialog open={dialogOpen}>
+        <DialogContent sx={{ maxWidth: 350 }}>
+          {t("fullInterfaceWillOpen")}
+        </DialogContent>
+        <DialogActions>
+          <Grid
+            container
+            direction="row"
+            justifyContent="space-between"
+            wrap="nowrap"
+            sx={{ pl: 2, pr: 2, pt: 1, pb: 1 }}
+          >
+            <Grid item>
+              <Button
+                sx={{
+                  backgroundColor: mediumGray,
+                  color: almostBlack,
+                }}
+                variant="contained"
+                size="small"
+                onClick={() => setDialogOpen(false)}
+              >
+                {t("cancel")}
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                sx={{ backgroundColor: leafcutterElectricBlue }}
+                variant="contained"
+                size="small"
+                onClick={openAdvancedOptions}
+              >
+                {t("open")}
+              </Button>
+            </Grid>
+          </Grid>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};

apps/leafcutter/components/QueryBuilderSection.tsx

@@ -0,0 +1,221 @@
+import { FC, useState } from "react";
+import {
+  Box,
+  Grid,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Button,
+  ButtonGroup,
+  IconButton,
+  Tooltip as MUITooltip,
+} from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import {
+  ExpandMore as ExpandMoreIcon,
+  Help as HelpIcon,
+} from "@mui/icons-material";
+import { useAppContext } from "./AppProvider";
+
+interface QueryBuilderSectionProps {
+  name: string;
+  keyName: string;
+  children: any;
+  Image: any;
+  width: number;
+  // eslint-disable-next-line react/require-default-props
+  showQueryType?: boolean;
+  tooltipTitle: string;
+  tooltipDescription: string;
+}
+
+const Tooltip = ({ title, description, children, open }) => {
+  const {
+    colors: { white, leafcutterElectricBlue, almostBlack },
+    typography: { h5, small },
+  } = useAppContext();
+
+  return (
+    <MUITooltip
+      open={open}
+      title={
+        <Box sx={{ width: 300, p: 2, pt: 1 }}>
+          <Grid container direction="column">
+            <Grid
+              item
+              sx={{
+                ...h5,
+                textTransform: "none",
+                textAlign: "left",
+                fontWeight: 700,
+                ml: 0,
+                color: leafcutterElectricBlue,
+              }}
+            >
+              {title}
+            </Grid>
+            <Grid item sx={{ ...small, color: almostBlack }}>
+              {description}
+            </Grid>
+          </Grid>
+        </Box>
+      }
+      arrow
+      placement="top"
+      componentsProps={{
+        tooltip: {
+          sx: {
+            backgroundColor: white,
+            boxShadow: "0px 6px 8px rgba(0,0,0,0.5)",
+          },
+        },
+        arrow: {
+          sx: {
+            color: "white",
+            fontSize: "22px",
+          },
+        },
+      }}
+    >
+      {children}
+    </MUITooltip>
+  );
+};
+
+export const QueryBuilderSection: FC<QueryBuilderSectionProps> = ({
+  name,
+  keyName,
+  children,
+  Image,
+  width,
+  showQueryType = false,
+  tooltipTitle,
+  tooltipDescription,
+}) => {
+  const t = useTranslate();
+  const [queryType, setQueryType] = useState("include");
+  const [showTooltip, setShowTooltip] = useState(false);
+  const {
+    colors: { white, leafcutterElectricBlue, warningPink, almostBlack },
+    typography: { h6, small },
+    updateQueryType,
+  } = useAppContext();
+  const updateType = (type: string) => {
+    setQueryType(type);
+    updateQueryType({
+      [keyName]: { queryType: type },
+    });
+  };
+
+  const minHeight = "42px";
+  const maxHeight = "42px";
+
+  return (
+    <Grid item xs={width}>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
+          sx={{
+            backgroundColor: leafcutterElectricBlue,
+            height: "14px",
+            minHeight,
+            maxHeight,
+            "&.Mui-expanded": {
+              minHeight,
+              maxHeight,
+            },
+          }}
+        >
+          <Grid container direction="row" alignItems="center">
+            <Grid item>
+              <Image
+                sx={{ color: white, fontSize: 24, mr: "8px", mt: "2px" }}
+                alt=""
+              />
+            </Grid>
+            <Grid item>
+              <Box sx={{ ...h6, color: white, fontWeight: "bold", mt: "-2px" }}>
+                {name}
+              </Box>
+            </Grid>
+            <Grid item>
+              <Tooltip
+                open={showTooltip}
+                title={tooltipTitle}
+                description={tooltipDescription}
+              >
+                <IconButton
+                  onMouseEnter={() => setShowTooltip(true)}
+                  onMouseLeave={() => setShowTooltip(false)}
+                >
+                  <HelpIcon
+                    sx={{ color: white, width: "14px", mt: "-1px", ml: "-3px" }}
+                  />
+                </IconButton>
+              </Tooltip>
+            </Grid>
+          </Grid>
+        </AccordionSummary>
+        <AccordionDetails>
+          {showQueryType ? (
+            <Grid
+              container
+              direction="row"
+              spacing={1}
+              sx={{ mt: 0, mb: 2 }}
+              justifyContent="center"
+            >
+              <Grid item sx={{ mt: "-6px" }}>
+                <ButtonGroup>
+                  <Button
+                    variant="contained"
+                    size="small"
+                    sx={{
+                      fontSize: 10,
+                      height: 20,
+                      color: queryType === "include" ? white : almostBlack,
+                      backgroundColor:
+                        queryType === "include"
+                          ? leafcutterElectricBlue
+                          : white,
+                      "&:hover": {
+                        color: white,
+                        backgroundColor: leafcutterElectricBlue,
+                      },
+                    }}
+                    onClick={() => updateType("include")}
+                  >
+                    {t("include")}
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    size="small"
+                    sx={{
+                      fontSize: 10,
+                      height: 20,
+                      color: queryType === "exclude" ? white : almostBlack,
+                      backgroundColor:
+                        queryType === "exclude" ? warningPink : white,
+                      "&:hover": {
+                        color: white,
+                        backgroundColor: warningPink,
+                      },
+                    }}
+                    onClick={() => updateType("exclude")}
+                  >
+                    {t("exclude")}
+                  </Button>
+                </ButtonGroup>
+              </Grid>
+              <Grid item>
+                <Box sx={{ ...small, mt: "0px" }}>these items:</Box>
+              </Grid>
+            </Grid>
+          ) : null}
+          <Box>{children}</Box>
+        </AccordionDetails>
+      </Accordion>
+    </Grid>
+  );
+};

apps/leafcutter/components/QueryDateRangeSelector.tsx

@@ -0,0 +1,114 @@
+import { FC, useState, useEffect } from "react";
+import { Box, Grid, TextField, Select, MenuItem } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers-pro";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "./AppProvider";
+
+interface QueryDateRangeSelectorProps {}
+
+export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
+  const t = useTranslate();
+  const [relativeDate, setRelativeDate] = useState("");
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const { updateQuery, query } = useAppContext();
+  useEffect(() => {
+    setStartDate(query.startDate.values[0] ?? null);
+    setEndDate(query.endDate.values[0] ?? null);
+    setRelativeDate(query.relativeDate.values[0] ?? "");
+  }, [query, setStartDate, setEndDate, setRelativeDate]);
+
+  return (
+    <Box sx={{ height: 305, width: "100%", pt: 2 }}>
+      <Grid container direction="column">
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <Select
+            fullWidth
+            size="small"
+            placeholder={t("relativeDate")}
+            value={relativeDate}
+            onChange={(event: any) => {
+              setStartDate(null);
+              setEndDate(null);
+              setRelativeDate(event.target.value);
+              updateQuery({
+                startDate: { values: [] },
+              });
+              updateQuery({
+                endDate: { values: [] },
+              });
+              updateQuery({
+                relativeDate: { values: [event.target.value] },
+              });
+            }}
+          >
+            <MenuItem value={7}>{t("last7Days")}</MenuItem>
+            <MenuItem value={30}>{t("last30Days")}</MenuItem>
+            <MenuItem value={90}>{t("last3Months")}</MenuItem>
+            <MenuItem value={180}>{t("last6Months")}</MenuItem>
+            <MenuItem value={365}>{t("lastYear")}</MenuItem>
+            <MenuItem value={730}>{t("last2Years")}</MenuItem>
+          </Select>
+        </Grid>
+        <Grid item sx={{ textAlign: "center", mb: 2 }}>
+          – or –
+        </Grid>
+        <Grid item xs={12}>
+          <DatePicker
+            label={t("startDate")}
+            value={startDate}
+            onChange={(date) => {
+              setStartDate(date);
+              updateQuery({
+                startDate: { values: [date] },
+              });
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                sx={{
+                  width: "100%",
+                  color: "black",
+                  "& .MuiOutlinedInput-root": {
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                  },
+                }}
+                size="small"
+              />
+            )}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <DatePicker
+            label={t("endDate")}
+            value={endDate}
+            onChange={(date) => {
+              setEndDate(date);
+              updateQuery({
+                endDate: { values: [date] },
+              });
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                sx={{
+                  backgroundColor: "white",
+                  mt: "-1px",
+                  width: "100%",
+                  color: "black",
+                  "& .MuiOutlinedInput-root": {
+                    borderTop: 0,
+                    borderTopLeftRadius: 0,
+                    borderTopRightRadius: 0,
+                  },
+                }}
+                size="small"
+              />
+            )}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

apps/leafcutter/components/QueryListSelector.tsx

@@ -0,0 +1,92 @@
+import { FC, useState, useEffect } from "react";
+import { Box, Grid, Tooltip } from "@mui/material";
+import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
+import { useAppContext } from "./AppProvider";
+
+interface QueryListSelectorProps {
+  title: string;
+  keyName: string;
+  values: any;
+  width: number;
+}
+
+export const QueryListSelector: FC<QueryListSelectorProps> = ({
+  title,
+  keyName,
+  values,
+  width,
+}) => {
+  const [selectionModel, setSelectionModel] = useState([]);
+  const {
+    colors: { leafcutterLightBlue, pink, leafcutterElectricBlue, warningPink },
+    typography: { small },
+    query,
+    updateQuery,
+  } = useAppContext();
+  const isExclude = query[keyName]?.queryType === "exclude";
+  const columns: GridColDef[] = [
+    {
+      field: "value",
+      renderHeader: () => (
+        <Box sx={{ ...small, fontWeight: "bold" }}>{title}</Box>
+      ),
+      renderCell: ({ value, row }) => (
+        <Tooltip title={row.description}>
+          <Box sx={{ width: "100%" }}>{value}</Box>
+        </Tooltip>
+      ),
+      editable: false,
+      flex: 1,
+    },
+  ];
+  const rows = Object.keys(values).map((k) => ({
+    id: k,
+    value: values[k].display,
+    description: values[k].description,
+    category: values[k].category,
+  }));
+
+  useEffect(() => {
+    setSelectionModel(query[keyName].values);
+  }, [query, keyName, setSelectionModel]);
+
+  return (
+    <Grid item xs={width}>
+      <Box style={{ height: 280, width: "100%" }}>
+        <Grid container direction="column" spacing={2}>
+          <Grid item>
+            <DataGridPro
+              sx={{
+                height: 260,
+                "& .MuiCheckbox-root": {
+                  color: isExclude ? warningPink : leafcutterElectricBlue,
+                },
+                "& .Mui-selected": {
+                  backgroundColor: `${
+                    isExclude ? pink : leafcutterLightBlue
+                  } !important`,
+                },
+              }}
+              rows={rows}
+              columns={columns}
+              density="compact"
+              pageSize={100}
+              checkboxSelection
+              disableSelectionOnClick
+              hideFooter
+              disableColumnMenu
+              scrollbarSize={10}
+              onSelectionModelChange={(newSelectionModel) => {
+                setSelectionModel(newSelectionModel);
+                updateQuery({
+                  [keyName]: { values: newSelectionModel },
+                });
+              }}
+              selectionModel={selectionModel}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+    </Grid>
+  );
+};

apps/leafcutter/components/QueryText.tsx

@@ -0,0 +1,123 @@
+import { FC, useState, useEffect } from "react";
+import { Box, Grid } from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import taxonomy from "config/taxonomy.json";
+import { colors } from "styles/theme";
+import { useAppContext } from "./AppProvider";
+
+export const QueryText: FC = () => {
+  const t = useTranslate();
+  const {
+    typography: { h6 },
+    query: q,
+  } = useAppContext();
+
+  const displayNames = {
+    incidentType: t("incidentType"),
+    startDate: t("startDate"),
+    endDate: t("endDate"),
+    relativeDate: t("relativeDate"),
+    targetedGroup: t("targetedGroup"),
+    platform: t("platform"),
+    device: t("device"),
+    service: t("service"),
+    maker: t("maker"),
+    country: t("country"),
+    subregion: t("subregion"),
+    continent: t("continent"),
+  };
+
+  const createClause = (query: any, key: string) => {
+    const { values, queryType } = query[key];
+    const color =
+      queryType === "include"
+        ? colors.leafcutterElectricBlue
+        : colors.warningPink;
+
+    if (values.length > 0) {
+      return `where <span  style="color: ${color};"><strong>${
+        displayNames[key]
+      }</strong> ${
+        queryType === "include" ? ` ${t("is")} ` : ` ${t("isNot")} `
+      } ${values
+        .map(
+          (value: string) => `<em>${taxonomy[key]?.[value]?.display ?? ""}</em>`
+        )
+        .join(` ${t("or")} `)}</span>`;
+    }
+
+    return null;
+  };
+  const createDateClause = (query: any, key: string) => {
+    const { values } = query[key];
+    const color = colors.leafcutterElectricBlue;
+    if (values.length > 0) {
+      const range = key === "startDate" ? t("onOrAfter") : t("onOrBefore");
+      return `${t("where")} <span style="color: ${color};"><strong>${
+        displayNames[key]
+      }</strong> is ${range} <em>${values[0]?.toLocaleDateString()}</em></span>`;
+    }
+    return null;
+  };
+  const createRelativeDateClause = (query: any, key: string) => {
+    const { values } = query[key];
+    const color = colors.leafcutterElectricBlue;
+
+    if (query[key].values.length > 0) {
+      const range = t("onOrAfter");
+      return `${t("where")} <span style="color: ${color};"><strong>${
+        displayNames[key]
+      }</strong> is ${range} <em>${values[0]} days ago</em></span>`;
+    }
+    return null;
+  };
+
+  const [queryText, setQueryText] = useState(t("findAllIncidents"));
+  useEffect(() => {
+    const generateQueryText = (query: any) => {
+      const incidentClause = createClause(query, "incidentType");
+      const startDateClause = createDateClause(query, "startDate");
+      const endDateClause = createDateClause(query, "endDate");
+      const relativeDateClause = createRelativeDateClause(
+        query,
+        "relativeDate"
+      );
+      const targetedGroupClause = createClause(query, "targetedGroup");
+      const platformClause = createClause(query, "platform");
+      const deviceClause = createClause(query, "device");
+      const serviceClause = createClause(query, "service");
+      const makerClause = createClause(query, "maker");
+      const countryClause = createClause(query, "country");
+      const subregionClause = createClause(query, "subregion");
+      const continentClause = createClause(query, "continent");
+      const joinedClauses = [
+        incidentClause,
+        startDateClause,
+        endDateClause,
+        relativeDateClause,
+        targetedGroupClause,
+        platformClause,
+        deviceClause,
+        serviceClause,
+        makerClause,
+        countryClause,
+        subregionClause,
+        continentClause,
+      ]
+        .filter((clause) => clause !== null)
+        .join(" and ");
+
+      return `${t("findAllIncidents")} ${joinedClauses}`;
+    };
+    const text = generateQueryText(q);
+    setQueryText(text);
+  }, [q]);
+
+  return (
+    <Grid container direction="column">
+      <Grid item>
+        <Box sx={h6} dangerouslySetInnerHTML={{ __html: queryText }} />
+      </Grid>
+    </Grid>
+  );
+};

apps/leafcutter/components/Question.tsx

@@ -0,0 +1,79 @@
+import { FC, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import {
+  Grid,
+  Box,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from "@mui/material";
+import {
+  ChevronRight as ChevronRightIcon,
+  ExpandMore as ExpandMoreIcon,
+  Circle as CircleIcon,
+} from "@mui/icons-material";
+import { useAppContext } from "./AppProvider";
+
+interface QuestionProps {
+  question: string;
+  answer: string;
+}
+
+export const Question: FC<QuestionProps> = ({ question, answer }) => {
+  const [expanded, setExpanded] = useState(false);
+  const {
+    colors: { lavender, darkLavender },
+    typography: { h5, p },
+  } = useAppContext();
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={() => setExpanded(!expanded)}
+      elevation={0}
+      sx={{ "::before": { display: "none" } }}
+    >
+      <AccordionSummary>
+        <Grid
+          container
+          direction="row"
+          justifyContent="space-between"
+          sx={{ maxWidth: 500 }}
+        >
+          <Box component="h5" sx={h5}>
+            <CircleIcon
+              sx={{
+                fontSize: 14,
+                color: expanded ? darkLavender : lavender,
+                mr: 1,
+                mb: "-2px",
+              }}
+            />
+            {question}
+          </Box>
+          {expanded ? (
+            <ExpandMoreIcon
+              htmlColor={lavender}
+              fontSize="medium"
+              sx={{ mt: "2px" }}
+            />
+          ) : (
+            <ChevronRightIcon
+              htmlColor={lavender}
+              fontSize="medium"
+              sx={{ mt: "4px" }}
+            />
+          )}
+        </Grid>
+      </AccordionSummary>
+      <AccordionDetails sx={{ border: 0 }}>
+        <Box
+          component="p"
+          sx={{ ...p, p: 2, border: `1px solid ${lavender}`, borderRadius: 3 }}
+        >
+          <ReactMarkdown>{answer}</ReactMarkdown>
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  );
+};

apps/leafcutter/components/RawDataViewer.tsx

@@ -0,0 +1,80 @@
+import { FC } from "react";
+import { Box, Grid } from "@mui/material";
+import { DataGridPro } from "@mui/x-data-grid-pro";
+import { useTranslate } from "react-polyglot";
+
+interface RawDataViewerProps {
+  rows: any[];
+  height: number;
+}
+
+export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
+  const t = useTranslate();
+  const columns = [
+    {
+      field: "date",
+      headerName: t("date"),
+      editable: false,
+      flex: 0.7,
+      valueFormatter: ({ value }) => new Date(value).toLocaleDateString(),
+    },
+    {
+      field: "incident",
+      headerName: t("incident"),
+      editable: false,
+      flex: 1,
+    },
+    {
+      field: "technology",
+      headerName: t("technology"),
+      editable: false,
+      flex: 0.8,
+    },
+    {
+      field: "targeted_group",
+      headerName: t("targetedGroup"),
+      editable: false,
+      flex: 1.3,
+    },
+    {
+      field: "country",
+      headerName: t("country"),
+      editable: false,
+      flex: 1,
+    },
+    {
+      field: "region",
+      headerName: t("subregion"),
+      editable: false,
+      flex: 1,
+    },
+    {
+      field: "continent",
+      headerName: t("continent"),
+      editable: false,
+      flex: 1,
+    },
+  ];
+
+  return (
+    <Grid item xs={12}>
+      <Box sx={{ width: "100%", height }}>
+        <Grid container direction="column" spacing={2}>
+          <Grid item>
+            <DataGridPro
+              sx={{ width: "100%", height }}
+              rows={rows}
+              columns={columns}
+              density="compact"
+              pageSize={100}
+              disableSelectionOnClick
+              hideFooter
+              disableColumnMenu
+              scrollbarSize={10}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+    </Grid>
+  );
+};

apps/leafcutter/components/Sidebar.tsx

@@ -0,0 +1,253 @@
+import { FC } from "react";
+import DashboardMenuIcon from "images/dashboard-menu.png";
+import AboutMenuIcon from "images/about-menu.png";
+import TrendsMenuIcon from "images/trends-menu.png";
+import SearchCreateMenuIcon from "images/search-create-menu.png";
+import FAQMenuIcon from "images/faq-menu.png";
+import Image from "next/image";
+import {
+  Box,
+  Grid,
+  Typography,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Drawer,
+} from "@mui/material";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "components/AppProvider";
+import { Tooltip } from "components/Tooltip";
+// import { ArrowCircleRight as ArrowCircleRightIcon } from "@mui/icons-material";
+
+const MenuItem = ({
+  name,
+  href,
+  selected,
+  icon,
+  iconSize,
+}: // tooltipTitle,
+// tooltipDescription,
+{
+  name: string;
+  href: string;
+  selected: boolean;
+  icon: any;
+  iconSize: number;
+  // tooltipTitle: string;
+  // tooltipDescription: string;
+}) => {
+  const {
+    colors: { leafcutterLightBlue, black },
+  } = useAppContext();
+
+  return (
+    <Link href={href} passHref>
+      <ListItem
+        button
+        sx={{
+          paddingLeft: "62px",
+          backgroundColor: selected ? leafcutterLightBlue : "transparent",
+          mt: "6px",
+          "& :hover": { backgroundColor: leafcutterLightBlue },
+        }}
+      >
+        <ListItemIcon
+          sx={{
+            color: `${black} !important`,
+          }}
+        >
+          <Box
+            sx={{
+              width: iconSize,
+              height: iconSize,
+              ml: `${(20 - iconSize) / 2}px`,
+              mr: `${(20 - iconSize) / 2}px`,
+            }}
+          >
+            <Image src={icon} alt="" />
+          </Box>
+
+          <ListItemText
+            primary={
+              <Typography
+                variant="body1"
+                style={{
+                  color: "#000 !important",
+                  fontSize: 14,
+                  fontFamily: "Roboto",
+                  fontWeight: 400,
+                  marginLeft: 10,
+                  marginTop: -3,
+                }}
+              >
+                {name}
+              </Typography>
+            }
+          />
+        </ListItemIcon>
+      </ListItem>
+    </Link>
+  );
+};
+
+interface SidebarProps {
+  open: boolean;
+}
+
+export const Sidebar: FC<SidebarProps> = ({ open }) => {
+  const t = useTranslate();
+  const router = useRouter();
+  const section = router.pathname.split("/")[1];
+  const {
+    colors: { white }, //  leafcutterElectricBlue, leafcutterLightBlue,
+  } = useAppContext();
+
+  // const [recentUpdates, setRecentUpdates] = useState([]);
+
+  /*
+  useEffect(() => {
+    const getRecentUpdates = async () => {
+      const result = await fetch(`/api/trends/recent`);
+      const json = await result.json();
+      setRecentUpdates(json);
+    };
+    getRecentUpdates();
+  }, []);
+  */
+
+  return (
+    <Drawer
+      sx={{ width: 300, flexShrink: 0 }}
+      color="secondary"
+      variant="permanent"
+      anchor="left"
+      open={open}
+      PaperProps={{
+        sx: {
+          width: 300,
+          border: 0,
+          mt: "90px",
+          mb: "200px",
+        },
+      }}
+    >
+      <Grid
+        container
+        direction="column"
+        justifyContent="space-between"
+        wrap="nowrap"
+        sx={{ backgroundColor: white, height: "100%" }}
+      >
+        <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
+          <Tooltip
+            title={t("dashboardNavigationCardTitle")}
+            description={t("dashboardNavigationCardDescription")}
+            tooltipID="navigation"
+            placement="right"
+            nextURL="/?tooltip=recentUpdates"
+            previousURL="/?tooltip=welcome"
+          >
+            <List component="nav">
+              <MenuItem
+                name={t("dashboardMenuItem")}
+                href="/"
+                icon={DashboardMenuIcon}
+                iconSize={20}
+                selected={section === ""}
+              />
+              <MenuItem
+                name={t("searchAndCreateMenuItem")}
+                href="/create"
+                icon={SearchCreateMenuIcon}
+                iconSize={20}
+                selected={section === "create"}
+              />
+              <MenuItem
+                name={t("trendsMenuItem")}
+                href="/trends"
+                icon={TrendsMenuIcon}
+                iconSize={13}
+                selected={section === "trends"}
+              />
+              <MenuItem
+                name={t("faqMenuItem")}
+                href="/faq"
+                icon={FAQMenuIcon}
+                iconSize={20}
+                selected={section === "faq"}
+              />
+              <MenuItem
+                name={t("aboutMenuItem")}
+                href="/about"
+                icon={AboutMenuIcon}
+                iconSize={20}
+                selected={section === "about"}
+              />
+            </List>
+          </Tooltip>
+        </Grid>
+        {/*
+        <Tooltip
+          title={t("recentUpdatesCardTitle")}
+          description={t("recentUpdatesCardDescription")}
+          tooltipID="recentUpdates"
+          nextURL="/?tooltip=profile"
+          previousURL="/?tooltip=navigation"
+          placement="right"
+        >
+          <Grid
+            item
+            sx={{
+              overflow: "hidden",
+              backgroundColor: leafcutterLightBlue,
+              height: 350,
+            }}
+          >
+            <Typography
+              variant="body1"
+              sx={{
+                fontWeight: 700,
+                fontSize: 14,
+                backgroundColor: leafcutterElectricBlue,
+                color: white,
+                p: 2,
+              }}
+            >
+              {t("recentUpdatesTitle")}
+            </Typography>
+            {recentUpdates.map((trend, index) => (
+              <Link href={`/visualizations/${trend.id}`} passHref key={index}>
+                <Box
+                  key={index}
+                  sx={{
+                    p: 2,
+                    cursor: "pointer",
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    sx={{ color: leafcutterElectricBlue, fontWeight: 700 }}
+                  >
+                    {trend.title}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{ color: leafcutterElectricBlue }}
+                  >
+                    {trend.description}{" "}
+                    <ArrowCircleRightIcon
+                      sx={{ height: 16, width: 16, mb: "-4px" }}
+                    />
+                  </Typography>
+                </Box>
+              </Link>
+            ))}
+          </Grid>
+                </Tooltip> */}
+      </Grid>
+    </Drawer>
+  );
+};

apps/leafcutter/components/Tooltip.tsx

@@ -0,0 +1,156 @@
+/* eslint-disable react/require-default-props */
+import { FC } from "react";
+import { useRouter } from "next/router";
+import {
+  Box,
+  Grid,
+  Tooltip as MUITooltip,
+  Button,
+  IconButton,
+} from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "./AppProvider";
+
+interface TooltipProps {
+  title: string;
+  description: string;
+  placement: any;
+  tooltipID: string;
+  nextURL?: string;
+  previousURL?: string;
+  children: any;
+}
+
+export const Tooltip: FC<TooltipProps> = ({
+  title,
+  description,
+  placement,
+  tooltipID,
+  children,
+  previousURL = null,
+  nextURL = null,
+  // eslint-disable-next-line arrow-body-style
+}) => {
+  const t = useTranslate();
+  const {
+    typography: { p, small },
+    colors: { white, leafcutterElectricBlue, almostBlack },
+  } = useAppContext();
+  const router = useRouter();
+  const activeTooltip = router.query.tooltip?.toString();
+  const open = activeTooltip === tooltipID;
+  const showNavigation = true;
+
+  return (
+    <MUITooltip
+      open={open}
+      title={
+        <Grid container direction="column">
+          <Grid item container direction="row-reverse">
+            <Grid item>
+              <IconButton onClick={() => router.push(router.pathname)}>
+                <CloseIcon
+                  sx={{
+                    color: leafcutterElectricBlue,
+                    fontSize: "14px",
+                    mt: 1,
+                  }}
+                />
+              </IconButton>
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Box sx={{ p: "12px", pt: 0, mb: "6px" }}>
+              <Box sx={{ ...p, fontWeight: "bold" }}>
+                <Grid container direction="row" alignItems="center">
+                  <Grid item>{title}</Grid>
+                </Grid>
+              </Box>
+              <Box sx={{ ...small, mt: 1, color: almostBlack }}>
+                {description}
+              </Box>
+            </Box>
+          </Grid>
+          {showNavigation ? (
+            <Grid
+              item
+              container
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ p: "12px" }}
+            >
+              <Grid item>
+                {previousURL ? (
+                  <Button
+                    sx={{
+                      ...small,
+                      borderRadius: 500,
+                      border: `1px solid ${leafcutterElectricBlue}`,
+                      p: "2px 8px",
+                      color: leafcutterElectricBlue,
+                      textTransform: "none",
+                    }}
+                    onClick={() => router.push(previousURL)}
+                  >
+                    {t("previous")}
+                  </Button>
+                ) : null}
+              </Grid>
+              <Grid item>
+                {nextURL ? (
+                  <Button
+                    sx={{
+                      ...small,
+                      borderRadius: 500,
+                      border: `1px solid ${leafcutterElectricBlue}`,
+                      p: "2px 8px",
+                      color: leafcutterElectricBlue,
+                      textTransform: "none",
+                    }}
+                    onClick={() => router.push(nextURL)}
+                  >
+                    {t("next")}
+                  </Button>
+                ) : (
+                  <Button
+                    sx={{
+                      ...small,
+                      borderRadius: 500,
+                      border: `1px solid ${leafcutterElectricBlue}`,
+                      p: "2px 8px",
+                      color: leafcutterElectricBlue,
+                      textTransform: "none",
+                    }}
+                    onClick={() => router.push(router.pathname)}
+                  >
+                    {t("done")}
+                  </Button>
+                )}
+              </Grid>
+            </Grid>
+          ) : null}
+        </Grid>
+      }
+      arrow
+      placement={placement}
+      sx={{ opacity: 0.9 }}
+      componentsProps={{
+        tooltip: {
+          sx: {
+            opacity: 1.0,
+            backgroundColor: white,
+            color: leafcutterElectricBlue,
+            boxShadow: "0px 6px 20px rgba(0,0,0,0.25)",
+          },
+        },
+        arrow: {
+          sx: { opacity: 1.0, fontSize: "22px", color: white },
+        },
+      }}
+    >
+      {children}
+    </MUITooltip>
+  );
+};

apps/leafcutter/components/TopNav.tsx

@@ -0,0 +1,118 @@
+import { FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { AppBar, Grid, Box } from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import LeafcutterLogo from "images/leafcutter-logo.png";
+import { AccountButton } from "components/AccountButton";
+import { HelpButton } from "components/HelpButton";
+import { Tooltip } from "components/Tooltip";
+import { useAppContext } from "./AppProvider";
+// import { LanguageSelect } from "./LanguageSelect";
+
+export const TopNav: FC = () => {
+  const t = useTranslate();
+  const {
+    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
+    typography: { h5, h6 },
+  } = useAppContext();
+
+  return (
+    <AppBar
+      position="fixed"
+      elevation={1}
+      sx={{
+        backgroundColor: white,
+        marginBottom: 180,
+        opacity: 0.95,
+        pt: 2,
+        pb: 2,
+        pr: 3,
+        pl: 6,
+        backdropFilter: "blur(10px)",
+      }}
+    >
+      <Grid
+        container
+        justifyContent="space-between"
+        alignItems="center"
+        alignContent="center"
+        direction="row"
+        wrap="nowrap"
+        spacing={4}
+      >
+        <Link href="/" passHref>
+          <Grid
+            item
+            container
+            direction="row"
+            justifyContent="flex-start"
+            spacing={1}
+            wrap="nowrap"
+            sx={{ cursor: "pointer" }}
+          >
+            <Grid item sx={{ pr: 1 }}>
+              <Image src={LeafcutterLogo} alt="" width={56} height={52} />
+            </Grid>
+            <Grid item container direction="column" alignContent="flex-start">
+              <Grid item>
+                <Box
+                  sx={{
+                    ...h5,
+                    color: leafcutterElectricBlue,
+                    p: 0,
+                    m: 0,
+                    pt: 1,
+                    textAlign: "left",
+                  }}
+                >
+                  Leafcutter
+                </Box>
+              </Grid>
+              <Grid item>
+                <Box
+                  sx={{
+                    ...h6,
+                    m: 0,
+                    p: 0,
+                    color: cdrLinkOrange,
+                    textAlign: "left",
+                  }}
+                >
+                  A Project of Center for Digital Resilience
+                </Box>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Link>
+        <Grid item>
+          <HelpButton />
+        </Grid>
+
+        {/*       <Tooltip
+          title={t("languageOptionsCardTitle")}
+          description={t("languageOptionsCardDescription")}
+          emoji="✍️"
+          tooltipID="language"
+          placement="bottom"
+        >
+          <Grid item>
+            <LanguageSelect />
+          </Grid>
+        </Tooltip> */}
+        <Tooltip
+          title={t("profileSettingsCardTitle")}
+          description={t("profileSettingsCardDescription")}
+          tooltipID="profile"
+          placement="bottom"
+          previousURL="/?tooltip=recentUpdates"
+          nextURL="/create?tooltip=searchCreate"
+        >
+          <Grid item>
+            <AccountButton />
+          </Grid>
+        </Tooltip>
+      </Grid>
+    </AppBar>
+  );
+};

apps/leafcutter/components/VisualizationBuilder.tsx

@@ -0,0 +1,366 @@
+import { FC, useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  Grid,
+  Popover,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Dialog,
+  Divider,
+  Paper,
+  MenuList,
+  MenuItem,
+  ListItemText,
+  ListItemIcon,
+  TextField,
+} from "@mui/material";
+import {
+  ExpandMore as ExpandMoreIcon,
+  AddCircleOutline as AddCircleOutlineIcon,
+  SavedSearch as SavedSearchIcon,
+  RemoveCircle as RemoveCircleIcon,
+} from "@mui/icons-material";
+import { useTranslate } from "react-polyglot";
+import { QueryBuilder } from "components/QueryBuilder";
+import { QueryText } from "components/QueryText";
+import { LiveDataViewer } from "components/LiveDataViewer";
+import { Tooltip } from "components/Tooltip";
+import visualizationMap from "config/visualizationMap.json";
+import { VisualizationSelectCard } from "./VisualizationSelectCard";
+import { MetricSelectCard } from "./MetricSelectCard";
+import { useAppContext } from "./AppProvider";
+
+interface VisualizationBuilderProps {
+  templates: any[];
+}
+
+export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
+  templates,
+}) => {
+  const t = useTranslate();
+  const {
+    typography: { h4 },
+    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
+    foundCount,
+    query,
+    replaceQuery,
+    clearQuery,
+  } = useAppContext();
+  const { visualizations } = visualizationMap;
+  const [selectedVisualizationType, setSelectedVisualizationType] =
+    useState(null);
+  const toggleSelectedVisualizationType = (visualizationType: string) => {
+    if (visualizationType === selectedVisualizationType) {
+      setSelectedVisualizationType(null);
+    } else {
+      setSelectedVisualizationType(visualizationType);
+    }
+  };
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [savedSearches, setSavedSearches] = useState([]);
+  const [savedSearchName, setSavedSearchName] = useState("");
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const updateSearches = async () => {
+    const result = await fetch("/api/searches/list");
+    const existingSearches = await result.json();
+    setSavedSearches(existingSearches);
+  };
+  useEffect(() => {
+    updateSearches();
+  }, [setSavedSearches]);
+
+  const showSavedSearchPopup = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setSavedSearchName("");
+    setAnchorEl(null);
+  };
+  const closeDialog = () => {
+    setDialogOpen(false);
+  };
+  const createSavedSearch = async (name: string, q: any) => {
+    await fetch("/api/searches/create", {
+      method: "POST",
+      body: JSON.stringify({ name, query: q }),
+    });
+    await updateSearches();
+    handleClose();
+    closeDialog();
+  };
+
+  const deleteSavedSearch = async (name: string) => {
+    await fetch("/api/searches/delete", {
+      method: "POST",
+      body: JSON.stringify({ name }),
+    });
+    await updateSearches();
+    closeDialog();
+  };
+
+  const updateSearch = (name: string) => {
+    handleClose();
+    closeDialog();
+    const found = savedSearches.find((search) => search.name === name);
+    replaceQuery(found.query);
+  };
+
+  const clearSearch = () => clearQuery();
+
+  const open = Boolean(anchorEl);
+  const elementID = open ? "simple-popover" : undefined;
+  const [queryExpanded, setQueryExpanded] = useState(true);
+  const [resultsExpanded, setResultsExpanded] = useState(false);
+  const minHeight = "42px";
+  const maxHeight = "42px";
+  const summaryStyles = {
+    backgroundColor: leafcutterElectricBlue,
+    height: "14px",
+    minHeight,
+    maxHeight,
+    "&.Mui-expanded": {
+      minHeight,
+      maxHeight,
+    },
+  };
+  const buttonStyles = {
+    fontFamily: "Poppins, sans-serif",
+    fontWeight: 700,
+    color: `${white} !important`,
+    borderRadius: 999,
+    backgroundColor: leafcutterElectricBlue,
+    padding: "6px 30px",
+    margin: "20px 0px",
+    whiteSpace: "nowrap",
+  };
+
+  return (
+    <Box>
+      <Dialog open={dialogOpen}>
+        <Box sx={{ pt: 3, pl: 3, pr: 3 }}>
+          <Grid container direction="column" spacing={2}>
+            <Grid item>
+              <TextField
+                size="small"
+                placeholder="Saved search name"
+                sx={{ width: 400 }}
+                onChange={(e) => setSavedSearchName(e.target.value)}
+              />
+            </Grid>
+            <Grid item container direction="row" justifyContent="space-between">
+              <Grid item>
+                <Button sx={buttonStyles} onClick={closeDialog}>
+                  Cancel
+                </Button>
+              </Grid>
+              <Grid item>
+                <Button
+                  sx={buttonStyles}
+                  onClick={async () => {
+                    await createSavedSearch(savedSearchName, query);
+                  }}
+                >
+                  Save
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Box>
+      </Dialog>
+      <Grid
+        container
+        direction="row"
+        sx={{ mt: 4, mb: 2 }}
+        justifyContent="space-between"
+      >
+        <Grid item>
+          <Tooltip
+            title={t("searchAndCreateTitle")}
+            description={t("searchAndCreateDescription")}
+            tooltipID="searchCreate"
+            nextURL="/create?tooltip=categories"
+            previousURL="/?tooltip=profile"
+            placement="top"
+          >
+            <Box sx={h4}>Search Criteria</Box>
+          </Tooltip>
+        </Grid>
+        <Grid item>
+          <Button
+            aria-describedby={elementID}
+            variant="contained"
+            onClick={showSavedSearchPopup}
+            sx={{
+              backgroundColor: cdrLinkOrange,
+              textTransform: "none",
+              fontStyle: "italic",
+              fontWeight: "bold",
+            }}
+          >
+            <SavedSearchIcon sx={{ mr: 1 }} />
+            {t("savedSearch")}
+          </Button>
+          <Button
+            variant="contained"
+            onClick={clearSearch}
+            sx={{
+              backgroundColor: leafcutterElectricBlue,
+              textTransform: "none",
+              fontWeight: "bold",
+              ml: 3,
+            }}
+          >
+            {t("clear")}
+          </Button>
+          <Popover
+            id={elementID}
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "right",
+            }}
+            transformOrigin={{ vertical: "top", horizontal: "right" }}
+          >
+            <Paper>
+              <MenuList>
+                <MenuItem
+                  onClick={() => {
+                    handleClose();
+                    setDialogOpen(true);
+                  }}
+                >
+                  <ListItemIcon>
+                    <AddCircleOutlineIcon fontSize="small" />
+                  </ListItemIcon>
+                  <ListItemText>{t("saveCurrentSearch")}</ListItemText>
+                </MenuItem>
+                <Divider />
+                {savedSearches.map((savedSearch) => (
+                  <MenuItem
+                    key={savedSearch.name}
+                    onClick={() => updateSearch(savedSearch.name)}
+                  >
+                    <ListItemIcon />
+                    <ListItemText>{savedSearch.name}</ListItemText>
+                    <Box
+                      onClick={() => deleteSavedSearch(savedSearch.name)}
+                      sx={{ p: 0, m: 0, zIndex: 100 }}
+                    >
+                      <RemoveCircleIcon
+                        sx={{
+                          color: cdrLinkOrange,
+                          p: 0,
+                          m: 0,
+                          ":hover": { color: leafcutterElectricBlue },
+                        }}
+                      />
+                    </Box>
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </Paper>
+          </Popover>
+        </Grid>
+      </Grid>
+      <QueryBuilder />
+      <Accordion
+        expanded={queryExpanded}
+        onClick={() => setQueryExpanded(!queryExpanded)}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
+          sx={summaryStyles}
+        >
+          <Box sx={{ ...h4, color: white }}>{t("query")}</Box>
+        </AccordionSummary>
+        <AccordionDetails sx={{ p: 2 }}>
+          <QueryText />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        sx={{ mt: 2 }}
+        expanded={resultsExpanded}
+        onClick={() => setResultsExpanded(!resultsExpanded)}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
+          sx={summaryStyles}
+        >
+          <Box sx={{ ...h4, color: white }}>{`${t(
+            "results"
+          )} (${foundCount})`}</Box>
+        </AccordionSummary>
+        <Tooltip
+          title={`${t("queryResultsCardTitle")}`}
+          description={t("queryResultsCardDescription")}
+          tooltipID="queryResults"
+          placement="top"
+          previousURL="/create?tooltip=advancedOptions"
+          nextURL="/create?tooltip=viewResults"
+        >
+          <AccordionDetails sx={{ p: 2, pb: 4 }}>
+            <LiveDataViewer />
+          </AccordionDetails>
+        </Tooltip>
+      </Accordion>
+      <Tooltip
+        title={t("viewResultsCardTitle")}
+        description={t("viewResultsCardDescription")}
+        tooltipID="viewResults"
+        placement="top"
+        previousURL="/create?tooltip=queryResults"
+      >
+        <Box sx={{ ...h4, mt: 6, mb: 2 }}>{t("selectVisualization")}:</Box>
+      </Tooltip>
+      <Box display="grid" gridTemplateColumns="repeat(5, 1fr)" gap={2}>
+        {Object.keys(visualizations).map((key: string) => (
+          <VisualizationSelectCard
+            key={key}
+            visualizationType={key}
+            title={visualizations[key].name}
+            enabled={
+              selectedVisualizationType === key ||
+              selectedVisualizationType === null
+            }
+            selected={selectedVisualizationType === key}
+            toggleSelected={toggleSelectedVisualizationType}
+          />
+        ))}
+      </Box>
+      <Box sx={{ ...h4, mt: 6, mb: 2 }}>{t("selectFieldVisualize")}:</Box>
+      <Box
+        display="grid"
+        gridTemplateColumns="repeat(5, 1fr)"
+        gap={2}
+        sx={{ minHeight: 200 }}
+      >
+        {templates
+          .filter(
+            (template: any) => template.type === selectedVisualizationType
+          )
+          .map((template: any) => {
+            const { id, type, title, description } = template;
+            const cleanTitle = title
+              .replace("Templated", "")
+              .replace(visualizations[type].name, "");
+            const metricType = cleanTitle.replace(/\s/g, "").toLowerCase();
+            return (
+              <MetricSelectCard
+                key={id}
+                visualizationID={id}
+                metricType={metricType}
+                title={`By ${cleanTitle}`}
+                description={description}
+                enabled
+              />
+            );
+          })}
+      </Box>
+    </Box>
+  );
+};

apps/leafcutter/components/VisualizationCard.tsx

@@ -0,0 +1,73 @@
+import { FC, useState } from "react";
+import { Grid, Card, Box } from "@mui/material";
+import Iframe from "react-iframe";
+import { useAppContext } from "components/AppProvider";
+import { VisualizationDetailDialog } from "components/VisualizationDetailDialog";
+
+interface VisualizationCardProps {
+  id: string;
+  title: string;
+  description: string;
+  url: string;
+}
+
+export const VisualizationCard: FC<VisualizationCardProps> = ({
+  id,
+  title,
+  description,
+  url,
+}) => {
+  const [open, setOpen] = useState(false);
+  const closeDialog = () => setOpen(false);
+  const {
+    typography: { h4, p },
+    colors: { leafcutterLightBlue, leafcutterElectricBlue },
+  } = useAppContext();
+  const finalURL = `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
+
+  return (
+    <>
+      <Grid item xs={6}>
+        <Card
+          elevation={0}
+          sx={{
+            border: `1px solid ${leafcutterElectricBlue}`,
+            borderRadius: "10px",
+            backgroundColor: leafcutterLightBlue,
+            p: 2,
+            cursor: "pointer",
+          }}
+          onClick={() => setOpen(true)}
+        >
+          <Box
+            sx={{
+              backgroundColor: leafcutterLightBlue,
+              pointerEvents: "none",
+              borderRadius: "8px",
+              overflow: "hidden",
+              p: 1,
+            }}
+          >
+            <Iframe url={finalURL} height="300" width="100%" frameBorder={0} />
+          </Box>
+          <Box component="h4" sx={{ ...h4, mt: 2, mb: 2 }}>
+            {title}
+          </Box>
+          <Box component="p" sx={{ ...p, mt: 2, mb: 2 }}>
+            {description}
+          </Box>
+        </Card>
+      </Grid>
+      {open ? (
+        <VisualizationDetailDialog
+          id={id}
+          title={title}
+          description={description}
+          url={url}
+          closeDialog={closeDialog}
+          editing={false}
+        />
+      ) : null}
+    </>
+  );
+};

apps/leafcutter/components/VisualizationDetail.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+// import Link from "next/link";
+import { Box } from "@mui/material";
+import Iframe from "react-iframe";
+import { useAppContext } from "components/AppProvider";
+
+interface VisualizationDetailProps {
+  id: string;
+  title: string;
+  description: string;
+  url: string;
+  editing: boolean;
+}
+
+export const VisualizationDetail: FC<VisualizationDetailProps> = ({
+  id,
+  title,
+  description,
+  url,
+  editing,
+}) => {
+  const {
+    colors: { mediumGray },
+    typography: { h4, p },
+  } = useAppContext();
+  const finalURL = `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
+
+  return (
+    <Box key={id}>
+      {!editing ? (
+        <Box sx={{ borderBottom: `1px solid ${mediumGray}`, mb: 2 }}>
+          <Box sx={{ ...h4, mt: 1, mb: 1 }}>{title}</Box>
+          <Box sx={{ ...p, mt: 0, mb: 2, fontStyle: "oblique" }}>
+            {description}
+          </Box>
+        </Box>
+      ) : null}
+      <Box sx={{ borderBottom: `1px solid ${mediumGray}`, pb: 3 }}>
+        <Iframe url={finalURL} height="500px" width="100%" frameBorder={0} />
+      </Box>
+    </Box>
+  );
+};

apps/leafcutter/components/VisualizationDetailDialog.tsx

@@ -0,0 +1,148 @@
+import { FC, useState } from "react";
+// import Link from "next/link";
+import {
+  Grid,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  TextField,
+} from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "components/AppProvider";
+import { VisualizationDetail } from "./VisualizationDetail";
+
+interface VisualizationDetailDialogProps {
+  id: string;
+  title: string;
+  description: string;
+  url: string;
+  closeDialog: any;
+  editing: boolean;
+}
+
+export const VisualizationDetailDialog: FC<VisualizationDetailDialogProps> = ({
+  id,
+  title,
+  description,
+  url,
+  closeDialog,
+  editing,
+}) => {
+  const t = useTranslate();
+  const [editedTitle, setEditedTitle] = useState(title);
+  const [editedDescription, setEditedDescription] = useState(description);
+  const {
+    colors: { leafcutterElectricBlue, leafcutterLightBlue, white, almostBlack },
+    query,
+  } = useAppContext();
+
+  const deleteAndClose = async () => {
+    await fetch(`/api/visualizations/delete`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id }),
+    });
+
+    closeDialog();
+  };
+
+  const saveAndClose = async () => {
+    const updateParams = {
+      id,
+      title: editedTitle,
+      description: editedDescription,
+      query,
+    };
+    await fetch(`/api/visualizations/update`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(updateParams),
+    });
+
+    closeDialog();
+  };
+
+  const buttonStyles = {
+    fontSize: 14,
+    borderRadius: 500,
+    color: white,
+    backgroundColor: leafcutterElectricBlue,
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    pl: 3,
+    pr: 3,
+    ":hover": {
+      backgroundColor: leafcutterLightBlue,
+      color: almostBlack,
+      opacity: 0.8,
+    },
+  };
+
+  return (
+    <Dialog open maxWidth="xl">
+      <DialogContent sx={{ minWidth: 800 }}>
+        {editing && (
+          <Grid direction="column" container rowGap={2} sx={{ mb: 3 }}>
+            <Grid item>
+              <TextField
+                value={editedTitle}
+                onChange={(e) => setEditedTitle(e.target.value)}
+                label={t("title")}
+                size="small"
+                fullWidth
+              />
+            </Grid>
+            <Grid>
+              <TextField
+                value={editedDescription}
+                onChange={(e) => setEditedDescription(e.target.value)}
+                label={t("description")}
+                size="small"
+                fullWidth
+              />
+            </Grid>
+          </Grid>
+        )}
+        <VisualizationDetail
+          id={id}
+          title={title}
+          description={description}
+          url={url}
+          editing={editing}
+        />
+      </DialogContent>
+      <DialogActions sx={{ p: 2.5, pt: 0 }}>
+        <Grid container direction="row-reverse" justifyContent="space-between">
+          {!editing && (
+            <Grid item>
+              <Button sx={buttonStyles} onClick={closeDialog} size="small">
+                {t("done")}
+              </Button>
+            </Grid>
+          )}
+          {editing && (
+            <Grid item>
+              <Button sx={buttonStyles} onClick={saveAndClose} size="small">
+                {t("save")}
+              </Button>
+            </Grid>
+          )}
+          {editing && (
+            <Grid item>
+              <Button sx={buttonStyles} onClick={deleteAndClose} size="small">
+                {t("cancel")}
+              </Button>
+            </Grid>
+          )}
+        </Grid>
+      </DialogActions>
+    </Dialog>
+  );
+};

apps/leafcutter/components/VisualizationSelectCard.tsx

@@ -0,0 +1,108 @@
+import { FC } from "react";
+import Image from "next/image";
+import { Card, Grid } from "@mui/material";
+import horizontalBar from "images/horizontal-bar.svg";
+import horizontalBarStacked from "images/horizontal-bar-stacked.svg";
+import verticalBar from "images/vertical-bar.svg";
+import verticalBarStacked from "images/vertical-bar-stacked.svg";
+import pieDonut from "images/pie-donut.svg";
+import line from "images/line.svg";
+import lineStacked from "images/line-stacked.svg";
+import dataTable from "images/data-table.svg";
+import metric from "images/metric.svg";
+import tagCloud from "images/tag-cloud.svg";
+import { useAppContext } from "./AppProvider";
+
+interface VisualizationSelectCardProps {
+  visualizationType: string;
+  title: string;
+  enabled: boolean;
+  selected: boolean;
+  toggleSelected: any;
+}
+
+export const VisualizationSelectCard: FC<VisualizationSelectCardProps> = ({
+  visualizationType,
+  title,
+  enabled,
+  selected,
+  toggleSelected,
+}) => {
+  const {
+    typography: { small },
+    colors: {
+      white,
+      leafcutterElectricBlue,
+      leafcutterLightBlue,
+      cdrLinkOrange,
+    },
+  } = useAppContext();
+  const images = {
+    horizontalBar,
+    horizontalBarStacked,
+    verticalBar,
+    verticalBarStacked,
+    line,
+    lineStacked,
+    pieDonut,
+    dataTable,
+    metric,
+    tagCloud,
+    unknown: line,
+  };
+
+  let backgroundColor = leafcutterElectricBlue;
+  if (!enabled) {
+    backgroundColor = leafcutterLightBlue;
+  } else if (selected) {
+    backgroundColor = cdrLinkOrange;
+  }
+
+  return (
+    <Card
+      sx={{
+        height: "100px",
+        backgroundColor,
+        borderRadius: "10px",
+        padding: "10px",
+        opacity: enabled ? 1 : 0.5,
+        cursor: enabled ? "pointer" : "default",
+        "&:hover": {
+          backgroundColor: enabled ? cdrLinkOrange : white,
+        },
+      }}
+      elevation={enabled ? 2 : 0}
+      onClick={() => toggleSelected(visualizationType)}
+    >
+      <Grid
+        direction="column"
+        container
+        justifyContent="space-around"
+        alignContent="center"
+        alignItems="center"
+        wrap="nowrap"
+        sx={{ height: "100%" }}
+        spacing={0}
+      >
+        <Grid
+          item
+          sx={{
+            ...small,
+            textAlign: "center",
+            color: enabled ? white : leafcutterElectricBlue,
+          }}
+        >
+          {title}
+        </Grid>
+        <Grid item>
+          <Image
+            src={images[visualizationType]}
+            alt=""
+            width={35}
+            height={35}
+          />
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};

apps/leafcutter/components/Welcome.tsx

@@ -0,0 +1,53 @@
+import { Box, Grid } from "@mui/material";
+import { useSession } from "next-auth/react";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "./AppProvider";
+
+export const Welcome = () => {
+  const t = useTranslate();
+  const { data: session } = useSession();
+  const {
+    user: { name },
+  } = session;
+  const {
+    colors: { white, leafcutterElectricBlue },
+    typography: { h1, h4, p },
+  } = useAppContext();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        backgroundColor: leafcutterElectricBlue,
+        color: white,
+        p: 4,
+        borderRadius: "10px",
+        mb: "22px",
+      }}
+    >
+      <Grid container direction="row" spacing={3}>
+        {/*       <Grid
+          item
+          container
+          xs={3}
+          direction="column"
+          justifyContent="flex-start"
+          alignItems="center"
+        >
+          <img src={image} alt={name} width="150px" />
+        </Grid> */}
+        <Grid item xs={12}>
+          <Box component="h1" sx={{ ...h1, mb: 1 }}>
+            {t("dashboardTitle")}
+          </Box>
+          <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>{`${t("welcome")}, ${
+            name?.split(" ")[0]
+          }! 👋`}</Box>
+          <Box component="p" sx={{ ...p }}>
+            {t("dashboardDescription")}
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

apps/leafcutter/components/WelcomeDialog.tsx

@@ -0,0 +1,137 @@
+import { Box, Grid, Dialog, Button } from "@mui/material";
+import { useRouter } from "next/router";
+// import { useSession } from "next-auth/react";
+// import { useTranslate } from "react-polyglot";
+import { useAppContext } from "./AppProvider";
+
+export const WelcomeDialog = () => {
+  // const t = useTranslate();
+  const router = useRouter();
+  // const { data: session } = useSession();
+  // const { user } = session;
+  const {
+    colors: { white, leafcutterElectricBlue },
+    typography: { h1, h6, p },
+  } = useAppContext();
+  const activeTooltip = router.query.tooltip?.toString();
+  const open = activeTooltip === "welcome";
+
+  return (
+    <Dialog open={open} maxWidth="md" sx={{ zIndex: 2000 }}>
+      <Box sx={{ p: 6, pt: 6 }}>
+        <Grid container direction="column" spacing={3}>
+          <Grid item container direction="row" justifyContent="center">
+            <Grid
+              item
+              sx={{ width: 500, height: 300, backgroundColor: "black" }}
+            >
+              {/*      <iframe
+                width="500"
+                height="300"
+                src="https://www.youtube-nocookie.com/embed/-iKFBXAlmEM"
+                title="CDR Link intro"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              /> */}
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Box
+              sx={{
+                ...h1,
+                color: leafcutterElectricBlue,
+                textAlign: "center",
+                fontSize: 32,
+              }}
+            >
+              Welcome to Leafcutter!
+            </Box>
+            <Box
+              sx={{ ...h6, color: leafcutterElectricBlue, pt: 1, fontSize: 16 }}
+            >
+              Let&apos;s get started.
+            </Box>
+          </Grid>
+          <Grid item container spacing={3}>
+            <Grid item>
+              <Box sx={{ ...p, textAlign: "center" }}>
+                Leafcutter is a secure platform for aggregating, displaying, and
+                sharing data on digital security threats and attacks facing
+                global civil society. When creating the app we had a couple of
+                people in mind; Incident responders, threat analysts, security
+                trainers, and security service providers.
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box sx={{ ...p, textAlign: "center" }}>
+                Leafcutter onboarding is meant to help you navigate, build
+                queries and visualizations, and walk you through the best ways
+                to know and use the Leafcutter app. Ready?
+              </Box>
+            </Grid>
+          </Grid>
+          <Grid
+            item
+            container
+            direction="row"
+            justifyContent="space-around"
+            sx={{ mt: 3 }}
+          >
+            <Grid item>
+              <Button
+                sx={{
+                  fontSize: 14,
+                  minWidth: 300,
+                  borderRadius: 500,
+                  color: leafcutterElectricBlue,
+                  border: `2px solid ${leafcutterElectricBlue}`,
+                  fontWeight: "bold",
+                  textTransform: "uppercase",
+                  pl: 6,
+                  pr: 5,
+                  ":hover": {
+                    backgroundColor: leafcutterElectricBlue,
+                    color: white,
+                    opacity: 0.8,
+                  },
+                }}
+                onClick={() => {
+                  router.push(`/`);
+                }}
+              >
+                I&apos;ll explore on my own
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                sx={{
+                  fontSize: 14,
+                  minWidth: 300,
+                  borderRadius: 500,
+                  backgroundColor: leafcutterElectricBlue,
+                  color: white,
+                  border: `2px solid ${leafcutterElectricBlue}`,
+                  fontWeight: "bold",
+                  textTransform: "uppercase",
+                  pl: 6,
+                  pr: 5,
+                  ":hover": {
+                    backgroundColor: leafcutterElectricBlue,
+                    color: white,
+                    opacity: 0.8,
+                  },
+                }}
+                onClick={() => {
+                  router.push(`/?tooltip=navigation`);
+                }}
+              >
+                Start the guide
+              </Button>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Box>
+    </Dialog>
+  );
+};

apps/leafcutter/config/visualizationMap.json

@@ -0,0 +1,31 @@
+{
+  "visualizations": {
+    "horizontalBar": {
+      "name": "Horizontal Bar"
+    },
+    "verticalBar": {
+      "name": "Vertical Bar"
+    },
+    "line": {
+      "name": "Line"
+    },
+    "pieDonut": {
+      "name": "Pie"
+    },
+    "dataTable": {
+      "name": "Data Table"
+    },
+    "metric": {
+      "name": "Metric"
+    },
+    "tagCloud": {
+      "name": "Tag Cloud"
+    }
+  },
+  "fields": {
+    "incidentType": ["horizontalBar"],
+    "targetedGroup": ["horizontalBar"],
+    "impactedTechnology": ["horizontalBar"],
+    "region": ["horizontalBar"]
+  }
+}

apps/leafcutter/config/visualizations/dataTable.json

@@ -0,0 +1,38 @@
+{
+  "title": "DataTable",
+  "type": "table",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "incident.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 10,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "bucket"
+    }
+  ],
+  "params": {
+    "perPage": 10,
+    "showPartialRows": false,
+    "showMetricsAtAllLevels": false,
+    "sort": { "columnIndex": null, "direction": null },
+    "showTotal": false,
+    "totalFunc": "sum",
+    "percentageCol": ""
+  }
+}

apps/leafcutter/config/visualizations/horizontalBar.json

@@ -0,0 +1,93 @@
+{
+  "title": "",
+  "type": "horizontal_bar",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "incident.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": true,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "type": "histogram",
+    "grid": { "categoryLines": false },
+    "categoryAxes": [
+      {
+        "id": "CategoryAxis-1",
+        "type": "category",
+        "position": "left",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 200
+        },
+        "title": {}
+      }
+    ],
+    "valueAxes": [
+      {
+        "id": "ValueAxis-1",
+        "name": "LeftAxis-1",
+        "type": "value",
+        "position": "bottom",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 75,
+          "filter": true,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      }
+    ],
+    "seriesParams": [
+      {
+        "show": true,
+        "type": "histogram",
+        "mode": "normal",
+        "data": { "label": "Count", "id": "1" },
+        "valueAxis": "ValueAxis-1",
+        "drawLinesBetweenPoints": true,
+        "lineWidth": 2,
+        "showCircles": true
+      }
+    ],
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "times": [],
+    "addTimeMarker": false,
+    "labels": {},
+    "thresholdLine": {
+      "show": false,
+      "value": 10,
+      "width": 1,
+      "style": "full",
+      "color": "#E7664C"
+    }
+  }
+}

apps/leafcutter/config/visualizations/horizontalBarStacked.json

@@ -0,0 +1,94 @@
+{
+  "title": "BarStacked",
+  "type": "horizontal_bar",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "actor.keyword",
+        "orderBy": "_key",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "split"
+    }
+  ],
+  "params": {
+    "type": "histogram",
+    "grid": { "categoryLines": false },
+    "categoryAxes": [
+      {
+        "id": "CategoryAxis-1",
+        "type": "category",
+        "position": "left",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 200
+        },
+        "title": {}
+      }
+    ],
+    "valueAxes": [
+      {
+        "id": "ValueAxis-1",
+        "name": "LeftAxis-1",
+        "type": "value",
+        "position": "bottom",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 75,
+          "filter": true,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      }
+    ],
+    "seriesParams": [
+      {
+        "show": true,
+        "type": "histogram",
+        "mode": "stacked",
+        "data": { "label": "Count", "id": "1" },
+        "valueAxis": "ValueAxis-1",
+        "drawLinesBetweenPoints": true,
+        "lineWidth": 2,
+        "showCircles": true
+      }
+    ],
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "times": [],
+    "addTimeMarker": false,
+    "labels": {},
+    "thresholdLine": {
+      "show": false,
+      "value": 10,
+      "width": 1,
+      "style": "full",
+      "color": "#E7664C"
+    },
+    "row": true
+  }
+}

apps/leafcutter/config/visualizations/line.json

@@ -0,0 +1,89 @@
+{
+  "title": "Line",
+  "type": "line",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "technology.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "type": "line",
+    "grid": { "categoryLines": false },
+    "categoryAxes": [
+      {
+        "id": "CategoryAxis-1",
+        "type": "category",
+        "position": "bottom",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear" },
+        "labels": { "show": true, "filter": true, "truncate": 100 },
+        "title": {}
+      }
+    ],
+    "valueAxes": [
+      {
+        "id": "ValueAxis-1",
+        "name": "LeftAxis-1",
+        "type": "value",
+        "position": "left",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      }
+    ],
+    "seriesParams": [
+      {
+        "show": true,
+        "type": "line",
+        "mode": "normal",
+        "data": { "label": "Count", "id": "1" },
+        "valueAxis": "ValueAxis-1",
+        "drawLinesBetweenPoints": true,
+        "lineWidth": 2,
+        "interpolate": "linear",
+        "showCircles": true
+      }
+    ],
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "times": [],
+    "addTimeMarker": false,
+    "labels": {},
+    "thresholdLine": {
+      "show": false,
+      "value": 10,
+      "width": 1,
+      "style": "full",
+      "color": "#E7664C"
+    }
+  }
+}

apps/leafcutter/config/visualizations/lineStacked.json

@@ -0,0 +1,105 @@
+{
+  "title": "LineStacked",
+  "type": "line",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "technology.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "type": "line",
+    "grid": { "categoryLines": false },
+    "categoryAxes": [
+      {
+        "id": "CategoryAxis-1",
+        "type": "category",
+        "position": "bottom",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear" },
+        "labels": { "show": true, "filter": true, "truncate": 100 },
+        "title": {}
+      }
+    ],
+    "valueAxes": [
+      {
+        "id": "ValueAxis-1",
+        "name": "LeftAxis-1",
+        "type": "value",
+        "position": "left",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      },
+      {
+        "id": "ValueAxis-2",
+        "name": "RightAxis-1",
+        "type": "value",
+        "position": "right",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      }
+    ],
+    "seriesParams": [
+      {
+        "show": true,
+        "type": "line",
+        "mode": "stacked",
+        "data": { "label": "Count", "id": "1" },
+        "valueAxis": "ValueAxis-2",
+        "drawLinesBetweenPoints": true,
+        "lineWidth": 2,
+        "interpolate": "step-after",
+        "showCircles": true
+      }
+    ],
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "times": [],
+    "addTimeMarker": false,
+    "labels": {},
+    "thresholdLine": {
+      "show": false,
+      "value": 10,
+      "width": 1,
+      "style": "full",
+      "color": "#E7664C"
+    }
+  }
+}

apps/leafcutter/config/visualizations/metric.json

@@ -0,0 +1,50 @@
+{
+  "title": "Metric",
+  "type": "metric",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": { "customLabel": "#" },
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "technology.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "group"
+    }
+  ],
+  "params": {
+    "addTooltip": true,
+    "addLegend": false,
+    "type": "metric",
+    "metric": {
+      "percentageMode": false,
+      "useRanges": false,
+      "colorSchema": "Green to Red",
+      "metricColorMode": "None",
+      "colorsRange": [{ "from": 0, "to": 10000 }],
+      "labels": { "show": true },
+      "invertColors": false,
+      "style": {
+        "bgFill": "#000",
+        "bgColor": false,
+        "labelColor": false,
+        "subText": "",
+        "fontSize": 60
+      }
+    }
+  }
+}

apps/leafcutter/config/visualizations/pieDonut.json

@@ -0,0 +1,42 @@
+{
+  "title": "Pie",
+  "type": "pie",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "technology.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": true,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "type": "pie",
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "isDonut": true,
+    "labels": {
+      "show": false,
+      "values": true,
+      "last_level": true,
+      "truncate": 100
+    }
+  }
+}

apps/leafcutter/config/visualizations/tagCloud.json

@@ -0,0 +1,36 @@
+{
+  "title": "Cloud",
+  "type": "tagcloud",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "incident.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "scale": "linear",
+    "orientation": "single",
+    "minFontSize": 18,
+    "maxFontSize": 72,
+    "showLabel": true
+  }
+}

apps/leafcutter/config/visualizations/verticalBar.json

@@ -0,0 +1,88 @@
+{
+  "title": "VerticalBar",
+  "type": "histogram",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "actor.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 10,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "type": "histogram",
+    "grid": { "categoryLines": false },
+    "categoryAxes": [
+      {
+        "id": "CategoryAxis-1",
+        "type": "category",
+        "position": "bottom",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear" },
+        "labels": { "show": true, "filter": true, "truncate": 100 },
+        "title": {}
+      }
+    ],
+    "valueAxes": [
+      {
+        "id": "ValueAxis-1",
+        "name": "LeftAxis-1",
+        "type": "value",
+        "position": "left",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      }
+    ],
+    "seriesParams": [
+      {
+        "show": true,
+        "type": "histogram",
+        "mode": "normal",
+        "data": { "label": "Count", "id": "1" },
+        "valueAxis": "ValueAxis-1",
+        "drawLinesBetweenPoints": true,
+        "lineWidth": 2,
+        "showCircles": true
+      }
+    ],
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "times": [],
+    "addTimeMarker": false,
+    "labels": { "show": false },
+    "thresholdLine": {
+      "show": false,
+      "value": 10,
+      "width": 1,
+      "style": "full",
+      "color": "#E7664C"
+    }
+  }
+}

apps/leafcutter/config/visualizations/verticalBarStacked.json

@@ -0,0 +1,88 @@
+{
+  "title": "VerticalBarStacked",
+  "type": "histogram",
+  "aggs": [
+    {
+      "id": "1",
+      "enabled": true,
+      "type": "count",
+      "params": {},
+      "schema": "metric"
+    },
+    {
+      "id": "2",
+      "enabled": true,
+      "type": "terms",
+      "params": {
+        "field": "incident.keyword",
+        "orderBy": "1",
+        "order": "desc",
+        "size": 5,
+        "otherBucket": false,
+        "otherBucketLabel": "Other",
+        "missingBucket": false,
+        "missingBucketLabel": "Missing"
+      },
+      "schema": "segment"
+    }
+  ],
+  "params": {
+    "type": "histogram",
+    "grid": { "categoryLines": false },
+    "categoryAxes": [
+      {
+        "id": "CategoryAxis-1",
+        "type": "category",
+        "position": "bottom",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear" },
+        "labels": { "show": true, "filter": true, "truncate": 100 },
+        "title": {}
+      }
+    ],
+    "valueAxes": [
+      {
+        "id": "ValueAxis-1",
+        "name": "LeftAxis-1",
+        "type": "value",
+        "position": "left",
+        "show": true,
+        "style": {},
+        "scale": { "type": "linear", "mode": "normal" },
+        "labels": {
+          "show": true,
+          "rotate": 0,
+          "filter": false,
+          "truncate": 100
+        },
+        "title": { "text": "Count" }
+      }
+    ],
+    "seriesParams": [
+      {
+        "show": true,
+        "type": "histogram",
+        "mode": "stacked",
+        "data": { "label": "Count", "id": "1" },
+        "valueAxis": "ValueAxis-1",
+        "drawLinesBetweenPoints": true,
+        "lineWidth": 2,
+        "showCircles": true
+      }
+    ],
+    "addTooltip": true,
+    "addLegend": true,
+    "legendPosition": "right",
+    "times": [],
+    "addTimeMarker": false,
+    "labels": { "show": false },
+    "thresholdLine": {
+      "show": false,
+      "value": 10,
+      "width": 1,
+      "style": "full",
+      "color": "#E7664C"
+    }
+  }
+}

apps/leafcutter/docker-entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set -e
+
+cd ${APP_DIR}
+echo "starting admin app"
+exec dumb-init npm run start

apps/leafcutter/images/data-table.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M16 3v11a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2h12a2 2 0 012 2v1zm-1 0V2a1 1 0 00-1-1H2a1 1 0 00-1 1v1h14zm0 1H1v10a1 1 0 001 1h12a1 1 0 001-1V4zM4.5 6a.5.5 0 010 1H2.496a.5.5 0 110-1H4.5zm9 0a.5.5 0 110 1h-6a.5.5 0 010-1h6zm-9 3a.5.5 0 010 1H2.496a.5.5 0 110-1H4.5zm9 0a.5.5 0 110 1h-6a.5.5 0 010-1h6zm-9 3a.5.5 0 110 1H2.496a.5.5 0 110-1H4.5zm9 0a.5.5 0 110 1h-6a.5.5 0 110-1h6z">
+    </path>
+</svg>

apps/leafcutter/images/horizontal-bar-stacked.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoaded" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M.5 0a.5.5 0 01.5.5v14a.5.5 0 11-1 0V.5A.5.5 0 01.5 0zm13 1a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H9v3h2.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5h-9a.5.5 0 110-1H9v-3H2.5a.5.5 0 010-1H6V6H2.5a.5.5 0 010-1H10V2H2.5a.5.5 0 010-1h11z">
+    </path>
+</svg>

apps/leafcutter/images/horizontal-bar.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M8.5 10h-6a.5.5 0 010-1H8V6H2.5a.5.5 0 010-1H13V2H2.5a.5.5 0 010-1h11a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H9v3h2.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5h-9a.5.5 0 110-1H11v-3H8.5zM0 .5a.5.5 0 111 0v14a.5.5 0 11-1 0V.5z">
+    </path>
+</svg>

apps/leafcutter/images/line-stacked.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z">
+    </path>
+</svg>

apps/leafcutter/images/line.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z">
+    </path>
+</svg>

apps/leafcutter/images/metric.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M6.532 7.34a2.161 2.161 0 112.936 0 2.746 2.746 0 11-2.936 0zM2 0h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2zm0 1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V2a1 1 0 00-1-1H2zm6 5.915a1.161 1.161 0 100-2.322 1.161 1.161 0 000 2.322zm0 4.492a1.746 1.746 0 100-3.492 1.746 1.746 0 000 3.492z">
+    </path>
+</svg>

apps/leafcutter/images/pie-donut.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
+    <path fill="white"
+        d="M6.5 9a.5.5 0 01-.5-.5V3.023A5.5 5.5 0 1011.978 9H6.5zM7 8h5.5a.5.5 0 01.5.5A6.5 6.5 0 116.5 2a.5.5 0 01.5.5V8zm2-6.972V6h4.972C13.696 3.552 11.448 1.304 9 1.028zM14.5 7h-6a.5.5 0 01-.5-.5v-6a.5.5 0 01.5-.5C11.853 0 15 3.147 15 6.5a.5.5 0 01-.5.5zM6.146 8.854a.5.5 0 11.708-.708l4 4a.5.5 0 01-.708.708l-4-4z">
+    </path>
+</svg>