buck2: explain: add a graph view

Reviewed By: samkevich

Differential Revision: D59704345

fbshipit-source-id: f7bdbda9f4d0fd846f9d6cbdad7fd6fbd766c7e1

app/buck2_explain/js/src/App.tsx

@@ -16,10 +16,11 @@ import {createRoot} from 'react-dom/client'
 import {ByteBuffer} from 'flatbuffers'
 import {Index} from 'flexsearch-ts'
 import {Build, ConfiguredTargetNode, TargetField, TargetValue, TargetValueType} from './fbs/explain'
-import {ROOT_VIEW, Router, SEARCH_VIEW, TARGET_VIEW} from './Router'
+import {GRAPH_VIEW, ROOT_VIEW, Router, SEARCH_VIEW, TARGET_VIEW} from './Router'
 import {RootView} from './RootView'
 import {TargetView} from './TargetView'
 import {SearchView} from './SearchView'
+import {GraphView} from './GraphView'
 import {Header} from './Header'
 
 const INITIAL_STATE = {
@@ -93,6 +94,7 @@ function App() {
           <RootView view={ROOT_VIEW} />
           <TargetView view={TARGET_VIEW} />
           <SearchView view={SEARCH_VIEW} />
+          <GraphView view={GRAPH_VIEW} />
         </Router>
       </DataContext.Provider>
     )

app/buck2_explain/js/src/GraphView.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under both the MIT license found in the
+ * LICENSE-MIT file in the root directory of this source tree and the Apache
+ * License, Version 2.0 found in the LICENSE-APACHE file in the root directory
+ * of this source tree.
+ */
+
+import React, {useContext} from 'react'
+import {Target} from './Target'
+import {DataContext} from './App'
+
+export function GraphView(props: {view: string}) {
+  return <p>WIP</p>
+}

app/buck2_explain/js/src/Router.tsx

@@ -10,6 +10,7 @@
 import React, {ReactNode, useContext, useEffect, useState} from 'react'
 
 export const SEARCH_VIEW = 'search'
+export const GRAPH_VIEW = 'graph'
 export const TARGET_VIEW = 'target'
 export const ROOT_VIEW = ''
 export const TARGET_TAB = 'target_tab'