entity page

frontend/src/metabase/components/EntityInfo.jsx

+import React from "react";
+
+import { Box, Heading } from "rebass";
+import { PageLayout } from "./EntityLayout";
+
+const EntityInfo = ({ entity }) => (
+  <PageLayout>
+    <Box my={4}>
+      <Heading>{entity.displayName() || "Good title" }</Heading>
+      <p>{entity.card().description}</p>
+    </Box>
+    <Box my={4}>
+      <div className="bordered rounded shadowed p3">
+        <h2>{ entity.query().table().display_name }</h2>
+        <p>{ entity.query().table().description }</p>
+      </div>
+    </Box>
+    <Box>
+      <Box my={2}>
+        <h3>What's interesting about this</h3>
+        <p>
+          There is some weirdness in how you have to filter this table in order
+          to get the metric you want. Also note that instances check in twice
+          per day, so if you do a count of rows to determine active instances,
+          make sure to divide it by 2
+        </p>
+      </Box>
+      <Box my={2}>
+        <h3>Things to know about this</h3>
+        <p>
+          There is some weirdness in how you have to filter this table in order
+          to get the metric you want. Also note that instances check in twice
+          per day, so if you do a count of rows to determine active instances,
+          make sure to divide it by 2
+        </p>
+      </Box>
+      <Box my={2}>
+        <h3>How is this calculated?</h3>
+        <p>
+          There is some weirdness in how you have to filter this table in order
+          to get the metric you want. Also note that instances check in twice
+          per day, so if you do a count of rows to determine active instances,
+          make sure to divide it by 2
+        </p>
+      </Box>
+    </Box>
+  </PageLayout>
+);
+
+export default EntityInfo;

frontend/src/metabase/components/EntityLayout.js

+import React from "react";
+import { Box, Border, Flex, Subhead, Heading } from "rebass";
+
+export const Wrapper = ({ children }) => (
+  <Box w="80%" ml="auto" mr="auto">
+    {children}
+  </Box>
+);
+
+export const Canvas = ({ children }) => (
+  <Box
+    bg="#FCFDFD"
+    p={2}
+    style={{
+      borderTop: "#F4F5F6",
+      borderBottom: "#F5F5F6",
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export const Section = ({ children }) => <Box py={4}>{children}</Box>;
+
+export const SectionHeading = ({ children }) => (
+  <Border bottom mb={3} pb={2}>
+    <Flex align="center">
+      <Subhead>{children}</Subhead>
+    </Flex>
+  </Border>
+);
+
+export const PageHeading = ({ icon, title }) => (
+  <Flex align="center" my={3}>
+    {icon}
+    <Heading ml={2}>{title}</Heading>
+  </Flex>
+);
+
+export const PageLayout = ({ children }) =>
+  <Box w={2 / 3}>
+    <Box className="text-measure">
+      {children}
+    </Box>
+  </Box>;
+
+export const PageSidebar = ({ children }) => <Box w={1 / 3}>{children}</Box>;

frontend/src/metabase/components/EntityPage.jsx

+import React, { Component } from "react";
+import { Box, Flex } from "rebass";
+import { Link } from "react-router";
+
+import { PageSidebar, Wrapper } from "./EntityLayout";
+
+import EntityInfo from "./EntityInfo";
+import EntitySegments from "./EntitySegments";
+
+import Visualization from "metabase/visualizations/components/Visualization";
+
+import QuestionAndResultLoader from "metabase/containers/QuestionAndResultLoader";
+
+class EntityPage extends Component {
+  render() {
+    return (
+      <QuestionAndResultLoader
+        questionId={this.props.params.cardId}
+        questionHash={this.props.location.hash}
+      >
+        {({ question, result, cancel, reload }) => {
+
+          if (!question) {
+            return <div>"Loading..."</div>;
+          }
+
+          const mode = question.mode && question.mode();
+          const actions = mode && mode.actions();
+          const card = question.card && question.card();
+
+          return (
+            <div key="entity">
+              <Box
+                className="border-bottom"
+                style={{ backgroundColor: "#FCFDFD", height: "65vh" }}
+              >
+                { result && (
+                    <Visualization
+                      className="full-height"
+                      rawSeries={[
+                        {
+                          card,
+                          data: result[0].data,
+                        },
+                      ]}
+                    />
+
+                )}
+              </Box>
+              <a onClick={() => reload()}>Reload</a>
+              <a onClick={() => cancel()}>Cancel</a>
+              <Box>
+                <Wrapper>
+                  <Flex>
+                    <EntityInfo entity={question} />
+                    <PageSidebar>
+                      <Box
+                        p={2}
+                        mt={4}
+                        style={{ border: "1px solid #ddd", borderRadius: 6 }}
+                      >
+                        <Box>
+                          <h3>Ways to view this</h3>
+                          <ol>
+                            {actions &&
+                              actions.map(action => (
+                                <li className="bordered rounded bg-white p1 inline-block">
+                                  {action.question && (
+                                    <Link to={action.question().getUrl()}>
+                                      {action.title}
+                                    </Link>
+                                  )}
+                                </li>
+                              ))}
+                          </ol>
+                        </Box>
+                        <EntitySegments question={question} />
+                      </Box>
+                    </PageSidebar>
+                  </Flex>
+                </Wrapper>
+              </Box>
+            </div>
+          );
+        }}
+      </QuestionAndResultLoader>
+    );
+  }
+}
+
+export default EntityPage;

frontend/src/metabase/components/EntitySegments.jsx

+import React from 'react'
+import { Box } from 'rebass'
+import { Link } from 'react-router'
+
+
+const EntitySegments = ({ question }) => {
+  const segments = question.query().filterSegmentOptions()
+
+
+  if(!segments) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <h3>Segments for this</h3>
+      { segments.map(segment => {
+        const link = question.query().addFilter(["SEGMENT", segment.id]).question().getUrl()
+        return (
+          <Link to={link}>
+            { segment.name}
+          </Link>
+        )
+      }) }
+    </Box>
+  )
+}
+
+export default EntitySegments

frontend/src/metabase/routes.jsx

@@ -43,7 +43,7 @@ import QueryBuilder from "metabase/query_builder/containers/QueryBuilder.jsx";
 import SetupApp from "metabase/setup/containers/SetupApp.jsx";
 import PostSetupApp from "metabase/setup/containers/PostSetupApp.jsx";
 import UserSettingsApp from "metabase/user/containers/UserSettingsApp.jsx";
-
+import EntityPage from "metabase/components/EntityPage.jsx";
 // new question
 import {
   NewQuestionStart,
@@ -231,7 +231,7 @@ export const getRoutes = store => (
 
         {/* QUERY BUILDER */}
         <Route path="/question">
-          <IndexRoute component={QueryBuilder} />
+          <IndexRoute component={EntityPage} />
           {/* NEW QUESTION FLOW */}
           <Route path="new" title={t`New Question`}>
             <IndexRoute component={NewQuestionStart} />
@@ -242,7 +242,7 @@ export const getRoutes = store => (
             />
           </Route>
         </Route>
-        <Route path="/question/:cardId" component={QueryBuilder} />
+        <Route path="/question/:cardId" component={EntityPage} />
 
         {/* QUESTIONS */}
         <Route path="/questions" title={t`Questions`}>

package.json

@@ -60,6 +60,7 @@
     "react-sortable": "^1.2.0",
     "react-textarea-autosize": "^4.0.5",
     "react-virtualized": "^9.7.2",
+    "rebass": "^1.0.7",
     "recompose": "^0.23.1",
     "redux": "^3.5.2",
     "redux-actions": "^2.0.1",